osm plugin

jamesjara · Feb 6, 2017 · 712c6ea · 712c6ea
1 parent d2e1ddc
commit 712c6ea
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 114 deletions.
diff --git a/maps/index.html b/maps/index.html
diff --git a/osm/index.html b/osm/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'/>
+    <title></title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
+    <script src='plugin.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet'/>
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+        #menu { position: absolute; background: rgba(0,0,0,0.3);
+            color: white; padding: 8px; font-size: 15px;}
+        #marker { background-image: url('popup.png');
+            /* Icom By:  Aung Thaw Htut - CC BY 3.0  */
+            background-size: cover; width: 50px; height: 50px;
+            border-radius: 50%; cursor: pointer; }
+    </style>
+</head>
+    <body>
+        <div id='map'></div>
+        <div id='menu'>
+            <input id='streets' type='radio' name='rtoggle' value='streets' checked='checked'>
+            <label for='streets'>Streets</label><br> 
+            <input id='dark' type='radio' name='rtoggle' value='dark' >
+            <label for='dark'>Dark</label><br>
+            <input id='satellite' type='radio' name='rtoggle' value='satellite'>
+            <label for='satellite'>Satellite</label>
+        </div>
+
+        <script>
+            window.addEventListener('mesage', function(event){
+                // if (~event.origin.indexOf('https://netdb.io')) 
+                initPlugin(event.data);
+            });
+            function initPlugin(response){
+                var mapbox = new mapPlugin(response[data])
+            }
+        </script>
+    </body>
+</html>
diff --git a/osm/plugin.js b/osm/plugin.js
@@ -0,0 +1,48 @@
+'use strict'
+
+function mapPlugin(data){
+
+    mapboxgl.accessToken = 'pk.eyJ1IjoiZmFmYWJhIiwiYSI6ImNpeWpwMzd3ZDAwMDMycXM3YXdlZ3licHEifQ.XJU54ySPMKfOLLK8qo2QFA' //public key - mapbox
+
+    var popup = '',
+        div = '',
+        info = '',
+        lat = '',
+        lon = ''
+
+    var map = new mapboxgl.Map({
+            container: 'map',
+            style: 'mapbox://styles/mapbox/streets-v9',
+            zoom: data.length > 1 ? 6: 15
+        })
+
+    // radio
+    var layerList = document.getElementById('menu'),
+        inputs = layerList.getElementsByTagName('input')
+
+    for (var i = 0; i < inputs.length; i++)
+        inputs[i].onclick = switchLayer
+
+    for (row of data) {
+        lon = row.location_longitude,
+        lat = row.location_latitude,
+        info = `${row.ip} / ${row.hostname}`
+        popup = new mapboxgl.Popup({offset: 39})
+                .setText( info )
+        div = document.createElement('div')
+        div.id = 'marker'
+
+        new mapboxgl.Marker(div, {offset:[-25, -50]})
+            .setLngLat([lon,lat])
+            .setPopup(popup)
+            .addTo(map)
+    }
+
+    map.setCenter([lon, lat])
+
+    function switchLayer(layer)
+    {
+        var layerId = layer.target.id
+        map.setStyle(`mapbox://styles/mapbox/${layerId}-v9`)
+    }
+}
diff --git a/maps/popup.png → osm/popup.png b/maps/popup.png → osm/popup.png