12

I am looking for a custom mapping library but not to display an actual geographical area but to display a custom floor-plan. I have been looking for a while but most of the solutions that I found are for geographical areas.

I would like to customise a few zoom levels (probably 3 levels) and ideally I'm looking for a JavaScript, HTML5 (canvas, SVG) solution.

Does anyone have any suggestions?

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Tamas
  • 231
  • 1
  • 2
  • 5
  • 3
    Related: Are there any Indoor GIS platforms? – blah238 Oct 30 '13 at 22:21
  • 1
    Can you elaborate at all on your requirements? What kinds of features are you mapping, and what kinds of interactivity do you want to provide? Roughly how large is the facility? Does the indoor mapping functionality need to integrate with an outdoors/world map? – blah238 Oct 30 '13 at 22:42
  • Thank you for these great answers. I will look through these solutions/links that you've recommended. To give you some more information, I would like to map a seatplan (individual cubicles, offices as well as teams (i.e. engineer, product mngmt etc) onto a floor-map. Therefore there's no need to have the mapping functionality to integrate with an outdoor/world map. – Tamas Oct 31 '13 at 12:43

3 Answers3

9

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.

Kevin Lee
  • 206
  • 3
  • 4
3

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

RyanKDalton
  • 23,068
  • 17
  • 110
  • 178
2

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.

BradHards
  • 12,881
  • 2
  • 37
  • 70
  • 1
    I would say that there are aspects of mapping the indoors that are tricky with general-purpose mapping libraries, such as multiple floors, accuracy, connectivity, routing, etc. that have unique challenges. And combining all that with a general-purpose outdoors mapping library is also probably quite difficult. – blah238 Oct 30 '13 at 22:20
  • blah238: community wiki. Edit at will. – BradHards Oct 30 '13 at 23:34