4

I'm using esri-leaflet, and leaflet inherently to add a point feature class (geojson) to a map. What is the best way to add and style the layer? I've see pointToLayer on the leafletjs.com, but don't want to use the circleMarker. Below is a code snippet of what I am working with at the moment:

new L.esri.featureLayer(schools, {
    style: function (feature) {
        return{
            weight: 2,
            opacity: 1,
            'marker-color': '#FFF'
        }
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(L.Util.template(m_template, feature.properties));
    }
}).addTo(map);

I would like to use AwesomeMarkers, but I don't know how to implement that with a featureLayer. From my understanding featureLayer extends L.GeoJson. The 'marker-color' has not worked. A live preview of this is available HERE

  • Can you maybe add a little bit of your code? This way it might be easier to help. – ustroetz Mar 18 '14 at 18:30
  • I've added a code snippet. – figsology Mar 18 '14 at 19:19
2

I'm a little out of my depth using Javascript, but as nobody else answered yet I just want to check that you saw the leafletjs.com page on styling markers here. Please forgive me if I've missed something more subtle about your question.

  • I've looked into that option and have decided to use the AwesomeMarkers plug in for creating different marker colors. The examples are pretty simple, however, they do not go over how to add the customized icon from a GeoJson layer. Any ideas? – figsology Mar 18 '14 at 18:20
1

Very late answer. It might be that this solution was not available in Leaflet at the time of the question, but it might help somebody now.

If you create custom icon with AwesomeMarkers plugin and Font Awesome icons like this:

var myIcon = L.AwesomeMarkers.icon({
  prefix: 'fa',
  icon: 'school',
  markerColor: 'green'
});

then you bind it to layer points in like this:

new L.esri.featureLayer(schools, {
    style: function (feature) {
        return{
            weight: 2,
            opacity: 1,
            'marker-color': '#FFF'
        }
    },
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {
          icon: myIcon
        })
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(L.Util.template(m_template, feature.properties));
    }
}).addTo(map);

With these new markers it would then probably make sense to leave style option out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.