Map in multi info widget

Add-ons UIs
, ,
5

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

6

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.

7

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

8

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.

9

thanks a lot. I will try it

10

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:

image
image1606×458 102 KB

3 Likes
11

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

Capture d’écran 2022-05-01 à 18.01.09
Capture d’écran 2022-05-01 à 18.01.092642×814 111 KB

`
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: []
12

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
13

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

14

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?

16

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
17

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
```
18 
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
19

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

Thanks

20

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.

21

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

22 
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
23

That’s pretty strange. What browser are you using? Are you on a Mac or iOS device?

The initialZoom property is just supposed to be a number value. 1 means zoom out to the world view and higher numbers are higher levels of zoom-in. However, on a closer inspection, it may not work in your case. It seems that the initialZoom property is only used when a map is opened that has no markers on it (not sure what the reasoning behind that decision is). I think the only way to change that would be to put in a feature request on the UI github page.

24

It doesn’t work on safari, but it works on firefox. The problem is solved.

Thanks for your explanation for the zoom setting. I had a good understanding of the doc, but I thought it was due to the value as I didn’t know what number to enter.
Thanks a lot for your time, explanations and kindness.

Claude

25

Yeah, I remember there being some issues with this on ipads and I don’t know if it was ever resolved. You could try adding

--f7-navbar-tablet-height: 0px

and see if that helps.

If I recall @Oliver2 was working on this, he might know better what the tweaks are required for ipad/safari.