Orient markers toward the horizon
This example adds markers aligned with the globe by setting each marker's rotationAlignment property to 'horizon'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Orient markers toward the horizon</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.29.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.29.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
.marker {
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/pin.svg');
background-size: cover;
cursor: pointer;
}
</style>
<div id="map"></div>
<script>
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'name': 'Everest',
'height': 8849
},
'geometry': {
'type': 'Point',
'coordinates': [86.925278, 27.988056]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Denali',
'height': 6194
},
'geometry': {
'type': 'Point',
'coordinates': [-151.0074, 63.0695]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Aconcagua',
'height': 6961
},
'geometry': {
'type': 'Point',
'coordinates': [-70.0112, -32.653197]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Vinson Massif',
'height': 4892
},
'geometry': {
'type': 'Point',
'coordinates': [-85.617147, -78.525483]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Kilimanjaro',
'height': 5895
},
'geometry': {
'type': 'Point',
'coordinates': [37.353333, -3.075833]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Elbrus',
'height': 5642
},
'geometry': {
'type': 'Point',
'coordinates': [42.439167, 43.355]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Puncak Jaya',
'height': 4884
},
'geometry': {
'type': 'Point',
'coordinates': [137.158333, -4.078889]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Mauna Kea',
'height': 4205
},
'geometry': {
'type': 'Point',
'coordinates': [-155.468056, 19.820667]
}
}
]
};
const map = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: 'map',
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
center: [130, 35],
zoom: 0.75
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
for (const marker of geojson.features) {
// Create a DOM element for each marker.
const el = document.createElement('div');
el.className = 'marker';
const size = marker.properties.height / 100;
el.style.width = `${size}px`;
el.style.height = `${size}px`;
// Add a popup displayed on click for each marker
const popup = new mapboxgl.Popup({ offset: 25 });
popup.setHTML(
`<h2>${marker.properties.name}</h2>${marker.properties.height}m<br/>`
);
// Add markers to the map.
new mapboxgl.Marker({
element: el,
// Point markers toward the nearest horizon
rotationAlignment: 'horizon',
offset: [0, -size / 2]
})
.setLngLat(marker.geometry.coordinates)
.setPopup(popup)
.addTo(map);
}
</script>
</body>
</html>
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
center: [130, 35],
zoom: 0.75
});
mapRef.current.on('style.load', () => {
mapRef.current.setFog({}); // Set the default atmosphere style
});
const geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
name: 'Everest',
height: 8849
},
geometry: {
type: 'Point',
coordinates: [86.925278, 27.988056]
}
},
{
type: 'Feature',
properties: {
name: 'Denali',
height: 6194
},
geometry: {
type: 'Point',
coordinates: [-151.0074, 63.0695]
}
},
{
type: 'Feature',
properties: {
name: 'Aconcagua',
height: 6961
},
geometry: {
type: 'Point',
coordinates: [-70.0112, -32.653197]
}
},
{
type: 'Feature',
properties: {
name: 'Vinson Massif',
height: 4892
},
geometry: {
type: 'Point',
coordinates: [-85.617147, -78.525483]
}
},
{
type: 'Feature',
properties: {
name: 'Kilimanjaro',
height: 5895
},
geometry: {
type: 'Point',
coordinates: [37.353333, -3.075833]
}
},
{
type: 'Feature',
properties: {
name: 'Elbrus',
height: 5642
},
geometry: {
type: 'Point',
coordinates: [42.439167, 43.355]
}
},
{
type: 'Feature',
properties: {
name: 'Puncak Jaya',
height: 4884
},
geometry: {
type: 'Point',
coordinates: [137.158333, -4.078889]
}
},
{
type: 'Feature',
properties: {
name: 'Mauna Kea',
height: 4205
},
geometry: {
type: 'Point',
coordinates: [-155.468056, 19.820667]
}
}
]
};
for (const marker of geojson.features) {
const el = document.createElement('div');
el.className = 'marker';
const size = marker.properties.height / 100;
el.style.width = `${size}px`;
el.style.height = `${size}px`;
el.style.backgroundImage =
"url('https://docs.mapbox.com/mapbox-gl-js/assets/pin.svg')";
el.style.backgroundSize = 'cover';
el.style.cursor = 'pointer';
const popup = new mapboxgl.Popup({ offset: 25 });
popup.setHTML(
`<h2>${marker.properties.name}</h2>${marker.properties.height}m<br/>`
);
new mapboxgl.Marker({
element: el,
rotationAlignment: 'horizon',
offset: [0, -size / 2]
})
.setLngLat(marker.geometry.coordinates)
.setPopup(popup)
.addTo(mapRef.current);
}
return () => mapRef.current.remove();
}, []);
return <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>;
};
export default MapboxExample;
This code snippet will not work as expected until you replace
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.Was this example helpful?