Leaflet GeoJSON Prototype

index.html

<div id="mapid"></div>

leaflet-geojson-prototype.markdown

Leaflet GeoJSON Prototype

A Pen by Beau Cronin on CodePen.

License.

script.js

var mymap = L.map('mapid').setView([37.85, -122.25], 13);
mymap.on('moveend', function(ev) {
  reloadLayers();
  
})
var baseLayer = L.tileLayer(
  'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', 
  {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.dark',
    accessToken: 'pk.eyJ1IjoiYmVhdWNyb25pbiIsImEiOiJjazJxcnkyZ3EwaTliM210b2l6dDE5MnppIn0.K9J-D-Z1UStC_BV75SyPNA'
  }).addTo(mymap);

var baseLayers = { 'main': baseLayer };

var layerNames = [
  'Airport', 'Building', 'Church', 'County', 'Hospital', 'Lake', 'Populated-Place', 'Post-Office', 'School'
]
var overLayers = {}
layerNames.forEach(function(layerName) {
  overLayers[layerName] = L.geoJSON();
})
L.control.layers({}, overLayers).addTo(mymap);

var reloadLayers = function() {
  var c = mymap.getCenter();

  layerNames.forEach(function(layerName) {
    fetch(
      'https://api.str8d8a.info/v1/gnis/'+layerName+'/around/'+c.lat.toString()+'/'+c.lng.toString()+'/4',
      {
        mode: 'cors',
        headers: { 'X-API-Key': 'Uui6dHqgqxauKmXyrk70p6AbmzTG9hM57Ys47dg1' }
      }
    )
    .then(response => response.json())
    .then(function(data) {
      console.log(data);
      overLayers[layerName]
        .clearLayers()
        .addData(data)  
        .bindPopup(function(x) { 
          return x.feature.properties.name; 
        });
    });  
  });
}

reloadLayers();

style.css

#mapid { 
  height: 480px; 
  width: 1000px;
}

body {
  color: black;
}