D3 Examples - Cafés in Groningen

xxxxxxxxxx
 
<!-- Voorbeeld waarin dynamische gegevens uit OpenStreetMap met behulp van Overpass API en                   -->
<!-- de osmtogeojson JavaScript library worden weergeggeven in Leaflet.                                      -->
<!-- Afgeleid van: Alex Morega, https://github.com/mgax/workshop-geocj2015-overpass/blob/master/cafes.html   -->
​
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
​
<body>
<div id="map"></div>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tyrasd/osmtogeojson/2.2.5/osmtogeojson.js"></script>
<script>
​
var api = 'https://overpass-api.de/api/interpreter';
var query = 'area["name"="Groningen"]["admin_level"="10"];node["amenity"="cafe"](area);out;';
​
var map = L.map('map');
​
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
​
$.get(api, {data: query}, function(resp) {
  
  function onEachFeature(feature, layer) {
      if (feature.properties && feature.properties.tags.name) {
          layer.bindPopup(feature.properties.tags.name);
      }
  }
​
  var geojson = osmtogeojson(resp);
  
  console.log(geojson.features[0].properties.tags.name);
  
  var layer = L.geoJson(geojson, {
    onEachFeature: onEachFeature
  }).addTo(map);
  
  map.fitBounds(layer.getBounds());
});
​
</script>
​
    