diff --git a/maps/index.html b/maps/index.html
deleted file mode 100644
index dc3675d..0000000
--- a/maps/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/osm/index.html b/osm/index.html
new file mode 100644
index 0000000..f8ea9ed
--- /dev/null
+++ b/osm/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/osm/plugin.js b/osm/plugin.js
new file mode 100644
index 0000000..02e755b
--- /dev/null
+++ 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`)
+ }
+}
\ No newline at end of file
diff --git a/maps/popup.png b/osm/popup.png
similarity index 100%
rename from maps/popup.png
rename to osm/popup.png