6

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.

9

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

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.