Custom Widget: Map

Tags: #<Tag:0x00007f187b5141c8> #<Tag:0x00007f187b514060>

This widget will display up to 6 markers on an OpenStreetMap map, positioned by openHAB Location or String items, with configurable colors/icons and real-time updating when the underlying items’ states change. The labels of the items will be displayed in a tooltip when clicking on a marker.

Use the widget gallery to navigate to this repository: https://github.com/ghys/habpanel-map-widget
If you’re reading this in the gallery, click the blue Go to the repository button now!
Alternatively you can type ghys/habpanel-map-widget in the address bar and click Go.

Then follow the instructions there.

8 Likes

This is just brilliant! Works perfectly, very easy to set up too.
I do have a few suggestions for added features:

  1. Automatic zoom (to a definable max level if all markers are at the same location) to fit all markers.
  2. Possibility to add location accuracy rings for the pins (I don’t know if many bindings provide the data, but the iCloud binding at least does so.
    And finally maybe change the order of lat/lon in the config.
2 Likes

I would also think, these two suggestions would be a huge benefit for the widget!

Actually wasn’t too hard - done.

You need to update both the widget in HABPanel and pull the changes from the repository; I updated the Readme in the repository with update instructions. You can open it with the “Help” button in the widget settings or the context menu (“Open Help”) in the custom widget’s list.

2 Likes

Excellent! Works perfectly on Edge and Safari. For some reason Chrome doesn’t render the circles, but for me that’s not an issue.

Mikael

Thank you for this widget, awesome work.

I would like to use your widget for traffic information prior going to work. I’ve had this working with Javascript/JQuery, but I switched to openhad/habpanel, and thats Angular. And thats very new to me. So, if possible could you implement some features?

  • Traffic on map, with javascript: google.maps.TrafficLayer();
  • Night theme, so it blends better into dark colors of habpanel. With javascript I did it with stylings.

Thank you in advance!

A quick question, if you don’t mind. The widget works wonderfully, but as my markers move around, sometimes they are very near the edges and sometimes far from them (I managed to add a bit of padding, so they’re not clipped). I’d like to set some options for the map, namely zoomSnap and maybe restrict scrolling and/or zooming the map manually, but the code for the widget is so different (at least for someone, who can’t read it properly) that I have no clue how to set map properties.

Mikael

Never mind, I have created my own widget with Google Maps and traffic layer.

1 Like

If I’m not mistaken, the newest version should make sure the markers are always shown?

Apprently setting zoomSnap is not supported in angular-leaflet:

To prevent zooming and dragging there’s the defaults attribute:

It’s bound to vm.defaults in the template which is not defined :roll_eyes: but you can add it in map.controller.js around line 15 or so:

vm.defaults = { dragging: false, zoomControl: false }

Hi, I’m new to openhab, the map widget is exactly what I’m
looking for, but it is not working. Maybe someone can help me. I’m running openhab 2.2.0.010.
Installed it with the green import widget button. I can add and place the widget, go to the edit menu but after save and run in the habpanel. i only see the blue square and no map. :frowning: .
Any idea what i did wrong?
Thank’s Kai

same with me, Kai.
Have you been able to solve it?

EDIT: Stupid me :wink:
I should have read thoroughly the installation process and missed this part.

cd /etc/openhab/html
git clone https://github.com/ghys/habpanel-map-widget

Sorry for that.

Works almost perfectly.

Is there an option to prevent the zoom factor to go back to the initial one?
If I zoom in, it always zooms back.

No one, who knows how to keep the zoom factor after I zoomed in?

It automatically zooms to fit all markers. I’m sure you could edit the widget code to eliminate that functionality.

For the first start it makes sense.
But I should be able to change the zoom factor in habpanel. But it’s always switching back.

With another widget using google maps this is no problem.

The markers can also move around (e.g. track location of phones) and the widget needs to accommodate for that.
That being said, I think it would be beneficial to have an option for the behavior in the widget’s settings. Way above my skill set though.

Hopefully you will add your Google version to the gallery?

That’s what I do.
Tracking two phones and my car (beside the fixed home location).

If I would like To take a closer look on one of them, the widget will switch back to fit all into the view.

By the way, google recently changed the way you can use the api.
Now you need to register and provide a credit card or such. If you exceed the standard usage you will need to pay for it.

Hi again,

First of all, adding the defaults worked perfectly, took a while to implement the changes, haven’t had the time to play with openhab lately. So now I have a nice map that automatically zooms to fit the markers and doesn’t allow zooming or dragging, which is perfect!
I did an implementation where busses that are coming to my bus stop are shown on the map and it works nicely. There’s one tiny issue though; the location resets (my rule sets it to NULL in that case) and I’d like to remove the marker from the map in that case. I see

if (isNaN(lat) || isNaN(lng)) {

in the controller, but again have no idea what to do to remove the marker. (Tried a simple map.removeLayer(marker), but that didn’t work obviously).

Thanks again,
Mikael

Replying to my own post after almost a week of trying to learn at least some of the very basic things of angular (and JS in general really!). If anyone else is interested in the funtionality, changing

if (isNaN(lat) || isNaN(lng)) {
    continue;
}

to

if (isNaN(lat) || isNaN(lng)) {
    delete(vm.markers[item.name]);
    continue;
}

in map.controller.js removes a marker that has a state of NULL from the map.

2 Likes