User interface with a indoor map / floor plan

[hpulkkinen]

I'm going to build a user interface which shows the connected devices on the floor plan. I was initially planing to add the floor plans to Google Indoor Maps and then use the Google map widget. However, it seems that the widget is not able to show indoor maps.

Are there some good alternative ways to show indoor maps? How have you solved this issue?

[qngo]

Someone did something similar Foxon Demo​, but I don't know how.

Maybe you can just add a fix image.

[hpulkkinen]

Their demo certainly looks nice. To me it seems that it has been done by adding transparent images with illumination on top of the floor plan image. The visibility of the light spheres is then controlled with the variables of the things. This requires manual configuration for each device.

I want to use the location variables to place the things automatically on the floor map. Right now the only solution I can think of would be to generate the mashup with an extension so that the images locations depend from the thing variables. That would work out for me since our devices do not move.

[hpulkkinen]

I have now taken a look on Google maps overlays (https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple). With these it is possible to put a floor plan on top of the google map and still use all the functionality that the google maps widget already has. The results are not very pretty since the overlays always seem to be a little out of place.

The optimal solution would probably be to make a widget with the functionality of a google map but which only shows the floor plan instead of the actual map. However, I don't think we have the resources to develop that kind of widget by ourselves.

[hpulkkinen]

To give you some idea about what I am looking for, here is a screenshot from my current widget using google map with an overlay. The heatmap is also generated with the google maps.

[tsmith-4]

Looks great! Any progress on this one?

[hpulkkinen]

We have given up trying to build this kind of functionality with Mashups and are currently planing to use Leaflet (Leaflet · GitHub)​.

[anishi]

Is there any progress for using leaflet as widget of Mashup Builder?

[wposner-2]

I built a custom widget that does exactly what you're asking.  We use it as part of our real time location system solution.  The widget takes an image (indoor map) and then overlays configurable markers on the image that correspond with locations reported by the RFID system.  I also built in toggles for heat map and movement history so that you can see the historical movement pattern for an object being tracked and how much time it tends to spend in any given area on the map.  

[anishi]

Hi,

That sounds nice for me.

Did you refer something open-source UI widget or fully make from scratch?

If you don't mind, could you share with us where you referred, please?

Best regards

Akira

[wposner-2]

I built it completely from scratch.  I started with the image widget and then added in the extra JS code to overlay the location graphics based on new location data attributes I added to the image widget.