User interface with a indoor map / floor plan

Forum|Forum|10 years ago
April 8, 2016
2 replies
6557 views

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?

Extensions

Q

qngo

1-Visitor

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

Maybe you can just add a fix image.

H

hpulkkinen

Author

1-Visitor

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.

H

hpulkkinen

Author

1-Visitor

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.

H

hpulkkinen

Author

1-Visitor

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.