0

I'm trying to load a geoJSON layer with div icons, since they are supposed to be more lightweight.

My problem is that I cannot get the divIcons to display. The geoJSON object is stored as individualPoints. I've tried styling the icon directly:

var myIcon = L.divIcon({className: 'my-div-icon'});

var geoJsonLayer = L.geoJson(individualPoints, {icon: myIcon});
map.addLayer(geoJsonLayer); //shows standard icon

and styling the icon on each layer:

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        layer.setIcon(myIcon);
    }
}); 
map.addLayer(geoJsonLayer); // nothing displays

and even creating an additional marker, and adding that to the map:

// create object to save markers
var markersID = [];

// exchanges latitude & longitude
function switchLatLong(oldLocation) {
    return new L.LatLng(oldLocation[1], oldLocation[0]);
}

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        // make a marker and add to map individually
        markersID[feature.properties.id] = L.marker(switchLatLong(feature.geometry.coordinates),{icon: myIcon});
        map.addLayer(markersID[feature.properties.id]); //nothing displays on map
    }
}); 

The first code snippet shows the standard leaflet icon; the second and third snippets do not display anything.

Question: How does one load a geoJson using divIcon?


Edit: Using the new keyword on the second and third snippets displays the divIcon, but this doesn't work in the first code snippet. Also, I would still like to have the divIcon appear without iterating through the layers to generate a new marker. Also, why must the new keyword be used?

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        // set icon to a new DivIcon
        layer.setIcon(new L.DivIcon());
    }
}); 
map.addLayer(geoJsonLayer); // divIcon displays on map
1

Since you want to Set a DivIcon, you should know that it can be applied only to Markers.

The GeoJSON docs Say:

Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker.

You can use the following code to set your custom div icon, like this

    var myIcon = L.divIcon({ 
        iconSize: new L.Point(25, 25), 
        className: 'my-div-icon'
    });

    var geoJsonLayer = L.geoJson(individualPoints, {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: myIcon});
            }
        }).addTo(map);
  • Thank you; this was exactly what I wanted to know. :) Oddly, while your answer works well for a small data set (10 data points), it doesn't load for me with a large data set with 10k data points. The other method still works for the large data set (creating a new L.DivIcon() for each feature via onEachFeature). Maybe what I did was explicitly create a layer for each point? – user2441511 Aug 25 '16 at 20:28
0

I'm going to add this as an answer, because it works. I'm still interested in finding out why I seem to need to create a new DivIcon each time, or if there's a more straightforward way to do this...

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        // set icon to a new DivIcon
        layer.setIcon(new L.DivIcon());
    }
}); 
map.addLayer(geoJsonLayer); // divIcon displays on map
  • You need to do it for each feature, because Leaflet create a new layer for each feature. The geoJsonLayer in your case is a GroupLayer consisting of Layers. – Devdatta Tengshe Aug 25 '16 at 16:52
  • Thank you. But why can't I just refer to the predefined icon? Why must each layer have its own icon? – user2441511 Aug 25 '16 at 16:57

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.