Question about indoor mapping and Leaflet.js

2,561 views
Skip to first unread message

ZedsDed88

unread,
Nov 6, 2014, 10:23:35 AM11/6/14
to leafl...@googlegroups.com

Hello, I am new to javascript and indoor/outdoor mapping, and I've only been coding for a little over a year, but I got a job (working for free) as a coder for a startup company that creates indoor location and guidance systems. This has not been my first task for this company but its the first task that I feel may be a little out of my depth but I think I could probably handle it with a little help from the proagramming community!

What I need to do is create an interactive indoor location map that displays in real time the locations of various people and things on the map. It is to be part of an indoor location and tracking systems. The locations of things are gotten using static bluetooth beacons located around the building that recieve information from bluetooth tags that will be attatched to the person or thing that is being tracked.

I would like if you could clear up some things related to Leaflet.js and leaflet-indoor.

From what I have researched, it seems leaflet relies on external map providers such as OpenStreetMap or Mapbox, and uses geojson data to interact with those maps. An indoor map would be an extra layer, a geojson feature array, sitting on top of the other map layer. Leaflet/Leaflet-indoor then allows you to create the interactivity of that map.

I will probably need to have an indoor map of a building on its own, without any surrounding areas, it looks to that when using the above APIs, you have to have your indoor map sitting over a full outdoor map. If I was to create my own SVG maps with Illustrator or Inkscape, would it be possible to use Leaflet to create the interactivity of that map? Would I still have to use geojson to create the coordinate references for the walls and paths of that map? Or is there a way to only display the indoor map and remove the surrounding areas with leaflet?

I think im leaning more towards creating my own SVG maps and trying to interact with them using javascript, with or without Leaflet. I know Leaflet has a plugin for live tracking of objects using (Leaflet-realtime https://github.com/perliedman/leaflet-realtime), So it would be really great if i could incorporate this into my indoor system. As i think it just needs to be fed lat-long data for the tracking.

Thank you for any words of wisdom!

yours sincerely

Desperate programmer #2314

Rowan Winsemius

unread,
Nov 7, 2014, 5:46:13 AM11/7/14
to leafl...@googlegroups.com
Hi there,

So it sounds like you don't have much of a background with GIS/mapping stuff so I'll try to explain things simply.

You've got a few ways you could take things and it depends a bit on the what resources you have available.

Option 1. Create your own tile layers that you use as a basemap, this would essentially display your buildings & walls etc. On top that baselayer you'd then use something like leaflet-realtime. This option requires access to GIS software to make the tiles and then a GIS server to serve them into your application so Im guessing that probably a bit beyond you.

Option 2. Do your buildings and walls as you suggest in geojson. There is nothing that would stop you from doing it this way although its probably not entirely conventional. With this option rather than generating the layouts in AI or Inkscape you'd be better off using a mapping program so that things are georferenced, there is a free program called QGIS that could help you do this altough you'd have a bit to learn once you start heading down this route.

Option 3. Depending on the scale of the area you're working with leaflet does support image overlays , this would allow you to generate something in Inkscape etc and place the resulting raster image (jpg or png etc) as your baselayer. I reckon this might be your most viable option just to test out the concepts. You'll then be able to use the leaflet-realtime over the top.


THe main benefit I see from leaflet-indoor is that you can have different levels to your building, other than that I dont think its offering you too much.

Anyway I hope that helps.

Cheers
Rowan


This message is intended for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Views expressed in this message are those of the individual sender, and are not necessarily the views of their organisation.

ZedsDed88

unread,
Nov 7, 2014, 11:06:57 AM11/7/14
to leafl...@googlegroups.com
Hello Rowan, thank you for your reply,

yes, i have no experience with GIS/mapping, so at the moment i am just researching and trying to get my head around it a bit. One of the main things that i need to figure out is if it is possible to use leaflet with a different coordinate reference system that lat-long, because i will be incorporating an indoor location system (that has already been built) in this one, i have yet to see the code for the location system, but as far as ive been told it does not use lat-long coordinates. So if i could use the coordinate system of that system with leaflet that would be great, maybe something like X, Y coords on a grid, top left = 0.0 or something to that nature. I will have a much better idea of what i need when i get access to this information but for now i am just trying to research as much as possible into mapping solutions.

I have seen examples of people georeferencing images with QGIS,

http://fulcrumapp.com/blog/floor-plans-for-indoor-mapping/

So that would give me and image i could use as a map, with georeference data, so i could add markers and use the various leaflet functions with it, but like i said above, is georeferencing the only way or can i use an X, Y coord system based on the dimensions of the image alone?

I've also come across MapTiler, which can output an image as a folder with the image broken into tiles, its also gives you two html files names 'leaflet' and 'openlayer', with code that displays this map with zoom and pan in leaflet or openlayer format. MapTiler also lets you georeference the image if you want. So i thought this was a good program to start with as it gives you the basics to work with, but once again it goes back to the question of leaflets reliance on lat-long coords.

I guess im at a bit of a standstill without knowing how the location system works, but maybe if it doesnt use lat-long coords i can convert wat it does use into lat-long, so if it uses and X, Y grid maybe i can just convert each point into its associated lat-long point and use a georeferenced map.

just to clarify some of the methods,

i can use an image overlay on top of GIS server map like mapbox or OSM, the georeferencing comes from the map under the image

i can use a georeferenced image on its own, the georeferencing is added to the image by softwares such as maptiler and QGIS

once there is georeferencing, i can use any of the leaflet functions that require lat-long points


Thanks again for your help!

Rowan Winsemius

unread,
Nov 10, 2014, 12:07:02 AM11/10/14
to leafl...@googlegroups.com
Hi,

It sounds a plugin like this might be of some help to you

Without knowing what format your data from the location system will be in it's a bit hard to say which the best approach will be. But theoretically the above will give you a few options.

You're a brave man getting in to the fun world of projections and web mapping :)

Cheers
Rowan
Reply all
Reply to author
Forward
0 new messages