Saturday, May 12, 2018

Roll Your Own Non-Warped Maps

I've always loved Map Warper, a service that allows you to georectify vintage maps so that they can be used with modern interactive mapping platforms. However you should use Map Warper with caution as it is not suitable for every map. As the name suggests Map Warper warps your map image to fit a Web Mercator map projection. This can lead to serious distortions in the way your vintage map will appear.

The Antirubbersheeter is a new web service which can help you to create a Leaflet.js map of any image, with its own co-ordinate system. The problem with using an image as your background map in Leaflet is that you then need to work out how to geocode points on your image if you want to add markers, polylines etc. Antirubbersheeter does all this for you.

This means that you can now more easily use Leaflet.js to make interactive maps of your vintage maps, your fantasy maps, your computer game world maps or interactive maps from any image that you want to use. It is really easy to use Antirubbersheeter. Just upload your image. Add a list of places you want to geocode on your image. Antirubbersheeter then allows you to simply click on your image to geocode your list of places.

When you've finished Antirubbersheeter outputs the json of your geocoded locations, providing you with the co-ordinates for each of the places you want to mark on your very own Leaflet.js map.

Antirubbersheeter includes a demo map which you can view to see how this all works in practice. I've also created a slightly simpler demo map which you might find a little easier to work from. If you work from my simpler demo map you just need to:

1. change the bounds variable to the height and width of your image (in that order)
2. change the image variable to the URL for your image on imgur (or the image yourself)
3. change the marker co-ordinate numbers to the y and x numbers for each of your markers

These can all be found in the json output you get after geocoding your image using Antirubbersheeter.
Post a Comment