Hi there, First off thanks for the directive! I wa

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Adding markers about angular-mapboxgl-directive HOT 6 CLOSED

naimikan commented on May 30, 2024

Adding markers

from angular-mapboxgl-directive.

Comments (6)

Naimikan commented on May 30, 2024

Hi @mm-ns! Thank you very much for use my directive.

I have to complete the documentation. You can create markers using glSources and glLayers directives.

$scope.glSources = [
   {
      id: 'markers',
      type: 'geojson',
      data: {
         type: 'FeatureCollection',
         features: [
            {
               type: 'Feature',
               geometry: {
                  type: 'Point',
                  coordinates: [12.584943, 55.681505]
               }
            }, {
               type: 'Feature',
               geometry: {
                  type: 'Point',
                  coordinates: [12.584589, 55.681599]
               }
            }
         ]
      }
   }
];

$scope.glLayers = [
   {
      id: 'markers',
      type: 'circle',
      source: 'markers',
      paint: {
         'circle-radius': 8,
         'circle-color': '#FF620D'
      }
   }
];

<mapboxgl
   track-resize="true"
   gl-controls="glControls"
   gl-zoom="mapParam.zoom"
   gl-style="mapParam.style"
   gl-center="mapParam.center"
   gl-sources="glSources"
   gl-layers="glLayers"
   ng-if="mapHasLoaded">
</mapboxgl>

Tell me if this worked!

from angular-mapboxgl-directive.

mm-ns commented on May 30, 2024

Hi there!

That's actually what I ended up doing xD Thanks!

from angular-mapboxgl-directive.

mm-ns commented on May 30, 2024

Can this method be used adding custom markers / icons / images?

from angular-mapboxgl-directive.

Naimikan commented on May 30, 2024

Hi!

You can use glMarkers directive like:

function createElement () {
   var element = document.createElement('div');
   element.style.backgroundImage = 'url(<YOUR_IMAGE>)';

  return element;
}

$scope.glMarkers = [
   {
      coordinates: [12.584943, 55.681505],
      element: createElement()
   }, {
      coordinates: [12.584589, 55.681599],
      element: createElement()
   }
];

<mapboxgl
   track-resize="true"
   gl-controls="glControls"
   gl-zoom="mapParam.zoom"
   gl-style="mapParam.style"
   gl-center="mapParam.center"
   gl-markers="glMarkers"
   ng-if="mapHasLoaded">
</mapboxgl>

from angular-mapboxgl-directive.

mm-ns commented on May 30, 2024

Cool, Thanks! Appreciate it!

Do you know by any chance if there is any benefit using one method over the other one? Is geojson more performant?

from angular-mapboxgl-directive.

Naimikan commented on May 30, 2024

I dont know if there are any benefits using markers or geojson.
Using markers, you are putting an HTMLElement inside a map canvas, and using geojson, you are drawing on the map.

I hope I've helped.

from angular-mapboxgl-directive.

Recommend Projects