2018-02-28.md

Code: How to use real map in Framer

Q: How to integrate mapbox and Framer?

https://www.mapbox.com/help/mobile-framer/

Q: How to add custom markers?

1. Use the Geojson tool to generate a JSON with marker coordinates
2. Add markers to your map with

# https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
@map.on 'load', =>
	geojson.features.forEach (marker) =>
		el = document.createElement('div')
		el.className = 'marker'

		m = new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(@map)
		@markersArr.push(el)

3. Now you have HTML elements with classes. Customize them with CSS

Bonus: Get all your markers from the DOM @map.querySelector(".marker")

Q: How can I move the map to specific location?

# https://www.mapbox.com/mapbox-gl-js/example/flyto-options/
@map.flyTo({
	center: [-74.0511692, 4.6741676]
	zoom: zoomValue,
	speed: 3.5,
});

Q: How to preload the map?

The unique way I found to preload the map in framer is move to all locations that you use before showing the prototype.

Q: How to hide mapbox footer?

.mapboxgl-control-container {
  display: none !important;
}

Q: How to add a fake location dot?

# https://www.mapbox.com/mapbox-gl-js/example/locate-user/
@dotL = document.createElement('div')
@dotL.className = 'mapboxgl-user-location-dot mapboxgl-marker'
new mapboxgl.Marker(@dotL).setLngLat([-74.0511692, 4.6741676]).addTo(@map)