'Customizing Leaflet Icon

I need to add 2 different marker icon in leaflet. The one is world heritage site and other for earthquake. The URL for earthquake icon is:

var earthquakeicon = L.icon({
    iconUrl: 'https://previews.123rf.com/images/baihya/baihya1205/baihya120500039/13782110-terremoto-del-s%C3%ADmbolo-de-advertencia.jpg',
    iconSize: [20, 20]
    });

The URL for world heritage site is:

var heritageicon = L.icon({
    iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Unesco_World_Heritage_logo_notext_transparent.svg/1200px-Unesco_World_Heritage_logo_notext_transparent.svg.png',
    iconSize: [20, 20]
    });

Can some please help me on customizing leaflet icon for the given leaflet map from above URL.The leaflet code I am actually working is given below:-

<html>
<head>
  <title>Creating mash-ups with Leaflet</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://auth.airmap.com/js/keycloak.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    #map {
      width: 800px;
      height: 600px;
    }
  </style>
  <head>
    <body>
      <div id="map"></div>
      <script>
        var map = L.map('map').setView([14.6361111, 42.1608333], 8);
        var wmsLayer = L.tileLayer.wms('https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?', {
          layers: 'GEBCO_LATEST_SUB_ICE_TOPO'
        }).addTo(map);

        var elevation;
        $.getJSON('https://demo.pygeoapi.io/master/collections/ogr_gpkg_poi/items?f=json', function(value) {
          var datalayer = L.geoJson(value, {
            onEachFeature: function(feature, featureLayer) {
              var lon = feature.geometry.coordinates[0];
              var lat = feature.geometry.coordinates[1];
              var city = feature.properties.name;

              $.ajax({
                url: 'https://api.airmap.com/elevation/v1/ele/?points=' + lat + ',' + lon +
                  '&units=metric& appid=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjcmVkZW50aWFsX2lkIjoiY3JlZGVudGlhbHxwQUFNWlBxaEx2T2Q2cGZSR2JkMlhDQkdRcTdNIiwiYXBwbGljYXRpb25faWQiOiJhcHBsaWNhdGlvbnx3ZURHZ01oTldtek55c1A4S0xEdlRsQW5QTE0iLCJvcmdhbml6YXRpb25faWQiOiJkZXZlbG9wZXJ8MnpvYmI3eWh4ZVk0cWtDM1BSeDBaSEtNejIzOCIsImlhdCI6MTQ3MTM3OTc0Mn0.MeO0jt6holPt0jdPJvRJrTBi380WsbOPGCEO6u-tfSo',
                async: false,
                dataType: 'json',
                success: function(json) {
                  elevation = json.data;
                }
              });
              featureLayer.bindPopup("City: " + city + "</br>Elevation: " + elevation + "metres");
            }
          }).addTo(map);
        });

var wfs_url = "https://emidius.mi.ingv.it/services/italy/wfs/?service=wfs&version=2.0.0&request=GetFeature&typeNames=italy:CPTI_current&outputFormat=application/json&CQL_FILTER=dwithin(geom, MULTIPOINT((41.701259 -7.5005), (40.655991 -7.917709), (40.200475 -8.419193),(40.198381 -7.639009),(40.087058 -8.290237),(39.369447 -9.391943),(38.443198 -9.100006),(38.448289 -9.130834),(32.748972 -16.697671)), 1450, kilometers)";
 $.getJSON(wfs_url).then((res) => {
  var layer = L.geoJson(res, {
    onEachFeature: function (feature, layer) {
      var popupTxt = 'Epicentral area: ' + feature.properties.EpicentralArea + '<br>' +
                     'Year: ' + feature.properties.Year +  '<br>' +
                     'Magnitude: ' + feature.properties.MwDef
      layer.bindPopup(popupTxt);
    }      
  }).addTo(map);
  map.fitBounds(layer.getBounds());
});
      </script>
    </body>
</html>
javahtmlleafleticonsmarker


Solution 1:[1]

In the onEachFeature you can add the icon to the marker with setIcon:

 onEachFeature: function (feature, layer) {
...
layer.setIcon(earthquakeicon);
...
}

Solution 2:[2]

Another customization that is possible on icons is adding both popupAnchor and tooltipAnchor to an icon. It's obvious what they'll do. One will trigger on a click, while the other one will appear on mouseover. Here is some code:

var regular_Icon = L.icon({
iconUrl:  'icons/marker-icon.png',
shadowUrl: 'icons/marker-shadow.png',
iconSize: [25,41],
shadowSize: [41,41],
iconAnchor: [13,39],
shadowAnchor: [13,41],
popupAnchor: [0,-50],
tooltipAnchor: [-40,20]
});

Another very useful nugget is that you can add className to icons, for easy manipulation.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Falke Design
Solution 2 Abel Knezevic

Related Questions