From 663deb89452ed14c3568f1f6a17e227077844685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Fri, 9 Jun 2017 17:04:36 +0200 Subject: [PATCH] Move JS code to index.js --- index.html | 79 ----------------------------------------------------- index.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 76 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 10b253e1..ac1b4da4 100644 --- a/index.html +++ b/index.html @@ -77,85 +77,6 @@ ul.overpass-layer-list > li > a.title:active { -
diff --git a/index.js b/index.js index 63afec32..2fc2e017 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,80 @@ var OverpassLayer = require('overpass-layer') var OverpassLayerList = require('overpass-layer').List var OverpassFrontend = require('overpass-frontend') -if (typeof window !== 'undefined') { - window.OverpassLayer = OverpassLayer - window.OverpassLayerList = OverpassLayerList - window.OverpassFrontend = OverpassFrontend +var map + +window.onload = function() { + map = L.map('map').setView([51.505, -0.09], 18) + overpassFrontend = new OverpassFrontend('http://overpass.osm.rambler.ru/cgi/interpreter', { + timeGap: 10, + effortPerRequest: 100 + }) + + var osm_mapnik = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + { + maxZoom: 19, + attribution: '© OpenStreetMap' + } + ) + osm_mapnik.addTo(map) + + var overpass_layer = new OverpassLayer('node[natural=tree];', { + style: { + nodeFeature: 'CircleMarker', + color: 'red', + fillColor: 'red', + fillOpacity: 0.1, + weight: 1, + radius: 6 + }, + marker: { + iconUrl: 'img/map_pointer.png', + iconSize: [ 25, 42 ], + iconAnchor: [ 13, 42 ] + }, + minZoom: 17, + featureTitle: '{{ tags.species|default("Tree") }}', + featureBody: function(ob) { + return '
' + JSON.stringify(ob.tags, null, '  ') + '
' + } + }) + //overpass_layer.addTo(map) + + var overpass_layer2 = new OverpassLayer('(way[leisure=park];relation[leisure=park];);', { + style: function(ob) { + return { + nodeFeature: 'CircleMarker', + color: 'green', + fillColor: 'green', + fillOpacity: 0.2, + weight: 1, + radius: 6 + } + }, + minZoom: 14, + featureBody: function(ob) { + return '
' + JSON.stringify(ob.tags, null, '  ') + '
' + } + }) + //overpass_layer2.addTo(map) + + var overpass_layer3 = new OverpassLayer('(node[amenity~"^(restaurant|cafe)$"];way[amenity~"^(restaurant|cafe)$"];relation[amenity~"^(restaurant|cafe)$"];);', { + style: + "{% if tags.cuisine == 'italian' %}\n" + + " color: #003f7f\n" + + " fillColor: #003f7f\n" + + "{% else %}\n" + + " color: blue\n" + + " fillColor: blue \n" + + "{% endif %}\n" + + "fillOpacity: 0.2\n" + + "weight: 2\n" + + "radius: 9\n", + minZoom: 16, + markerSign: '{% if tags.amenity=="restaurant" %}🍴{% else %}☕{% endif %}', + featureBody: "{{ tags.amenity }}
Cuisine: {{ tags.cuisine|default('unknown') }}" + }) + overpass_layer3.addTo(map) + new OverpassLayerList(document.getElementById('info'), overpass_layer3); } +