Add HTML/JS/CSS for gps.tile.openstreetmap.org site
authorTom Hughes <tom@compton.nu>
Thu, 5 Jan 2017 00:22:15 +0000 (00:22 +0000)
committerTom Hughes <tom@compton.nu>
Thu, 5 Jan 2017 00:22:15 +0000 (00:22 +0000)
cookbooks/gps-tile/files/default/html/index.html [new file with mode: 0644]
cookbooks/gps-tile/files/default/html/map.css [new file with mode: 0644]
cookbooks/gps-tile/files/default/html/map.js [new file with mode: 0644]

diff --git a/cookbooks/gps-tile/files/default/html/index.html b/cookbooks/gps-tile/files/default/html/index.html
new file mode 100644 (file)
index 0000000..f8482d3
--- /dev/null
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+    <title>gps.tile.openstreetmap.org</title>
+    <link rel="stylesheet" href="map.css" type="text/css" media="all" />
+    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
+    <script type="text/javascript" src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
+    <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="map.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+  </body>
+</html>
diff --git a/cookbooks/gps-tile/files/default/html/map.css b/cookbooks/gps-tile/files/default/html/map.css
new file mode 100644 (file)
index 0000000..0a22de6
--- /dev/null
@@ -0,0 +1,7 @@
+#map {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+}
diff --git a/cookbooks/gps-tile/files/default/html/map.js b/cookbooks/gps-tile/files/default/html/map.js
new file mode 100644 (file)
index 0000000..af3b0d9
--- /dev/null
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  // Create a map
+  var map = L.map("map");
+
+  // Add GPS tile layer
+  L.tileLayer("//gps-{s}.tile.openstreetmap.org/gps-lines/tile/{z}/{x}/{y}.png", {
+    attribution: "© <a target=\"_parent\" href=\"http://www.openstreetmap.org\">OpenStreetMap</a> and contributors, under an <a target=\"_parent\" href=\"http://www.openstreetmap.org/copyright\">open license</a>",
+    maxZoom: 18
+  }).addTo(map);
+
+  // SHow the whole world
+  map.fitWorld();
+});