Maps Component & Layout

[Jessica_Smith]

Overview of Maps

Searching on maps is one of the most common use cases with Answers! Whether it’s shops, healthcare professionals, restaurants, ATMs, or jobs, the map is often the star of the show. With Theme 1.20, we have added a series of changes to support a new full-page Maps experience with a new layout.

Besides the new fullscreen look, the new layout (called vertical-full-page-map) includes interactivity between Result cards and maps pins, as well as a maps display on mobile.

https://lh6.googleusercontent.com/2n8w18Bd55XiX9eXsR9xiZsjllq8v_DEiibwfhjcyiHTGPiXFnCABFekjNcj61KKip7JDxDjQmhj41JJ7JGP8pNKpHkObxVY_ichmpOKLSuQAkcGY3HPV_Bsng8gdee7TQ_Fy5PN(image larger than 4 MB)

Upgrade Implications

We will have two Layouts - Vertical with Map and Vertical with Full Page Map. These will be different files, and styling nested under different classes.

You’re upgrading and you don’t want to change your map.

No problem! You should be able to continue to use your original map layout. Just be mindful that the older map will not be upgraded, and not have our newer features.

You’re upgrading and you want the new map.

Great! The best way to do this is to re-add the location page, with the new map partials, and delete your old one. (Alternatively, you can keep your existing files and just copy the new hbs/json into them). If you forked the card you’re using you should also re-add it – we updated the card structure a bit for incorporate it into the new layout.

Once you add the new map, you will need to restart preview (if you don’t, you will not see the map fully loading in live preview).

This feature is available in Early Access. Here’s how to use the Early Access branches of the Theme and SDK!

There was an issue with maps in IE11 that was resolved on 3/18. If you upgraded or created a new site before then, we’d recommend upgrading to the EA theme again to get the fix.

Configuration for the New Map

By default, we will include the following attributes to configure in your JSON config when you create a new vertical-full-page-map page:

"mapConfig": {

"mapProvider": "MapBox", // The name of the provider (e.g. Mapbox, Google)

"noResults": {

"displayAllResults": false // Set to FALSE to hide results on the map when a search returns no results

},

"pin": {

"default": { // The pin in its normal state

"backgroundColor": "#5387d7", // Enter a hex value or color for the pin background

"strokeColor": "#2a446b",

"labelColor": "white"

},

"hovered": { // The pin when it is hovered

"backgroundColor": "#2f4d71",

"strokeColor": "#172638",

"labelColor": "white"

},

"selected": { // The pin when it is selected by mouse click or through a card click

"backgroundColor": "#2f4d71",

"strokeColor": "#172638",

"labelColor": "white"

}

}

However, you can add the following to your JSON Config to make changes but these will not be included by default:

• enablePinClustering
  • Whether or not to cluster the pins
  • false by default
• apiKey
  • API key for the map provider
  • Null by default
• pinCluster.[default/hovered/selected].backgroundColor
  • Background color for the pin cluster
  • #2f4d71 by default
• pinCluster.[default/hovered/selected].labelColor
  • label color for the pin cluster
  • white by default
• pinCluster.[default/hovered/selected].strokeColor
  • stroke color for the pin cluster
  • #2a446b and hovered/selected: #172638 by default
• disableSearchOnMapMove
  • If the checkbox for searching when the map moves should be checked automatically
  • False by default
• providerOptions
  • A JSON pass through to the map provider: See Google Options and Mapbox Options
    • Note that if the options are not in JSON, they won’t be supported in this passthrough
  • Null by default; we recommend setting scrollToZoom
  • zoom
    • Zoom for the map
    • 14 by default
• locale
  • This will default to locale of the config experience
  • Note that if Google/Mapbox rejects the first two letters, they will fall back to English.

[Sean_Coleman]

this is a GAME CHANGER - will be super beneficial across healthcare experiences!

[Sherman_Tabor]

Clickable map pins is huge - I have several very excited healthcare teams!

[Jade_Williams]

This new feature looks incredible! I understand we are able to change the map pin colors but are we also able to change the actual color of the map? For example, I have a client who would like the map to look similar to the grayscale version they have on their site. Is this possible? Thanks for any help or clarity!

[roser]

Hi Jade,

Yes you can! This depends a bit on the map provider; you’d do it using the providerOptions configuration. For example, say I had the following map config (Mapbox lists all of their default styles here):

      "mapConfig": {
        //"enablePinClustering": true, // Cluster pins on the map that are close together. Defaults false
        "mapProvider": "MapBox", // The name of the provider (e.g. Mapbox, Google)
        "providerOptions": {
          "style": "mapbox://styles/mapbox/light-v10"
        },
      }

Here’s what my map looks like

Note that this is only settable on the vertical (not the universal section).

Thanks,
Rose

[DJ_Corbett]

Hello @roser ,

I recently implemented the new full-page map on an experience I’m building, and I am noticing two issues with the display on mobile. The below screenshots are using fake facility entities for demo purposes.

1. In the list view, there is a footer with a large amount of white space at the bottom of the page, under the Current Location section. I also see this same white space on larger screens like my monitor, but not my laptop screen.

Mobile Screen: (Safari - iPhone 11)

Computer - Large Monitor

2. On the map view, when I click a pin, only a portion of the card pops up. I cannot see the second CTA fully, and I cannot scroll at all in order to access it.
   
   

I was initially on the early access branch, but I have upgraded to the new 1.20 GA theme, created a brand new full page map and location card to accommodate any changes, and refreshed all SCSS related to the map and card.

Any insight into how I could fix these two issues would be greatly appreciated!

Best,
DJ

[roser]

Hi DJ! Check out the the “Map and Card Configuration section” in this unit:

Understanding Maps | Hitchhikers

That track outlines:

1. You might need to adjust the height of your cards based on how many CTAs you use and how they tall they are.
2. You also may need to update the height on mobile (assuming you’re using the JS snippet integration option) . This will depend on how tall your client’s header is.

Let us know if you have any questions!

[Jade_Williams]

Hi Rose, thank you for the information! Just to clarify, would you say there is any way (perhaps even through custom development work) to have the map on universal be black and white?

[Kristy_Huang]

Hi @roser,

I’m trying to set this up for my client, but the full-page map is not rendering, even though the results cards are. There’s an error for “supportedLocalesforProvider is not defined.” This client is in the UK and the Knowledge Graph entities / Answers frontend use the en_GB locale. Does the full-page map layout support GB?