Using SVG icon as marker for a geoJSON point file in Leaflet?

Question

I have a basemap that displays locations from a geoJSON file. Instead of the default markers I would like to use my own svg files, but can't find out how.

Answer 1

I use this simple approach:

var svg = ''; /* insert your own svg */
var iconUrl = 'data:image/svg+xml;base64,' + btoa(svg);

var icon = L.icon( {
            iconUrl: iconUrl,
        } );

Answer 2

Using Leaflet.MakiMarkers plugin, the following code works for me.

d324223's codepen example above is a good one. Making my own markers is beyond my graphic skills.

var greenTree = L.MakiMarkers.icon({
    icon: "park",
    color: "3F9110",
    size: "s"
});
var redTree = L.MakiMarkers.icon({
    icon: "park",
    color: "F04441",
    size: "s"
});
var blueTree = L.MakiMarkers.icon({
    icon: "park",
    color: "442DB5",
    size: "s"
});

pointToLayer: function (feature, latlng) {
    if (feature.properties.OWNER_TYPE === "A") {
        return L.marker(latlng, {
            icon: greenTree,
            title: feature.properties.BCT,
            riseOnHover: true
        });

    } else if (feature.properties.OWNER_TYPE === "B") {
        return L.marker(latlng, {
            icon: blueTree,
            title: feature.properties.BCT,
            riseOnHover: true
        });

    } else {
        return L.marker(latlng, {
            icon: redTree,
            title: feature.properties.BCT,
            riseOnHover: true
        });
    }
},

example:Brewster Conservation Trust

Answer 3

Have you considered using plugin for this? I think Leaflet.vector-markers may suit your needs. Example of this plugin in codepen: http://codepen.io/anon/pen/Jdayb

As for setting different marker for every geojson feature depending on its properties you may check out this example: http://codepen.io/dagmara223/pen/LWYNJO. Please remember that it depends on specific geojson feature properties.

You may get more help if you post your code snippets.

Answer 4

As alternative: https://github.com/lvoogdt/Leaflet.awesome-markers is very cool. You can use FontAwesome (that you probably already use, meaning less bandwidth usage) and/or Ionicons, and there are several customization options available (color, etc.). Plus, you can use CDN (cdnjs).

Answer 5

For me, using current Leaflet version 1.7.1, it is just possible to make your own Icon, pointing the iconUrl to a svg file. You can use the Custom Icon Tutorial from the documentation.