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?

Answer 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]);
      }
    });
  }
}