I have a map/architectural drawing of two floors of a huge building with a lot of rooms. Now I'd like to make an interactive slippy map using preferably Leaflet showing all the rooms and use markers/polygons showing what happens in each room and who's sitting where, etc. These markers should quite easily be editable.

Does anyone have any ideas of how to make this happen? First I was thinking about just pretending house covers the whole world and then use standard web mercator with generate_tiles.py.

Another idea is to use zoomify together with Leaflet.

The problem with both methods is that it's difficult to get right coordinates. Best would be to use some kind of a local projection.

  • 1
    You may want to take a look at this implementation that uses leaflet to browse images (demo). Nov 25 '13 at 14:37
  • 1
    I tried this and it works. Use gdal2tiles.py to make your tiles, see here and here for some good pointers. Nov 25 '13 at 16:37
  • Please add some content, your answer is only providing links.
    – artwork21
    Nov 25 '13 at 19:51

I would suggest for you to create your building map at the correct scale for a couple reasons.

  1. say you want to added geographic features in the future outside of the building extent (e.g. roads, parking lots...etc)
  2. if you represent your data as the extent of the earth than chances are your building may be warped/distorted near the poles.

Like any web mapping app. you should have your data projected in coordinate system that best fits your data extent (for your case something local would work best, e.g. State Plane...), pre-define zoom levels, give an initial center and zoom extent, set max bounding. Here is some example code using methods noted above:

var southWest = L.latLng(40.712, -74.227),
    northEast = L.latLng(40.774, -74.125),
    bounds = L.latLngBounds(southWest, northEast);

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
    center: [41.95, -74.95],
    zoom: 13
    maxBounds: bounds
  • 1
    Thanks! Can I define the zoom scale for each zoom level in Leaflet? Or is it possible to extend the levels? I think the ones predefined aren't enough.
    – oskarlin
    Dec 6 '13 at 17:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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