ionic & LeafletJS set marker

Question

I am trying to set markers to my $scope.map variable with

L.marker([location.lat,location.lng]).addTo($scope.map);

, but I keep getting this error:

TypeError: t.addLayer is not a function at o.Marker.o.Class.extend.addTo (leaflet.js:7) at mapController.js:82

I don't know why, because I am basically doing the same as in http://leafletjs.com/examples/custom-icons.html

and as it is specified in the API http://leafletjs.com/reference.html#marker

I wanted to add custom icons, but now got hung up here.

Answer 1

I recomand you to add angular-leaflet-directives that are the leaflet packaged for angular JS.

Then to add a marker, do the following :

• create your marker

    var iconTemplate = {
     'lat': lat, // your lat value
     'lng': lng, // your lng value
     'focus': false,
     'layer': layerValue, // if you add your marker to a layer
     'draggable': false,
     'message': popupContent, // your popupcontent
      getMessageScope: function() {
          return $scope;
      },
      compileMessage: true,
      'icon': {
        'type': "awesomeMarker", // i use awesomeMarker for font awesome
        'icon': markerIcon, // a variable for my icon
        'markerColor': markerColor // a variable for my color
       }
  };
  

• add your marker to your marker list (binded to HTML)

    $scope.markers.push(iconTemplate)
  

That's it