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.
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
- A JSON pass through to the map provider: See Google Options and Mapbox Options
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.
