[GIS] Creating custom icons within Leaflet Marker (only icon/ keep marker style)

iconleafletmapboxmarkers

I'm looking to adjust the actual icon within a marker rather than replacing the entire marker with a custom image.

If I'm trying to use a custom .svg file for the 'icon' property, how can i force leaflet (through L.Icon or a similar method) to replace what the white icon is while preserving the actual tear drop shape of the marker?

I just want to use my own icon image instead of calling the MakiMarker api. I am open to adjusting to another library/method compared to L.MakiMarker.

Below is where I want to pass a custom .svg icon to the icon property.

Best Answer

As you alluded to, you will not be able to substitute your own icon image for one of Maki's since those are being returned from mapbox via their marker API (see here for details). Leaflet MakiMarker is not performing any icon "substitution" but instead offering you leaflet markers based on the Maki icons.

You could grab the default leaflet marker image(it's a pin-drop style if that's what you're looking for) and then modify it with your own icon, save that as an image, and then use that image as specified here: http://leafletjs.com/reference-1.1.0.html#icon

Related Solutions

[GIS] Incorporating custom/image markers into Leaflet MarkerCluster

You simply need to define a standard marker with your own icon, e.g. a PNG image, or alternatively with a L.circleMarker if you prefer a circle. You need to collect all markers on creation in an array without adding them to the map yet. You then add all markers to the marker clusterer, which you add in turn to the map.

Here is a simple example that should work, provided you have the MarkerClusterer files and your custom icon (my-icon.png) in the same directory:

<html>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <link rel="stylesheet" href="MarkerCluster.css" />
  <link rel="stylesheet" href="MarkerCluster.Default.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="leaflet.markercluster.js"></script>
</head>
<body>
  <div id="map" style="width: 800px; height: 600px;">
  <script>
    var map = L.map('map', { maxZoom: 15 }).setView([48.5, 0.5], 10);
    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
          subdomains: ['otile1','otile2','otile3','otile4']
    }).addTo(map);
    var markers = [];
    var markerClusterer = L.markerClusterGroup({spiderfyDistanceMultiplier: 1.4});
    var myIcon = L.icon({
        iconUrl: 'my-icon.png',
        iconSize: [40, 40], iconAnchor: [20, 20], popupAnchor: [-20, -20]
    });
    var locations = [];
    for (var i=0; i < 1000; i++) { locations.push([Math.random()+48, Math.random()]); }
    for (var i=0; i < locations.length; i++){
      var m = L.marker([locations[i][0], locations[i][1]], { icon: myIcon });
      markers.push(m);
    }
    markerClusterer.addLayers(markers);
    map.addLayer(markerClusterer);
  </script>
</body>
</html>

[GIS] Changing marker icon from onEachFeature instead of pointToLayer using Leaflet

Maybe this can help.

Use the setIcon method in each condition:

onEachFeature: function(feature, layer) {
...
if (condition1) {
  layer.setIcon(icon1);
  layer.addTo(layer1);
}
else if (condition2) {
  layer.setIcon(icon2);
  layer.addTo(layer2);
}
else ...
}

Best Answer

Related Solutions

[GIS] Incorporating custom/image markers into Leaflet MarkerCluster

[GIS] Changing marker icon from onEachFeature instead of pointToLayer using Leaflet

Related Question