FrieseWoudloper/index.html

## index.html
<!-- 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.rawgit.com/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('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://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>
	<!-- 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.rawgit.com/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('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://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>