Open planemad opened 3 years ago
https://wiki.openstreetmap.org/wiki/India/Boundaries/National_borders
How to fix openstreetmap national border rendering
Thanks @naveenpf , looks like the only one missing is something for leaflet #1
cc @answerquest
Hi, ok I made one : https://answerquest.github.io/osm-in.html , code : https://github.com/answerquest/answerquest.github.io/blob/master/osm-in.html Where do you want it in this repo? @naveenpf @planemad
@answerquest we can add them here: https://github.com/osm-in/openstreetmap.in/tree/master/examples
@answerquest One issue is that we should not be using the existing OSM India raster tiles since they no longer receive data updates. This was the main reason to move to the Mapbox vector tiles #36
Not sure what would the best raster tile option, maybe something that adds some extra geojson boundary lines over the standard mapnik tiles from osm.org. Have got a demo of this using Mapbox GL https://jsfiddle.net/planemad/cesuompe/6/ . Would you be able to port over this effect to leaflet?
@planemad I understand.. in this case maybe it's better to accept that we can't have a simple leaflet example because it's a raster tiles thing and we don't have the raster tiles. Folks should just use the one of the other examples instead. Better to pick a simpler solution. There ARE leaflet plugins to work with vector tiles - maybe in future someone will bring in a code example using that, or leafletjs may upgrade to handle those more simply.
@answerquest to clarify, i think a leaflet version is possible using the raster tiles:
Have not fiddle with leaflet in a while, might try to make an example sometime.
Ok, sure, then can you share the mentioned geojson data?
Think i got it working reasonably well
Data preperations:
Manually merged them and added a boundary=disputed and boundary=claimed property for each set. Simplified with mapshaper with 3% treshold .
Rest of the magic is in the code: https://jsfiddle.net/planemad/1oy4v5g2/26/
@answerquest if you can compile that ^ into a single html and make a pr that would be 👌
Rest of the magic is in the code: https://jsfiddle.net/planemad/1oy4v5g2/26/
This is going to be a superb hit 👌👌👌
Hi, sorry I lost track of the last stuff. Regarding the recent discussions on telegram group, this code shows a way in Leaflet to constrain the map view to your target area and prevent the viewer from zooming too much out or panning to somewhere else: https://github.com/answerquest/WKT-Leaflet-map-template/blob/master/index.html#L39 Live demo: https://answerquest.github.io/WKT-Leaflet-map-template/
Operative code: When initiating the map, add in maxBounds, minZoom, maxBoundsViscosity
var map = L.map('map', {
layers: [CartoDB_Voyager],
maxBounds: [[15,67],[23,87]],
minZoom: 7,
maxBoundsViscosity: 0.9
}).setView([19,77], 7);
maxBoundsViscosity : just as a haptic feedback kind of thing that's familiar to how phone interfaces convey to users they've reached the end / boundary. You can leave it out and have the bounds like a solid wall instead.
Benefits of this:
Hi! I am student and user of QGIS, i am looking to modify the boundary of India according to the Govt. of India Boundaries in OSM and use it in my QGIS program. Any idea how to go about it? I am not a coder. Elora
@elora92 would it work to just use the modified boundary geojson? https://github.com/datameet/maps/blob/master/Country/india-osm.geojson
Think i got it working reasonably well
![]()
Data preperations:
- Disputed boundaries (loc, loac,agpl): http://overpass-turbo.eu/s/YW2
- Claimed boundaries: http://overpass-turbo.eu/s/YW4
Manually merged them and added a boundary=disputed and boundary=claimed property for each set. Simplified with mapshaper with 3% treshold .
Rest of the magic is in the code: https://jsfiddle.net/planemad/1oy4v5g2/26/
@answerquest if you can compile that ^ into a single html and make a pr that would be 👌
Added a script to generate the additions and deletions here - https://github.com/ramSeraph/indianopenmaps/tree/main/india_boundary_correcter
Using it in maplibre on top of Carto dark tiles is here - https://github.com/ramSeraph/indianopenmaps/blob/main/static/view.js#L51
Sharing another relatively lower-tech solution, in Leaflet js :: folks who know even just the starting steps of how to add a shape to the map should be able to do this with ease.
india_outline
here. Copy-paste the whole thing to your JS (or HTML) file, keep somewhere at the top before map is initialized.// Load India int'l boundary as per shapefile shared on https://surveyofindia.gov.in/pages/outline-maps-of-india
L.geoJSON(india_outline, {
style: function (feature) {
return {
color: "black",
fillOpacity: 0,
weight: 3,
opacity: 1
};
},
interactive: false
}).addTo(map);
This code is from: https://github.com/answerquest/pmgsy_osm_comparison/blob/main/html/js/habitation.js#L358
india_outline
variable instead of loading from a geojson file:
Since OSM maps can be used via various libraries and platforms, it would be useful to show examples of how one can customize the India boundaries in each: