Custom Widget: Map

ysc · January 25, 2018, 12:04am

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.

mikaelgu · January 25, 2018, 7:12am

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

Automatic zoom (to a definable max level if all markers are at the same location) to fit all markers.
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.

Syn · January 27, 2018, 9:10pm

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

ysc · January 28, 2018, 4:00pm

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.

mikaelgu · January 30, 2018, 2:44pm

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

bastiaan_van_h · January 30, 2018, 8:45pm

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!

mikaelgu · February 20, 2018, 11:38am

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

bastiaan_van_h · February 20, 2018, 3:22pm

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

ysc · February 23, 2018, 10:16am

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

github.com

ghys/habpanel-map-widget/blob/master/map.controller.js#L93


                            accuracyStates[accuracyItem.name] = accuracyItem.state;
                        }


                    }
                }


                var markersArray = [];
                angular.forEach(vm.markers, function (marker) {
                    markersArray.push(marker);
                });
                map.fitBounds(markersArray, { maxZoom: $scope.config.zoom || null });
    }
        });
    });
}


function activate() {
    if ($scope.config.center_lat && $scope.config.center_lng && $scope.config.zoom) {
        vm.center.lat = parseFloat($scope.config.center_lat);
        vm.center.lng = parseFloat($scope.config.center_lng);
        vm.center.zoom = parseFloat($scope.config.zoom);

Apprently setting zoomSnap is not supported in angular-leaflet:

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

github.com

tombatossals/angular-leaflet-directive/blob/master/doc/defaults-attribute.md

'defaults' Attribute Documentation
==================================

This sub-directive needs the **leaflet** main directive, so it is normally used as an attribute of the *leaflet* tag, like this:

```
<leaflet defaults="defaults"></leaflet>
```

It will define the default parameters from which we want to initialize our map. It's not used as a bi-directional attribute, so it will only apply the initial map parameters and nothing more. Let's see the possibilities.

We can define some specific parameters that apply to the Leaflet map creation. Only the parameters listed below will be passed to Leaflet on the map creation process. This is the list:

* [maxZoom](http://leafletjs.com/reference.html#map-maxzoom). *Number*. From 1 to 20.
* [minZoom](http://leafletjs.com/reference.html#map-minzoom). *Number* From 1 to 20.
* [keyboard](http://leafletjs.com/reference.html#map-keyboard). *Boolean*. Allows the use of the keyboard to navigate the map.
* [dragging](http://leafletjs.com/reference.html#map-dragging). *Boolean*. Allows to drag the mouse, or make it static.
* [zoomControl](http://leafletjs.com/reference.html#map-zoomcontrol). *Boolean*. Put the zoom control on the map or not.
* [doubleClickZoom](http://leafletjs.com/reference.html#map-doubleclickzoom). *Boolean*. Allows to zoom with the double-click mouse action.
* [scrollWheelZoom](http://leafletjs.com/reference.html#map-scrollwheelzoom). *Boolean*. Allows to zoom with the mouse wheel.

This file has been truncated. show original

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

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

kailinda15 · May 2, 2018, 10:41am

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. .
Any idea what i did wrong?
Thank’s Kai

NCO · May 19, 2018, 7:34am

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

EDIT: Stupid me
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.

NCO · May 19, 2018, 5:11pm

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.

NCO · June 17, 2018, 4:12am

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

mikaelgu · June 17, 2018, 2:58pm

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

NCO · June 18, 2018, 4:20am

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.

mikaelgu · June 18, 2018, 10:07am

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.

TommySharp · June 18, 2018, 7:30pm

Hopefully you will add your Google version to the gallery?

NCO · June 18, 2018, 8:01pm

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.

mikaelgu · June 29, 2018, 7:47am

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

mikaelgu · July 5, 2018, 8:23am

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.