CODEWITHSUNDEEP
javahtmlleafleticonsmarker
Prabhakar
Prabhakar

Reputation: 171

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>

Upvotes: 0

Views: 487

Answers (2)

Abel Knezevic
Abel Knezevic

Reputation: 41

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.

Upvotes: 0

Falke Design
Falke Design

Reputation: 11348

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

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

Upvotes: 1

Related Questions