Move JS code to index.js

7 years ago · 663deb8945
2 changed files with 76 additions and 83 deletions
--- a/index.html
+++ b/index.html
@ -77,85 +77,6 @@ ul.overpass-layer-list > li > a.title:active {
  </style>
  <script src="node_modules/leaflet/dist/leaflet.js"></script>
  <script src="dist/openstreetbrowser.js"></script>
-  <script type='text/javascript'>
-var map
-var overpassFrontend
-
-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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    }
-  )
-  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 '<pre>' + JSON.stringify(ob.tags, null, '  ') + '</pre>'
-    }
-  })
-  //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 '<pre>' + JSON.stringify(ob.tags, null, '  ') + '</pre>'
-    }
-  })
-  //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" %}&#127860;{% else %}&#9749;{% endif %}',
-    featureBody: "{{ tags.amenity }}<br/>Cuisine: {{ tags.cuisine|default('unknown') }}"
-  })
-  overpass_layer3.addTo(map)
-  new OverpassLayerList(document.getElementById('info'), overpass_layer3);
-}
-  </script>
 </head>
 <body>
  <div id='map'></div>
--- 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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }
+  )
+  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 '<pre>' + JSON.stringify(ob.tags, null, '  ') + '</pre>'
+    }
+  })
+  //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 '<pre>' + JSON.stringify(ob.tags, null, '  ') + '</pre>'
+    }
+  })
+  //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" %}&#127860;{% else %}&#9749;{% endif %}',
+    featureBody: "{{ tags.amenity }}<br/>Cuisine: {{ tags.cuisine|default('unknown') }}"
+  })
+  overpass_layer3.addTo(map)
+  new OverpassLayerList(document.getElementById('info'), overpass_layer3);
 }
+