jQuery addClass example

Change class name on click in jQuery

by xilibit

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.js"></script>
<div id="map_container_zone1" style="width: 640px; height: 480px;"> 
</div>

<div id="map_container_zone2" style="width: 640px; height: 480px;"> 
</div>

JavaScript

(function($){ 
  var map1 = L.map('map_container_zone1').setView([45.760612, 6.333560], 16);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: '&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18,
      id: 'map.zone1'
  }).addTo(map1);

  $.getJSON( "https://www.cc-sources-lac-annecy.com/media/kml/zones_activites_geojson/zone1.geojson").done(function( dataperimeterzone1 ) {    
    L.geoJSON(dataperimeterzone1
      ).addTo(map1);      
  }); 

  $.getJSON( "https://www.cc-sources-lac-annecy.com/media/kml/zones_activites_geojson/buildings_zone1.geojson").done(function( datagbuildingszone1 ) {
    function onEachFeature(feature, layer) {     
      var popupContent = feature.properties.Name;            

        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }

      layer.setStyle({color : feature.properties.Style});

      if (feature.properties.Name.length !=0)
      {
          layer.bindPopup(popupContent);
      }
    }

    L.geoJSON(datagbuildingszone1, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature
      }).addTo(map1);    
  })
  .fail(function() {
    console.log( "An error occured when loading the layer buildings_zone1" );
  });   

  var map2 = L.map('map_container_zone2').setView([45.761277, 6.258469], 16);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: '&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18,
      id: 'map.zone2'
  }).addTo(map2);

  $.getJSON(...