Examples
Styles (11)Add a default markerAdd an animated icon to the mapAdd a generated icon to the mapGenerate and add a missing icon to the mapAdd a stretchable image to the mapAdd an icon to the mapDisplay a map with a custom styleRender world copiesDisplay a satellite mapChange a map's styleDisplay a mapLayers (32)Extrude polygons for 3D indoor mappingAdd a 3D modelDisplay buildings in 3DAdjust a layer's opacityAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesChange a layer's color with buttonsCreate and style clustersAdd a custom style layerStyle circles with a data-driven propertyStyle lines with a data-driven propertyUse a fallback imageAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceDisplay and style rich text labelsStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densitySources (10)Add a canvas sourceJoin local JSON data with vector tile geometriesAdd an imageAdd live realtime dataUpdate a feature in realtimeAdd a raster tile sourceAdd a third party vector tile sourceAdd a vector tile sourceAdd a videoAdd a WMS sourceUser interaction (21)Customize camera animationsAnimate 3D buildings based on ambient soundsDisable map rotationCreate a draggable MarkerFilter symbols by text inputFilter symbols by toggling a listFilter features within map viewCreate a hover effectDisplay a non-interactive mapChange a map's languageMeasure distancesGet coordinates of the mouse pointerHighlight features containing similar dataSelect features around a clicked pointGet features under the mouse pointerRestrict map panning to an areaCreate a time sliderToggle interactionsHighlight features within a bounding boxFit to the bounds of a LineStringCreate a draggable pointCamera (12)Animate map camera around a pointAnimate a point along a routeCenter the map on a clicked symbolFit a map to a bounding boxSlowly fly to a locationFly to a locationNavigate the map with game-like controlsJump to a series of locationsPlay map locations as a slideshowOffset the vanishing point using paddingFly to a location based on scroll positionSet pitch and bearingControls and overlays (17)Animate a markerChange the default position for attributionAdd custom icons with MarkersDisable scroll zoomView a fullscreen mapLocate the userSwipe between mapsDisplay driving directionsShow drawn polygon areaAdd a geocoderAdd a marker using a place nameDisplay map navigation controlsShow polygon information on clickDisplay a popup on clickDisplay a popup on hoverDisplay a popupAttach a popup to a marker instanceGeocoder (9)Supplement forward geocoding search results from another data sourceAccept coordinates as input to a geocoderUse a custom render function with a geocoderLimit geocoder results to a named regionUse the geocoder without a mapPlace the geocoder input outside the mapUse a custom camera animation with a geocoderLocalize the geocoder to a given languageSet a point after Geocoder resultBrowser support (1)Check if Mapbox GL JS is supportedInternationalization support (2)Use locally generated ideographsAdd support for right-to-left scripts

Play map locations as a slideshow

Autoplay the locations of boroughs in New York City.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Play map locations as a slideshow</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
.map-overlay-container {
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
z-index: 1;
}
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
border-radius: 3px;
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.map-overlay h2,
.map-overlay p {
margin: 0 0 10px;
}
</style>
<div id="map"></div>
<div class="map-overlay-container">
<div class="map-overlay">
<h2 id="location-title"></h2>
<p id="location-description"></p>
<small
>Text credit:
<a target="_blank" href="http://www.nycgo.com/neighborhoods"
>nycgo.com</a
></small
>
</div>
</div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.0315, 40.6989],
maxZoom: 16,
minZoom: 9,
zoom: 9.68
});
var title = document.getElementById('location-title');
var description = document.getElementById('location-description');
var locations = [
{
'id': '2',
'title': 'The Bronx',
'description':
"This is where hip-hop was born, where the Yankees became a dynasty and where you can find New York City's leading zoo and botanical garden.",
'camera': {
center: [-73.8709, 40.8255],
zoom: 12.21,
pitch: 50
}
},
{
'id': '3',
'title': 'Brooklyn',
'description':
"No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.",
'camera': {
center: [-73.9499, 40.626],
bearing: -8.9,
zoom: 11.68
}
},
{
'id': '1',
'title': 'Manhattan',
'description':
'Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.',
'camera': {
center: [-74.007, 40.7437],
bearing: 25.3,
zoom: 11.5
}
},
{
'id': '4',
'title': 'Queens',
'description':
"Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.",
'camera': {
center: [-73.8432, 40.6923],
bearing: 36,
zoom: 11.37
}
},
{
'id': '5',
'title': 'Staten Island',
'description':
'Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.',
'camera': {
center: [-74.1991, 40.5441],
bearing: 28.4,
zoom: 11.64
}
},
{
'title': 'Boroughs of new york',
'description':
'New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.',
'camera': {
center: [-74.0315, 40.6989],
zoom: 9.68,
bearing: 0,
pitch: 0
}
}
];
function highlightBorough(code) {
// Only show the polygon feature that cooresponds to `borocode` in the data
map.setFilter('highlight', ['==', 'borocode', code]);
}
function playback(index) {
title.textContent = locations[index].title;
description.textContent = locations[index].description;
highlightBorough(locations[index].id ? locations[index].id : '');
// Animate the map position based on camera properties
map.flyTo(locations[index].camera);
map.once('moveend', function() {
// Duration the slide is on screen after interaction
window.setTimeout(function() {
// Increment index
index = index + 1 === locations.length ? 0 : index + 1;
playback(index);
}, 3000); // After callback, show the location for 3 seconds.
});
}
// Display the last title/description first
title.textContent = locations[locations.length - 1].title;
description.textContent = locations[locations.length - 1].description;
map.on('load', function() {
map.addSource('boroughs', {
'type': 'vector',
'url': 'mapbox://mapbox.8ibmsn6u'
});
map.addLayer(
{
'id': 'highlight',
'type': 'fill',
'source': 'boroughs',
'source-layer': 'original',
'paint': {
'fill-color': '#fd6b50',
'fill-opacity': 0.25
},
'filter': ['==', 'borocode', '']
},
'settlement-subdivision-label'
); // Place polygon under the neighborhood labels.
// Start the playback animation for each borough
playback(0);
});
</script>
</body>
</html>
Was this page helpful?