Add styles made with Mapbox Studio using styleLayer

Examples

Animation Animate a marker along line Animating flight paths Centering markers Draw & animate a line on a map Marker movement Rotating and controllable marker

Features Using CoffeeScript to make a map Line crossing the date line L.mapbox.simplestyle with L.geoJson Distance between two markers Imported data with custom tooltips Polylines Show drawn polygon area

Marker clustering Filtering marker cluster groups Leaflet Markercluster Listing markers in clusters Clusters with custom cluster icons Clusters with custom polygon appearance Multiple differently styled clusters Markercluster with Mapbox marker data

Turf GIS Turf Concave Hull Turf Convex Hull

Geocoding Open geocoder control by default Geocoding with autocomplete Query the Geocoder control results in code Add geocoding Use geocoder to set map position

Layers Multiple choropleth maps Combining layers Custom tooltip Cycling through overlays Disable UTFGrid Interaction Disable world wrapping External map layers Features from another map gridLayer and gridControl ImageOverlay with georeferenced scanned map Hawaii and Alaska Overlays Leaflet layers control Toggling layers Linking to external data Low bandwidth maps UTFGrid interactivity from multiple layers Over zoom tiles Display latitude and longitude on marker movement A simple map Add styles made with Mapbox Studio using styleLayer Swipe between layers Create layers using HTML5 canvas Toggling baselayers Creating a popup from UTFGrid data Displaying WMS layers Zoom lens

Leaflet Add styles made with Mapbox Studio to a Leaflet map Plain Leaflet API

Zoom & Pan Disable animation and inertia Disable zooming and panning Double click to zoom

Legend Custom legend Legend in a custom position Legend

Markers Centering markers Toggle marker color on click Click event in a popup Cycling through markers Create markers from HTML Draggable marker Editable table controlling marker data Marker styles using pointToLayer Features from another map Filtering markers Searching for markers Fit map to markers GeoJSON marker from GitHub Load GeoJSON from a URL Images from Mapillary Marker without GeoJSON GeoJSON from live realtime data Load GeoJSON List markers and pan to clicked items Marker movement Display marker tooltip on load Marker radius search Marker tooltips outside the map Markers as links Slideshow gallery in a marker tooltip Multiple filters on markers Filter by marker type Toggle marker categories Open popup programmatically Point in polygon Rotating and controllable marker Markers as text labels Show tooltips on hover Single marker worldCopyJump option

Plugins Arc.js Identify overlapping polygons Leaflet Draw Leaflet Fullscreen Leaflet Geodesy Leaflet Hash Heatmap from markers Leaflet Heat Leaflet Image Leaflet Label Leaflet Locate Leaflet-MiniMap Leaflet OSM Zoom bar Cycling directions Walking directions Driving directions Show drawn polygon area Static map with geo-viewport Static map from GeoJSON with geo-viewport and geojson-extent

TileMill interactivity Center and zoom to gridLayer gridLayer and gridControl Interactivity outside the map Movetip UTFGrid interactivity from multiple layers Creating a popup from UTFGrid data

Tooltips Custom tooltip styles with CSS Custom tooltip Slideshow gallery in a marker tooltip Show tooltips on hover

Format support (omnivore plugin) Searching for markers Marker radius search Custom marker styles for imported data Loading markers from CSV Styled markers from CSV data Omnivore with a custom layer GPX trackpoints and waypoints Imported data with custom tooltips KML Data TopoJSON data Well Known Text (WKT)

User interface Center and zoom to gridLayer Change zoom control location Click event in a popup Custom marker tooltips Custom marker icons Draggable marker Editable table controlling marker data Filtering markers Searching for markers Geocoding with autocomplete Query the Geocoder control results in code Add geocoding Geolocation Interactivity outside the map Toggling layers Zoom bar Listing markers in view Navigate to places on a map Distance between two markers Marker navigation from a marker menu Display marker tooltip on load Marker radius search Tabs in marker tooltips Markers at one zoom level Multiple filters on markers Using maxBounds to restrict map panning Mouse position Movetip Toggle marker categories Opacity control Pan and vertical zoom Reorder marker list based on proximity Scale control Scroll-driven navigation with markers and a narrative Show loading screen Markers as text labels Embed Soundcloud clip Swipe between layers Sync maps with antipodes Sync maps Toggling baselayers Toggling UI Video embeds in tooltips worldCopyJump option Zoom lens

Vector overlays Animate a marker along line Choropleth Connecting markers with a line Line crossing the date line Draw & animate a line on a map Draw lines between markers Mask a feature Polylines Scaled points Show loading screen Show drawn polygon area Timeline with scaled markers

Mapbox.js

API Examples Plugins

Add styles made with Mapbox Studio using styleLayer

Display a style created in Mapbox Studio

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Add styles made with Mapbox Studio using styleLayer</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
    .setView([38.97416, -95.23252], 15);

// Add tiles from the Mapbox Static API tiles endpoint
// (https://www.mapbox.com/api-documentation/maps/#retrieve-raster-tiles-from-styles)
// Tiles are 512x512 pixels and are offset by 1 zoom level
L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);
</script>

</body>
</html>

Get a free Mapbox account to create your own custom map and use it in this example.

Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.

Copy example