Document examples to customize India boundaries for various maps

[planemad]

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:

• Leaflet #32
• Mapbox GL
• Openlayers

[naveenpf]

https://wiki.openstreetmap.org/wiki/India/Boundaries/National_borders

How to fix openstreetmap national border rendering

[planemad]

Thanks @naveenpf , looks like the only one missing is something for leaflet #1

cc @answerquest

[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

[planemad]

@answerquest we can add them here: https://github.com/osm-in/openstreetmap.in/tree/master/examples

[planemad]

@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?

[answerquest]

@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.

[planemad]

@answerquest to clarify, i think a leaflet version is possible using the raster tiles:

• Use the OSM mapnik default tiles as base
• Add a Geojson layer with the LoC/LoAc border with the line color as background color to 'hide' the disputed boundaries from the mapnik map
• Add a Geojson layer with the claimed boundaries with line color matching Mapnik boundary style to show extended borders.

Have not fiddle with leaflet in a while, might try to make an example sometime.

[answerquest]

Ok, sure, then can you share the mentioned geojson data?

[planemad]

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 👌

[naveenpf]

Rest of the magic is in the code: https://jsfiddle.net/planemad/1oy4v5g2/26/

This is going to be a superb hit 👌👌👌

[answerquest]

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:

• keep focus on target visualization and prevent straying and getting lost
• save on tiles consumption bandwidth
• if you're rolling your own tiles, you can do it for just your limited area and not have to worry about users going to other places to get error.
• prevent bad actors working for rival companies who want to hijack a mumbai covid-19 data related page to whip up complaints about disputed international boundaries like this idiot here, from sullying your reputation.

[elora92]

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

[planemad]

@elora92 would it work to just use the modified boundary geojson? https://github.com/datameet/maps/blob/master/Country/india-osm.geojson

[ramSeraph]

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

[answerquest]

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.

Overview:

• get the official India boundary (sourced from SOI: https://surveyofindia.gov.in/pages/outline-maps-of-india) into geojson format in a JS variable
• add it as a separate thickk polygon on map as soon as map is initialized and keep interactivity off.

Live Example:

• https://server.nikhilvj.co.in/pmgsy/

Steps:

• India boundary data : https://github.com/answerquest/pmgsy_osm_comparison/blob/main/html/lib/India_Outline_Map.js .
• the geojson data is stored in a js variable india_outline here. Copy-paste the whole thing to your JS (or HTML) file, keep somewhere at the top before map is initialized.
• Add the below snippet just after the 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);

• vary the color, weight, opacity to your liking

This code is from: https://github.com/answerquest/pmgsy_osm_comparison/blob/main/html/js/habitation.js#L358

Reasons for putting map data into a india_outline variable instead of loading from a geojson file:

• Dynamically loading geojson file is more complicated; we need to make an api call or include an extra library to do it. More code.
• I don't want to risk the webpage loading the map first and then taking its sweet time to load up the boundary, giving opportunist armchair activists the opportunity to snap a screenshot. As soon as the map loads the boundary should be THERE ALREADY.
• This solution works in local .html files also that you double-click and open in browser. If we do dynamic json loading, it generally needs to be on some server so one has to spin up a basic web server on PC which you might not know.

Disclaimer:

• This map boundary has been officially shared by Govt of India, as THE official vector format national boundary
• It was in a CRS other than latitude-longitude, so I had to convert the thing.
• When we zoom in to the places under the boundary, we can clearly see that some places are in and out and it's not very accurate.
• That doesn't matter. This is official boundary as per govt. Declare that the boundary came from govt website, so whoever has problems with it, go take it up with the govt. Just put the thing and get on with what you actually wanted to display on your map.