I want to change marker from blue default to my own design. But I linked JSON external and I don't know what I have to change in code.

var featuresLayer = new L.GeoJSON(data, { style: function(feature) { return {color: feature.properties.color }; }, onEachFeature: function(feature, marker) { marker.bindPopup( "<b>Hello world!</b><br>ID vzorku "+feature.properties.catalogNumber + "</br> nadm vyska "+feature.properties.elevation+ "<br>I am a popup."+feature.properties.tavg1 ); } });


The formal leaflet marker/Json example is a good way to start. Basically in order to load points as layers you should use pointToLayer

L.geoJSON(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions); // The basic style

If all of your feature are in a layerGroup, you can change the layerGroup style with :

layerGroup.setStyle(styleMarkerByAttr); // Define a function, check the attr you need and style the marker accordingly.

In the style function you can reference your color attr - and set the icon/marker color respectively.

Further reading : setIcon in the leaflet doc


I think Font Awesome or CircleMarkers are the two easiest methods.

Font Awesome example: http://zevross.com/blog/2014/10/28/tips-for-creating-leafleft-js-maps/

Or CircleMarkers example. http://www.gistechsolutions.com/leaflet/DEMO/baseball/Baseball.html

The Leaflet JS page also shows using icons as a demo.

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.