Playground
sMap examples for the web SDK, to edit and run in the page.
Your data
Points with labels and pop-ups
Clustering
10,000 stops on 100 routes
A route along the roads
A moving vehicle
Areas in 3D
Camera and interaction
3D buildings
Moving the camera
Map tools
Data layers as map tools
Responding to clicks
Layers and formats
Basemap options
A custom style
Style layers and slots
Reading a GPX file
A WMS layer
Vector tiles from PMTiles
A map as JSON
Other map tools
Leaflet: sMap as the base layer
Leaflet: Leaflet code on an sMap map
Leaflet: raster tiles
OpenLayers: sMap as a layer
OpenLayers: OpenLayers sources on sMap
Mapbox GL JS: the sMap style
Mapbox GL JS: switch an existing map to sMap
Mapbox GL JS: copy layers to sMap
deck.gl: layers on an sMap map
deck.gl: sMap vector tiles drawn by deck.gl
kepler.gl: sMap styles as map styles
ArcGIS: sMap as the basemap
ArcGIS: ArcGIS services on sMap
CesiumJS: sMap imagery on the globe
CesiumJS: CZML and GeoJSON on sMap
Formats: one KML file in two tools
Formats: one layer JSON for every SDK
QGIS: XYZ and WMTS URLs
Plan editing
Plan editor
No example matches.
A map needs a container, a colour scheme and a starting view. The centre is given as longitude, then latitude.
Kept in this browser tab only. Mapbox GL JS sends it to Mapbox.
Kept in this browser tab only. Without one, a stand-in in this page answers the plan calls. With one, the calls go to the Open Platform and are billed.
Ctrl + Enter or ⌘ + Enter runs the code.
Result
The examples run on this page without a map key. On your own website or app, give the map a map key or a map token, as described in the guide: sMap integration