CODEWITHSUNDEEP
angularmapboxmapbox-gl
artworkjpm
artworkjpm

Reputation: 1337

Change the default blue marker to my own icon marker, mapbox angular

I'm trying to change the default blue marker to my own type, I am running into problems because the documentation refers to changing multiple markers, I will always just have one one marker viewed in my map. Is there a way to do it? The map is loading but now showing no markers, so I am close, but no cigar. I want to use ALARM_CENTER.svg icon.

component.ts:

createMap(lng: number, lat: number, zoom: number, createMarker: boolean) {
    this.mapa = new mapboxgl.Map({
      accessToken: environment.mapBox,
      container: 'mapElement',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // starting position [lng, lat]
      zoom: zoom,
      attributionControl: false,
    });
    createMarker ? this.createMarker(lng, lat) : '';
  }

  createMarker(lng: number, lat: number) {
    var el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker({element: "<div class='marker'>"}).setLngLat([lng, lat]).addTo(this.mapa);
 
  }

style.css:

.marker {
  background-image: url("/assets/shopProtection/ALARM_CENTER.svg");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

Upvotes: 0

Views: 773

Answers (1)

artworkjpm
artworkjpm

Reputation: 1337

It was a combination of things, I put the css in the main style.css, not the component.css, something to do with lazy component not loading styles in the component.css. Final code:

component.ts

createMarker(lng: number, lat: number) {
    var el = document.createElement('div');
    el.className = 'marker';
    const marker = new mapboxgl.Marker(el).setLngLat([lng, lat]).addTo(this.mapa);
  }

style.css:

.marker {
  background-size: contain;
  width: 50px;
  height: 50px;
  background-image: url("/assets/img/marker.svg");
  background-repeat: no-repeat;
}

Upvotes: 1

Related Questions