Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create basic map from Mapbox docs. #6 #7

Closed
wants to merge 6 commits into from
Closed

Create basic map from Mapbox docs. #6 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9aeb08
Create basic map from Mapbox docs. #6
planemad Feb 24, 2022
9a0ea2b
Add search box
planemad Feb 25, 2022
4cfdd41
fix comma
planemad Feb 25, 2022
bdb0e7d
Move to docs folder
planemad Mar 9, 2022
9307a7f
Add legend and diff download
planemad Mar 9, 2022
c36c578
Add build
planemad Mar 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions docs/map/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PMGSY Geosadak roads and poi map</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!-- <link rel="stylesheet" href="styles.css" /> -->
<script type="module" src="index.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<!-- Load the `mapbox-gl-geocoder` plugin. -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css"
type="text/css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
height: 100vh;
width: 100%;
}
#map-overlay {
position: absolute;
top: 20px;
left: 20px;
width: 300px;
background-color: rgba(222, 222, 222, 0.66);
padding: 10px;
}
hr {
float: left;
width: 20px;
margin-right: 5px;
background: none;
height: 0;
border: 0 none;
border-top: 2px solid #fff;
clear: both;
}
.dash {
border-top: 4px dotted #fe0000;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="map-overlay">
<h2>geosadak-map</h2>
<div>
<hr />
Geosadak roads
</div>
<div>
<hr class="dash" />
Geosadak roads not in OSM
</div>
<p>Zoom in and click to download JOSM file of diff roads</p>
</div>
</body>
</html>
59 changes: 59 additions & 0 deletions docs/map/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
}
});