13

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.

18

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,
        } );
4

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

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.

0

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).

0

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.

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.