Map in multi info widget

Hi,

I am a newbie in openhab. This is a real fantastic platform with a unbelievable fantastic work done.

I would like to have a page providing car informations and location of it with a map. Additional perfect information would be to have the way the car used when moving on the same map.

May I kindly ask a question?

Does this type of widget exist? Is yes may I kindly ask for a link or if it doesn’t exist, is it possible to build one? If yes may I have some help? if not why?

I tried to build a page but map is not an option. Maybe I have to use yaml, but I don’t know this language at all.

Thanks in advance if you can help me.

Kind regards

First of all, you need a Location Item that holds the lat/lon of your car.

When you add the page, choose “Map View”.

Then add your car as a “Marker”.

The position of the “marker” will change on the map when ever the Item’s state changes. So ho well it follows the car as it moves will depend on how often the Item updates with the car’s position.

Thanks a lot for your kind answer and your help. I already did it and it seems to work perfectly. Sorry if I explained my need in a bad way. What I would like to have is a page with the image of the car for example, some status like if the doors are opened or closed, the windows as well and also the mileage that I can make with the remaining volume of gas.
I already build a page (see the image)


with some information and I would like to complete it with a map that localize where the car is just close to the car image.

Thanks again for your help

I don’t think you can embed a map page as a widget on a layout page.

Is there any other way to add a map in a page layout?

I was asking, first, if we can find somewhere on internet a widget code including a mag.

Thanks again and again

Not easily no. The map feature is built-in to the map page type and not one of the modular components that can be added to pages.

The simplest solution here is probably to use the tabbed page template. That’s a quick and easy way to organize multiple pages. You crate one map page and one general info page and then put them both on the tabbed page.

Thanks Justin. I already did it, but it doesn’t meet graphically my expectations. I was asking for a widget because you can add a widget in page layout, but I don’t know how you build a widget. Where can I find a good and simple tuto?

Godd night

You can construct a new widget using the built in components but a map is not among those components. So you’ll have to get on GitHub and figure out how to create an “oh-map” component using the F7 and Vue underlying framework. Then you’ll need to submit that as a PR so it becomes a part of OH.

thanks a lot. I will try it

There is no built-in map component for widgets, but it occurred to me that there is a kind of ugly workaround we can use for this.

  1. Create a map page that represents the map you want with all the markers and settings.
  2. Switch to the code tab of that page and add the following in the config section of the page:
  style:
    --f7-navbar-height: 0px
    --f7-navbar-font-size: 0px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-link-color: transparent
    --f7-navbar-text-color: transparent

This gets rid of the default OH navbar at the top of the page.

  1. On your car information page add an oh-webframe-card and set the Source URL property to /page/ID-of-your-map-page. Make sure this is the unique ID (something like page_c8ea3e137a if you haven’t changed it from the autogenerated value) and not the human readable page label.

This is less than ideal because it double loads an OH page, but the overhead isn’t too bad even on mobile devices. And you can get a result like this:

1 Like

Hi JustinG,

Sorry for this late answer. I followed your instructions and it works except for the menu. I don’t know exactly where to put the line you provided. Please find a photo of the result and the code I have for the map page. The menu is still on the top

Thanks a lot for your help and kindness

C

`
component: oh-map-page
config:
label: Localisation BMW
tileLayerProvider: OpenStreetMap.Mapnik
markers:
- component: oh-map-marker
config:
label: position
item: BMW_GPSCoordinates
style:
–f7-navbar-height: 0px
–f7-navbar-font-size: 0px
–f7-navbar-bg-color: transparent
–f7-navbar-border-color: transparent
–f7-navbar-link-color: transparent
–f7-navbar-text-color: transparent
slots:
default: []
markers:

  • component: oh-map-marker
    config:
    label: position BMW
    item: BMW_GPSCoordinates
    slots:
    default: []

All of the style settings need to go under the config for the map page, not any of the map components.

component: oh-map-page
config:
  label: Localisation BMW
  tileLayerProvider: OpenStreetMap.Mapnik
  style:
    –f7-navbar-height: 0px
    –f7-navbar-font-size: 0px
    –f7-navbar-bg-color: transparent
    –f7-navbar-border-color: transparent
    –f7-navbar-link-color: transparent
    –f7-navbar-text-color: transparent
markers:
  - component: oh-map-marker
    config:
      label: position
      item: BMW_GPSCoordinates

Thanks for your quick answer.

I did it and I got the same image with the menu. May I ask you something else? I get a view with a max zoom. Is it possible to have less than the max?

Thanks again

Yep, check out the reference doc for the map page.

Can you post the full code you tried with the style settings in the page config?

component: oh-map-page
config:
label: Localisation BMW
tileLayerProvider: OpenStreetMap.Mapnik
style:
–f7-navbar-height: 0px
–f7-navbar-font-size: 0px
–f7-navbar-bg-color: transparent
–f7-navbar-border-color: transparent
–f7-navbar-link-color: transparent
–f7-navbar-text-color: transparent
markers:

  • component: oh-map-marker
    config:
    label: position
    item: BMW_GPSCoordinates

In yaml the indentation is a critical part of the format. With just the regular paste, the indentation is not preserved. Can you please post your code using code fences (that will render the formatted code blocks like you see in other posts).

```
your code goes here
```
component: oh-map-page
config:
  label: Localisation BMW
  tileLayerProvider: OpenStreetMap.Mapnik
  style:
    –f7-navbar-height: 0px
    –f7-navbar-font-size: 0px
    –f7-navbar-bg-color: transparent
    –f7-navbar-border-color: transparent
    –f7-navbar-link-color: transparent
    –f7-navbar-text-color: transparent
markers:
  - component: oh-map-marker
    config:
      label: position
      item: BMW420_GPSCoordinates

sorry for the mistake. I hope that it is correct.

Thanks

No worries. That now makes it much easier to spot the mistake. Somewhere along the way, in our various moving code back and forth something auto-formatted the -- into one long em-dash in front of the f7 style variables. In css, variables like these are preceded by 2 regular dashes, not just one. My original post:

Your current code:

Note how your code has just one dash and it is longer than either of the dashes in my code. I think if you just replace the em-dash in front of each of variables with the double regular dash, this will start working for you.

Hi JustinG,

I did it and I got the same page.

You will find below the result.

In fact when I turn the page in run mode, it seems that the part with the map starts without the menu and in one instant it comes back to the map with the menu. This is less than one second.

Thanks again and again for your help.

I checked the zoom menu of a map view. It must be a text. What is that text?

Kind regards