add custom image to azure maps

Question

I am using this wrapper for the azure maps library. I am currently implementing a symbol layer and using one of the default markers works well, but I am not able to add my own marker. I tried to add a custom marker like in my mapReady function, but the response is always undefined and the image is not added.

this is my component:

import {Component, Input, OnInit} from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  private markerImagePath = 'assets/images/map-marker.png';

  public dataSource: atlas.source.DataSource;
  markerDescription: 'marker';

  public options: atlas.IconOptions = {
    image: this.markerDescription
  };

  points = [
    [52.52437, 13.41053],
    [51.50853, -0.12574]
  ];

  ngOnInit() { }

  mapReady(map: atlas.Map) {
    map.imageSprite.add(this.markerDescription, this.markerImagePath).then(r => {
      console.log(r);
      console.log(map.imageSprite.getImageIds());
      this.dataSource = new atlas.source.DataSource('markers');
      this.points.forEach(p => {
        const point = new atlas.Shape(new atlas.data.Point([p[1], p[0]]));
        this.dataSource.add([point]);
      });
    });
  }
}

this is my html:

<section>
  <div class="row">
    <div class="col-12 map-dimensions my-2 mx-auto" azure-map zoom="2"
         [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">
    <map-symbol-layer dataSourceId="markers"
                      [iconOptions]="options"></map-symbol-layer>
    </div>
  </div>
</section>

I suspect, that I access the map data wrongly... Do any of you guys know, how I can add a custom image to the imageSprites in order for me to use it as a marker in the symbol layer?

Arnaud Leclerc · Accepted Answer · 2021-03-18 15:30:27Z

1

Your code looks fine. imageSprite.add returns a Promise<void>, so your console.log will always log undefined. Could your icon be the issue ? I have been trying a similar solution and all works fine on my side :

import { Component } from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-root',
  template: '<azure-map zoom="2" [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">' +
    '<map-symbol-layer [id]="blueLayerId" dataSourceId="blue" [iconOptions]="blueIconOptions"></map-symbol-layer>' +
    '</azure-map>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public dataSource: atlas.source.DataSource;

  public blueLayerId: string = "blueLayer";

  public blueIconOptions: atlas.IconOptions = {
    image: 'campground'
  };

  mapReady(map: atlas.Map) {
    map.imageSprite.add('campground', 'assets/campground.png').then(() => {
      this.dataSource = new atlas.source.DataSource('blue');
      for (let i = 0; i < 10; i++) {
        const point = new atlas.Shape(new atlas.data.Point([i * 5, i * 5]));
        this.dataSource.add([point]);
      }
    });
  }
}

edited Mar 18, 2021 at 15:30

answered Mar 18, 2021 at 15:25

Arnaud Leclerc

5814 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BoJack Horseman Over a year ago

When I replaced the variables this.markerDescription with the actual values it worked. Weird, but thank you!

BoJack Horseman Over a year ago

Can I ask you another question Arnaud?

BoJack Horseman Over a year ago

I would of course create a new question, so that you can at least receive the so reputation. It's regarding the popup feature. For some reason it doesn't work and I really am not able to find the error.

Arnaud Leclerc Over a year ago

Sure thing, you can also open an issue on the Git repository of ng-azure-maps, just to be sure I don't miss it

BoJack Horseman Over a year ago

Thank you a lot! I have asked this question and I have searched the bug for hours but I cannot find where I went wrong: stackoverflow.com/questions/66694648/…

Collectives™ on Stack Overflow

add custom image to azure maps

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related