From d9aeb08f90a217b91d249c71f5af681d51ebffb5 Mon Sep 17 00:00:00 2001 From: Arun Ganesh Date: Thu, 24 Feb 2022 16:19:18 -0500 Subject: [PATCH 1/6] Create basic map from Mapbox docs. #6 --- map.html | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 map.html diff --git a/map.html b/map.html new file mode 100644 index 0000000..8ecfa98 --- /dev/null +++ b/map.html @@ -0,0 +1,36 @@ + + + + +PMGSY roads and facilities map + + + + + + +
+ + + + From 9a0ea2bcbd09ce7d6b036da6757b5026d1eabad4 Mon Sep 17 00:00:00 2001 From: Arun Ganesh Date: Thu, 24 Feb 2022 23:23:55 -0500 Subject: [PATCH 2/6] Add search box --- map.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/map.html b/map.html index 8ecfa98..439df54 100644 --- a/map.html +++ b/map.html @@ -6,6 +6,9 @@ + + + - - -
- - - - From c36c578a3160f23c7fd07ae77e950116c94f9a9c Mon Sep 17 00:00:00 2001 From: Arun Ganesh Date: Wed, 9 Mar 2022 02:04:07 -0500 Subject: [PATCH 6/6] Add build --- docs/map/src/index.html | 72 +++++++++++++++++++++++++++++++++++++++++ docs/map/src/index.js | 59 +++++++++++++++++++++++++++++++++ 2 files changed, 131 insertions(+) create mode 100644 docs/map/src/index.html create mode 100644 docs/map/src/index.js diff --git a/docs/map/src/index.html b/docs/map/src/index.html new file mode 100644 index 0000000..aa6854d --- /dev/null +++ b/docs/map/src/index.html @@ -0,0 +1,72 @@ + + + + + PMGSY Geosadak roads and poi map + + + + + + + + + + + +
+
+

geosadak-map

+
+
+ Geosadak roads +
+
+
+ Geosadak roads not in OSM +
+

Zoom in and click to download JOSM file of diff roads

+
+ + diff --git a/docs/map/src/index.js b/docs/map/src/index.js new file mode 100644 index 0000000..b2d6109 --- /dev/null +++ b/docs/map/src/index.js @@ -0,0 +1,59 @@ +var geojsontoosm = require("geojsontoosm"); +var osm_geojson = require("osm-and-geojson"); + +mapboxgl.accessToken = + "pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2l2eDhnNzNpMDAwNzJ5cGowcnpiMXJkdyJ9.NljuPglsRA3mTGf-4CLIEg"; +const map = new mapboxgl.Map({ + container: "map", // container ID + style: "mapbox://styles/planemad/cknj1leps0ywv17lrj8d16vnj", // style URL + center: [76, 28], // starting position [lng, lat] + zoom: 11.2, // starting zoom + hash: true, +}); + +// Add the control to the map. +map.addControl(new mapboxgl.NavigationControl()); +map.addControl( + new MapboxGeocoder({ + accessToken: mapboxgl.accessToken, + mapboxgl: mapboxgl, + countries: "in", + }) +); + +// Convert tile features as OSM XML + +map.on("click", (e) => { + if (map.getZoom() >= 10) { + // Find all features in one source layer in a vector source + const features = map.querySourceFeatures("composite", { + sourceLayer: "geosadak_road_diff", + }); + + const geojson = { + type: "FeatureCollection", + features: features, + }; + const osm_xml = geojsontoosm(geojson); + + function download(filename, text) { + var element = document.createElement("a"); + element.setAttribute( + "href", + "data:text/plain;charset=utf-8," + encodeURIComponent(text) + ); + element.setAttribute("download", filename); + + element.style.display = "none"; + document.body.appendChild(element); + + element.click(); + + document.body.removeChild(element); + } + + download("geosadak_diff.osm", osm_xml); + + // window.open(`http://127.0.0.1:8111/load_data?new_layer=true&layer_name=geosadak&mime_type=application/x-osm+xml&data="${enc_osm_xml}"`, '_blank'); + } +});