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/v2.14.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/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> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';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({container: 'map',style: 'mapbox://styles/mapbox/light-v11',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 markerconst 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 horizonrotationAlignment: 'horizon',offset: [0, -size / 2]}).setLngLat(marker.geometry.coordinates).setPopup(popup).addTo(map);}</script> </body></html>