I'm going to display custom dom into agm-map in my angular6 project.
When I use agm-marker I can only display specific icon and label.
What I want to display looks like:
.user-location i {
opacity: 0.7;
}
.user-location img {
border-radious: 100%;
}
...
<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>
I have changed the marker the following way:
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
<div *ngFor="let marker of markers;">
<agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>
</agm-marker>
</div>
</agm-map>
If you ever want to customize the map too you can do the following:
[styles]="mapStyle === 'dark' ? styleDark : styleLight"
in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo:
https://github.com/devpato/SOSmap
Related
I have two *ngFors in which the first one displays the text names of venues and uses (mouseenter) and (mouseleave) to call functions that change the color of pins on a map below the names. The second *ngFor is for displaying map pins for each venue. The maps pin color is controlled by the [iconUrl]="iconColor" in the ngfor.
The problem is that when I hover over the text of the venue name, every map pin changes color, instead of just the single pin that I want to change.
What would be the best way to go about this?
HTML:
<body>
<div>
<div align="center">
<div *ngFor="let venue of mapVenues">
<div class="venue-name" (mouseenter)="markerHovered()" (mouseleave)="markerNotHovered()">
{{ venue }}
</div>
</div>
</div>
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="11" (mapready)="markerAnimation()">
<agm-marker *ngFor='let show of usersShows'
[latitude]="show.venue.lat"
[longitude]="show.venue.lng"
[animation]="animation"
[iconUrl]="iconColor"
></agm-marker>
</agm-map>
</div>
</body>
Typescript:
markerHovered() {
this.hovered = true;
this.iconColor = 'https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|4286f4';
}
markerNotHovered() {
this.hovered = false;
this.iconColor = 'https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|FF0000';
}
You can try [ngClass]:
<div [ngClass]="hovered?'hovered-venue':'venue-name'" (mouseenter)="markerHovered()" (mouseleave)="markerNotHovered()">
{{ venue }}
</div>
And define your style for class 'hovered-venue' as you like, ex:
.hovered-venue {
color: red;
}
You need to add hovered property to usersShows object, and then use condition to hovered object to apply url.
<agm-marker *ngFor='let show of usersShows'
[latitude]="show.venue.lat"
[longitude]="show.venue.lng"
[animation]="animation"
[iconUrl]="show.hovered ? iconColor : ''"
></agm-marker>
I have some decks of cards.
I want to display a specific image for each deck, I have an assets folder with all my images.
<div class="decks">
<div *ngFor="let deck of decks" class="deck">
<img
src="../../assets/img/MAGE.png"
MAGE is just an exemple of a deckClass, that name should match deck.deckClass
class="img-responsive"
style="height: 200px;">
<h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
<p *ngFor="let card of deck.deckCards" >
{{ card.name }} : {{ card.manaCost }}
</p>
</div>
</div>
How can I concatenate in a src attribute the deck.deckClass name in a dynamic way?
Consider using the Expression Context
You can wrap the sry attribute with square brackets, this way Angular will know to evaluate the value:
[src]="'../../assets/img/' + deck.deckClass '.png'"
See a demo here: https://stackblitz.com/edit/angular-ua9cfc
I don't have images in there, so they will be shown as broken img's in the demo ...
p.s.: if those images are in your src/assets/ folder, then this should suffice:
[src]="'assets/img/' + deck.deckClass '.png'"
I have the below structure, where I have my images data in the json format which has the links to the assets folder. Where all the images are placed. I was thinking to use this way of using images for testing as in future we will have images somewhere in the web and will fetch from the there based on the similar JSON:
- app
- core
- data
- img.json
- layout
- test.component.ts
- assets
- images
img.json:
{
"items" : [
{
"img": "/assets/images/test1.png",
"alt" : "Image 1"
},
{
"img": "/assets/images/test2.png",
"alt" : "Image 2"
},
{
"img": "/assets/images/test3.png",
"alt" : "Image 3"
}
]
}
test.component.ts:
import images from '../../data/img.json';
export class SlideshowComponent implements OnInit {
showNavigationArrows = false;
showNavigationIndicators = false;
items = [0, 1, 2].map((n) => images);
constructor(config: NgbCarouselConfig) {
// customize default values of carousels used by this component tree
config.showNavigationArrows = true;
config.showNavigationIndicators = true;
}
}
HTML:
<ngb-carousel *ngIf="items" [showNavigationArrows]="showNavigationArrows"
[showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let item of items">
<div class="picsum-img-wrapper">
<img [src]="item" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
I am unable to connect the images to the HTML, any help would be great.
assuming your tsconfig is properly configured to import json (your ts compiler would throw errors at you if not)
you should be able to do this with:
items = images.items; // not sure why you had that index -> map structure?
and
<ng-template ngbSlide *ngFor="let item of items">
<div class="picsum-img-wrapper">
<img [src]="item.img" alt="{{ item.alt }}"> <!-- access the url and use the alt text -->
</div>
</ng-template>
extra based on comments:
if you want to optionally show a video tag, I'd recommend somehting like this:
items = images.items.map(i => Object.assign({}, i, {isVideo: i.img.endsWith('.mov')})) // this only works for mov obviously
template:
<ng-template ngbSlide *ngFor="let item of items">
<div class="picsum-img-wrapper">
<img *ngIf="!item.isVideo" [src]="item.img" alt="{{ item.alt }}"> <!-- simple ngIf to show right tag -->
<video *ngIf="item.isVideo" [src]="item.img" alt="{{ item.alt }}" controls></video>
</div>
</ng-template>
I am using Angular 6 + AGM core to show google map geolocation. On click of agm-marker the agm-info-window displays but when i click agm-circle, the info window is not working.
<agm-circle
[latitude]="marker.latitude"
[longitude]="marker.longitude"
[radius]="marker.value * markerRadiusScaleFactor"
(circleClick)="onCircleClicked($event)">
<agm-info-window [isOpen]="visible">
<app-map-info-window (close)="visible = false" [marker]="marker"></app-map-info-window>
</agm-info-window>
</agm-circle>
component.ts
onCircleClicked($event: MouseEvent) {
console.log($event);
this.visible = !this.visible;
}
What am i doing wrong here?
thanks
To make the amg-info-window show up during mouse events (over or click),I needed to add the same latitude and longitude values as those for amg-circle to the amg-info-window as well. This is not needed when using amg-marker instead of amg-info-circle. Looks like some inconsistency in angular-google-map implementation.
<div *ngFor="let site of sites">
<agm-circle *ngIf="site.active"
[latitude]="site.latitude"
[longitude]="site.longitude"
[radius]="site.radius"
[fillColor]="site.color"
[fillOpacity]="site.opacity"
(mouseOver)="infoWindow.open();"
(mouseOut)="infoWindow.close();">
<agm-info-window
[latitude]="site.latitude"
[longitude]="site.longitude"
[disableAutoPan]="false" #infoWindow>
<div>
<span>
<b>{{site.name +': '}} ({{site.budget | currency }}) </b>
</span>
</div>
</agm-info-window>
</agm-circle>
</div>
I am using AngularJS material. I would like to load an image based on the switch status. Below is the relevant HTML code.
If sw_status.sw1 == true, load image truePic.jpg. If sw_status.sw1 == false, load image falsePic.jpg.
<div ng-controller="AGCtrl">
<md-switch ng-model="sw_status.sw1" aria-label="Switch_1" ng-change="onChange(sw_status.sw1)">
Switch_1: {{ sw_status.sw1 }}
</md-switch>
</div>
<img src='img/truePic.jpg'>
<img ng-src="{{sw_status.sw1 ? 'truePic.jpg' : 'falsePic.jpg'}}">