If you live in Mumbai and have ever wondered about the types of marine life which live on the local shores of the Arabian sea you can now refer to a new interactive map which explores the types of creatures which live on the city's beaches.
Marine Life of Mumbai is an interactive map of a virtual Mumbai shore which shows the three common ecosystems which exist on the coast of Mumbai and the marine life which can typically be found living in each. The map presents three virtual habitats: a sandy, rocky and a muddy shore. Explore these habitats closely on the map and you will find lots of different examples of marine life. Click on any of the creatures shown on the map and an information window will open with a photo and information on the selected creature.
The Marine Life of Mumbai interactive map was created using a static image of Mumbai's virtual shore with the Leaflet,js mapping library. The Non-geographical Maps example in the Leaflet tutorial provides a good starting place if you want to create your own interactive map from a static image. This shows you how you can use L.ImageOverlay to add a static image to a Leaflet map.
Using L,ImageOverlay is the simplest way to map a static image with Leaflet. You can also create a full set of interactive map tiles from an image if you want to create a map with a very high resolution and lots of zoom levels. Bjørn Sandvik has written a neat Leaflet plugin (code available on GitHub) which can help you create a Leaflet map from a photo or other static image using Zoomify. Showing Zoomify Images with Leaflet explains how to use the plug-in to create a Leaflet interactive map from a Zoomified image.
You can view lots of other interesting examples of Leaflet maps made from large static images on the Maps Mania post Microscopic Mapping.
No comments:
Post a Comment