diff options
Diffstat (limited to 'demo6.html')
-rw-r--r-- | demo6.html | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/demo6.html b/demo6.html new file mode 100644 index 0000000..da7e434 --- /dev/null +++ b/demo6.html @@ -0,0 +1,89 @@ +<html> + <head> + <link rel="stylesheet" href="leaflet/dist/leaflet.css" /> + <script src="leaflet/dist/leaflet-src.js"></script> + + <style> + body { + padding: 0; + margin: 0; + } + + html, body, #map { + height: 100%; + } + </style> + </head> + <body> + <div id="map"> + </div> + + <script> + var map = L.map('map', { + center: [50.90371, -1.40581], // The Art House Cafe + zoom: 18 + }); + + var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' + }); + + tileLayer.addTo(map); + + // Load some GeoJSON exported from OpenStreetMap using the OverpassAPI + // (http://overpass-turbo.eu/s/7yI) + + var coffeeIcon = L.icon({ + iconUrl: 'coffee.png', + + iconSize: [32, 37], // size of the icon + iconAnchor: [16, 37], // point of the icon which will + popupAnchor: [16, 0] // point from which the + }); + + getJSON("cafes.json", function(cafes) { + + // Coffee icon from + // http://mapicons.nicolasmollet.com/markers/restaurants-bars/bars/coffee/ + + L.geoJson(cafes, { + pointToLayer: function(feature, latLng) { + console.log(feature.properties); + if (feature.properties.cuisine == "coffee_shop") { + var marker = L.marker(latLng, { + icon: coffeeIcon + }); + + return marker; + } else { + return L.marker(latLng); + } + }, + onEachFeature: function(feature, layer) { + + } + }).addTo(map); + }); + + + // function to get a JSON file + function getJSON(url, callback) { + var xhttp = new XMLHttpRequest(); + + xhttp.open('GET', url, true); + xhttp.setRequestHeader('Accept', 'application/json'); + + xhttp.onreadystatechange = function() { + if (xhttp.status == 200 && + xhttp.readyState == 4) { + + callback(JSON.parse(xhttp.responseText), xhttp.responseText); + } + }; + + xhttp.send(); + } + + </script> + </body> +</html> |