Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="How to identify overlapping JSON layers in Leaflet?">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Identify overlapping JSON layers</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
</head>
<body>
  <p>Note that the Campus layer can be identified when the States layer is not present, but is over-lapped when the States layer is on</p>
  <div id='map'></div>
  <label><input id="chkStates" type="checkbox">Toggle States layer</label>
​
  <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
  <script src="http://leafletjs.com/examples/choropleth/us-states.js" type="text/javascript"></script>
  <script src="http://leafletjs.com/examples/geojson/sample-geojson.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
  
</body>
</html>
 
#map {
  width: 600px;
  height: 400px;
}
 
var map = L.map('map').setView([39.74739, -105], 13);
​
​
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
  id: 'mapbox.light'
}).addTo(map);
​
var campusLayer =  L.geoJson(campus, {
  onEachFeature: onEachFeature
});
campusLayer.addTo(map);
​
// Define the States layer, but don't add it to the map yet
var statesLayer = L.geoJson(statesData, {
  onEachFeature: onEachFeature
});
​
function onEachFeature(feature, layer) {
  var popupContent = "";
​
  if (feature.properties) {
​
    if(feature.properties.popupContent) {
      popupContent = feature.properties.popupContent;
    } else if (feature.properties.name) {
      popupContent = feature.properties.name;
    }
​
  }
​
  layer.bindPopup(popupContent);
}
​
$("#chkStates").on("click", function(){
  // Add the States layer to the map when the checkbox is clicked
  if(statesLayer._map == undefined || statesLayer._map == null) {
    statesLayer.addTo(map);
  } else {
    map.removeLayer(statesLayer);
  }
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sleadpro
0viewers