Web maps: Moving from google maps JS to open source

(As of Dec 2018) Look at what has happened to Indian Railways’ Live Train map site: https://enquiry.indianrail.gov.in/ntes/trainOnMap.jsp

Map loads, and in a second or so is covered by error message. Console shows: Google Maps JavaScript API error: InvalidClientIdMapError , Google Maps JavaScript API warning: RetiredVersion

This is happening to several websites all across the internet after Google made changes some months back to the way people can use google maps API javascript to display information on maps. This is a prime example of the vulnerability of depending on closed-source tech. The data here is not even google’s; its Indian Railways data. If you query for trains you can understand that the data is coming in; just the map display part is broken now.

But there have been alternatives to google maps API’s JS libraries since some years now : Leaflet.js , Mapbox (the two are very similar and share many plugins), OpenLayers. I work in leaflet.js so can talk most about that. On the JS end it’s similar code as google’s with some differences. So there is a strong case to MOVE to using open source JS to render maps on web pages, if people want to avoid situations like the indian railways’ site is facing.

The web mapping tech (‘slippy maps’) actually does not have any external dependency. You can even keep a blank background layer (no bg!) and display all your map data - points, shapes, lines, popups, etc: without any issues. In fact, people are using that tech for other purposes too.

The map’s background layer is not tied to the JS library being used. There are several options to choose from for background layers : OpenStreetMap and various flavours of it made my Mapbox and others. And satellite imagery too. Mapbo has a standard satellite imagery layer with labels, and Bing imagery can be also be used via a plugin. Heck, a Kerala govt site is using leaflet.js to render their map, and they have google’s streets and satellite layers listed as options! http://hris.kseb.in/pmumap/

With a bit of learning anyone who was thus far using google maps JS, can implement the same map using Leaflet or other open source alternatives.

If you have a specific question then please post it here, I’ll be happy to answer. And if anybody knows someone in that rail map website team, please connect me with them - I can help them migrate to leaflet!

2 Likes

There are multiple issues in using Google maps.

  • Google gets the location information
  • Google gets the query data or at least the approximation.

Avoiding google one can use as suggested above leaflet JS with OpenStreetMap. :+1:

I have put together some basic html’s for helping folks get started with leaflet. See the 1,2,3,4.html files and their sources progressively.

http://nikhilvj.co.in/files/leaflet-training/1.html

http://nikhilvj.co.in/files/leaflet-training/3.html

http://nikhilvj.co.in/files/leaflet-training/3.html

http://nikhilvj.co.in/files/leaflet-training/4.html

1 Like

Thanks for providing links on leaflet.It is more helpful to get an over view to us get started with leaflet

1 Like