What web mapping libraries are suitable for indoor maps?

I have been making my own map app using my own picture maps. Our university shifted to a new campus and I am mapping out 7 storeys (indoor), with 5 levels of zoom, from hand-drawn maps.

Leaflet is able to work with custom map tiles! I have followed this guide (omarriott.com/aux/leaflet-js-non-geographical-imagery ), just that I did some trial and error with the zoom level numbers to make sure the map showed up (following the guide exactly did not work for me).

There is a plugin called Leaflet Indoor but it relies on geoJson, which I didn't have. All I have are custom picture coordinates and my own custom Json. Anyway, leaflet is able to convert picture coordinates to lat lng (and vice versa) with the unproject and project methods.

What I did to create different floors was to use the layer control instead. Of course, it takes a while to figure out the API and make sure everything works as it should. For example, I grouped my markers for each floor and coded a way to render them nicely across different zoom levels. And loading a different floor requires a handler to load markers correctly as well.

I know that Leaflet has a ton of examples relying on geographical maps and it may leave people like us in the dark, but I want to assure you that it is possible to do it for custom maps. You need the image, tile it correctly (with correct names), load it up to a CDN like Amazon, and then use the Leaflet API.


Not knowing your use case, you might want to take a look at the D3.js library (Data Driven Documents) for data visualization. While I don't know if it supports "zoom levels" per se, but it does support zoomable maps.

Take a look at their many examples here: https://github.com/mbostock/d3/wiki/Gallery


Treat the floor plan as a geographical area. OpenLayers or Leaflet don't care whether the stuff they are displaying is indoor or outdoor - as long as you can define a coordinate system, it will be fine.