Playground

Playground

Edit the map document and the map redraws as you type.

Start from an example Start from an example… Earthquakes, sized by magnitudeA story map: a week of earthquakesCities written in the documentWorld cities with a legendFind the mistakes Display a mapDisplay a satellite mapDisplay a non-interactive mapChange the default position for attributionDisplay a map with MLT Set pitch and bearingFit a map to a bounding boxFit to the bounds of a LineStringFly to a location based on scroll positionHash routingRender world copiesRestrict map panning to an areaSet center point above ground Display map navigation controlsLocate the userCooperative gesturesDisable map rotationDisable scroll zoomView a fullscreen map Add a vector tile sourceAdd a GeoJSON lineAdd a GeoJSON polygonDraw GeoJSON pointsAdd multiple geometries from one GeoJSON sourceDisplay line that crosses 180th meridianAdd a raster tile sourceAdd a WMS sourceAdd a COG raster sourceAdd a videoAdd live realtime dataUpdate a feature in realtime Add an icon to the mapDisplay a remote SVG symbolElevate symbols above the terrainUse a fallback imageChange a layer's color with buttonsAdd a new layer below labelsAdd a pattern to a polygonCreate a heatmap layerCreate and style clustersDisplay and style rich text labelsStyle labels with web fontsStyle labels with font facesChange the case of labelsStyle labels with local fontsVariable label placementVariable label placement with offset Style lines with a data-driven propertyChange building color based on zoom levelCreate a gradient dashed line using an expressionCreate a gradient line using an expressionFilter layer symbols using global stateFilter symbols by toggling a listVisualize population densityCreate a time slider 3D terrainAdd a hillshade layerAdd a color relief layerAdd a multidirectional hillshade layerDisplay a hybrid satellite map with terrain elevationSky, fog and terrainDisplay buildings in 3DExtrude polygons for 3D indoor mappingFill-extrusion rounded cornersDisplay a globe with a vector mapDisplay a globe with an atmosphereCreate a heatmap layer on a globe with terrain elevationDisplay a globe with a fill extrusion layer Add a default markerAdd custom icons with markersDisplay a popupDisplay a popup on clickDisplay a popup on hoverAttach a popup to a marker instance Use locally generated ideographs Create a hover effectCenter the map on a clicked symbolShow polygon information on click PMTiles source and protocol FlatGeobuf sourceGeoParquet source CrosshatchBlueprint Share Download

Map document

Loading… Moves to the first problem and opens the list of problems. Bigger map

Loading the editor…

Tab indents. To leave the editor, press Esc then Tab. Ctrl+Space lists the keys you can write here.

How the playground works

The editor holds a map document: the same YAML you would save as map.yaml next to an index.html. The map redraws a moment after you stop typing, and keeps the view you panned to unless you change center, zoom or another part of the view yourself.

• Mistakes are underlined where you make them. Tap or hover one to read what's wrong; when it's a spelling, Change to … fixes it. While the document has an error, the map keeps showing your last working version.
• Suggestions: start a new line, or press Ctrl+Space, for the keys and values that fit there, each with its description.
• Story maps work here too: pick A story map: a week of earthquakes from the examples and scroll the preview to move through its chapters. On a phone, Preview the story opens it full height. Download saves it with a page that uses <ml-scrollytelling>.
• Share puts the whole document in the link, after the #, so nothing is stored on a server. Anyone who opens it sees your map and can change their copy.
• Download saves my-map.zip: the page, the document and a README that says how to open them with a local web server and publish them.
• Data comes from URLs on sites that allow it (see Loading data), or written into the document as GeoJSON.

To make the same map in your own page, follow the quick start. Every key is in the YAML reference.