Im looking to create a map that can be interactive.

The best option that I found is leaflet, the thing is I don't find any resource explaining how to create my own map.

Im looking to create an indoor map where user can see all the building

How could I achieve that ?

  • 1
    Do you have a familiarity with HTML and JavaScript? Have you looked at Leaflet.indoor? – Barbarossa Jul 29 '15 at 15:50
  • @Barbarossa Yeah of course Im a JS developper. I looked at leaflet.indoor it kind of what Im looking to achieve but without the real world map just the mall map – Isaac Jul 29 '15 at 17:08
up vote 3 down vote accepted

You can try to use this tutorial from MapBox to get started.

You will need to create your own GeoJSON data for the stores and fountains that you want to display, and you can use this website to generate the GeoJSON file.

  • Im looking to build the indoor map of a single mall not to locate store on a real world map – Isaac Jul 29 '15 at 17:10
  • Although the example I put there is showing stores as points, however, you can create a GeoJOSN file with polygons that represent the indoor stores. And you can remove the base map so you app would look like an actual indoor map. – Vanni Zhang Jul 29 '15 at 17:15
  • Good idea @Vanni Zhang, I was looking on the net and in the leaflet documentation any tutorial that could explain me how to remove the base map and replace it preferably with a custom color or with an image ? Could you point me in a direction ? – Isaac Jul 29 '15 at 17:21
  • @Isaac, check out this example (jsfiddle.net/vannizhang/pxm4b7z3/3) that I just put together on jsfiddle, it shows a geojson file with polygons without displaying the base map. – Vanni Zhang Jul 29 '15 at 17:50

The first question is what do you mean by interactive? Do you just mean basic pan and zoom, or do you need to let users click the map to get information on features?

If you have an image of the mall layout, and want a simple interactive map image with pan and zoom, check out these two tutorials for using Leaflet as a kind of zoom image tool:

http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html http://blog.thematicmapping.org/2013/06/showing-zoomify-images-with-leaflet.html

If your image is large and you want to create a pyramid of image tiles, check out gdal2tiles.py

For more complex interactivity in a map with pixel coordinates (as opposed to real-world coordinate reference system), check out the following discussion on SO (a bit old but may get you started).

  • By interactive I mean click on a rectangle and having the store information... – Isaac Jul 29 '15 at 18:09

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.