Atlaslog
Atlaslog / Examples / OpenLayers
OpenLayers · 320 examples

OpenLayers examples

OpenLayers is the reference client for standard map services: WMS, WMTS, WFS, vector tiles and arbitrary projections. Use it when you need OGC compatibility or precise CRS control.

Chinese docs & full catalogAll librariesTutorialsAPI
Accessible scene diagramAccessible Animated Gif scene diagramAnimated Gif Animation demo screenshotAnimation Arcgis Image demo screenshotArcgis Image Arcgis Tiled demo screenshotArcgis Tiled Area Measure scene diagramArea Measure Attribution Note demo screenshotAttribution Note Attributions demo screenshotAttributions Azure Maps demo screenshotAzure Maps Basic demo screenshotBasic Bing Maps demo screenshotBing Maps Box Select scene diagramBox Select Box Selection demo screenshotBox Selection Button Title demo screenshotButton Title Canvas Gradient Pattern scene diagramCanvas Gradient Pattern Canvas Tiles demo screenshotCanvas Tiles Canvas Tiles Tms demo screenshotCanvas Tiles Tms Cartodb demo screenshotCartodb Center demo screenshotCenter Chaikin demo screenshotChaikin Cluster demo screenshotCluster Cluster Graded demo screenshotCluster Graded Clusters Dynamic demo screenshotClusters Dynamic Cog demo screenshotCog Cog Blob demo screenshotCog Blob Cog Colors demo screenshotCog Colors Cog Custom Client demo screenshotCog Custom Client Cog Math demo screenshotCog Math Cog Math Multisource demo screenshotCog Math Multisource Cog Modeltransformation demo screenshotCog Modeltransformation Cog Overviews demo screenshotCog Overviews Cog Projection scene diagramCog Projection Cog Pyramid demo screenshotCog Pyramid Cog Stretch scene diagramCog Stretch Cog Style scene diagramCog Style Color Manipulation scene diagramColor Manipulation Contour Interpolation demo screenshotContour Interpolation Coordinate Convert demo screenshotCoordinate Convert Custom Circle Render demo screenshotCustom Circle Render Custom Control demo screenshotCustom Control Custom Controls demo screenshotCustom Controls Custom Hit Detection Renderer demo screenshotCustom Hit Detection Renderer Custom Interactions demo screenshotCustom Interactions D3 demo screenshotD3 Dashed Line demo screenshotDashed Line Data Tiles demo screenshotData Tiles Declutter Group demo screenshotDeclutter Group Delete Feature scene diagramDelete Feature Device Orientation demo screenshotDevice Orientation Double Click Drag Zoom scene diagramDouble Click Drag Zoom Drag and Drop demo screenshotDrag and Drop Drag and Drop Custom Kmz demo screenshotDrag and Drop Custom Kmz Drag and Drop Custom Mvt demo screenshotDrag and Drop Custom Mvt Drag and Drop Image Vector demo screenshotDrag and Drop Image Vector Drag Rotate and Zoom demo screenshotDrag Rotate and Zoom Drag Rotate Zoom demo screenshotDrag Rotate Zoom Drag Zoom demo screenshotDrag Zoom Draw demo screenshotDraw Draw and Modify Features demo screenshotDraw and Modify Features Draw and Modify Geodesic demo screenshotDraw and Modify Geodesic Draw Circle demo screenshotDraw Circle Draw Features demo screenshotDraw Features Draw Features Style demo screenshotDraw Features Style Draw Freehand demo screenshotDraw Freehand Draw Modify Trace Snap demo screenshotDraw Modify Trace Snap Draw Shapes demo screenshotDraw Shapes Dynamic Data demo screenshotDynamic Data Earthquake Clusters demo screenshotEarthquake Clusters Earthquake Custom Symbol demo screenshotEarthquake Custom Symbol Edit Geographic demo screenshotEdit Geographic Epsg 4326 demo screenshotEpsg 4326 Epsg4326 View demo screenshotEpsg4326 View Equal Earth GeoJSON scene diagramEqual Earth GeoJSON Es2015 Custom Element demo screenshotEs2015 Custom Element Es2015 Custom Element A11y demo screenshotEs2015 Custom Element A11y Export Map demo screenshotExport Map Export Pdf demo screenshotExport Pdf Extent Constrained demo screenshotExtent Constrained Extent Fit demo screenshotExtent Fit Extent Interaction demo screenshotExtent Interaction External Map demo screenshotExternal Map Feature Animation demo screenshotFeature Animation Feature Events demo screenshotFeature Events Feature Move Animation demo screenshotFeature Move Animation Filter Points Webgl demo screenshotFilter Points Webgl Filter Webgl Line demo screenshotFilter Webgl Line Flight Animation scene diagramFlight Animation Fly to demo screenshotFly to Fractal demo screenshotFractal Freehand Draw scene diagramFreehand Draw Fullscreen demo screenshotFullscreen Full Screen demo screenshotFull Screen Full Screen Drag Rotate and Zoom demo screenshotFull Screen Drag Rotate and Zoom Full Screen Source demo screenshotFull Screen Source Geographic scene diagramGeographic GeoJSON demo screenshotGeoJSON GeoJSON Layer demo screenshotGeoJSON Layer GeoJSON Vt demo screenshotGeoJSON Vt Geolocation demo screenshotGeolocation Geolocation Orientation scene diagramGeolocation Orientation Geotiff Per Band Stats demo screenshotGeotiff Per Band Stats Geotiff Reprojection demo screenshotGeotiff Reprojection Geozarr demo screenshotGeozarr Geozarr Datacube demo screenshotGeozarr Datacube Geozarr Dimensions demo screenshotGeozarr Dimensions Geozarr Groups demo screenshotGeozarr Groups Geozarr Sparse demo screenshotGeozarr Sparse Geozarr Storytelling demo screenshotGeozarr Storytelling Geozarr Stretch scene diagramGeozarr Stretch Getfeatureinfo Image demo screenshotGetfeatureinfo Image Getfeatureinfo Layers demo screenshotGetfeatureinfo Layers Getfeatureinfo Tile demo screenshotGetfeatureinfo Tile Google demo screenshotGoogle Gpx scene diagramGpx Graticule demo screenshotGraticule Heatmap demo screenshotHeatmap Heatmap Earthquakes scene diagramHeatmap Earthquakes Heatmap Gradient demo screenshotHeatmap Gradient Heatmap Weight demo screenshotHeatmap Weight Hitdetect Vector demo screenshotHitdetect Vector Hit Tolerance scene diagramHit Tolerance Hover Tooltip scene diagramHover Tooltip Icon demo screenshotIcon Icon Canvas scene diagramIcon Canvas Icon Color demo screenshotIcon Color Icon Negative demo screenshotIcon Negative Icon Scale demo screenshotIcon Scale Icon Sprite Webgl demo screenshotIcon Sprite Webgl Icon Width demo screenshotIcon Width Igc scene diagramIgc Iiif demo screenshotIiif Image Filter demo screenshotImage Filter Image Load Events demo screenshotImage Load Events Image Vector Layer demo screenshotImage Vector Layer Immediate Geographic scene diagramImmediate Geographic Jsts demo screenshotJsts Keyboard Pan demo screenshotKeyboard Pan Kml demo screenshotKml Kml Earthquakes demo screenshotKml Earthquakes Kml Timezones demo screenshotKml Timezones Label Declutter scene diagramLabel Declutter Layer Clipping demo screenshotLayer Clipping Layer Clipping Vector demo screenshotLayer Clipping Vector Layer Extent demo screenshotLayer Extent Layer Group demo screenshotLayer Group Layer Opacity demo screenshotLayer Opacity Layer Spy scene diagramLayer Spy Layer Swipe demo screenshotLayer Swipe Layer Switcher demo screenshotLayer Switcher Layer Z Index demo screenshotLayer Z Index Layer Zoom Limits demo screenshotLayer Zoom Limits Lazy Source demo screenshotLazy Source Line Arrows demo screenshotLine Arrows Line Styles demo screenshotLine Styles Link demo screenshotLink Load Events demo screenshotLoad Events Localized Openstreetmap demo screenshotLocalized Openstreetmap Magnify demo screenshotMagnify Mapbox Layer demo screenshotMapbox Layer Mapbox Style demo screenshotMapbox Style Mapbox Vector Layer demo screenshotMapbox Vector Layer Mapbox Vector Tiles demo screenshotMapbox Vector Tiles Mapbox Vector Tiles Advanced demo screenshotMapbox Vector Tiles Advanced Mapguide Untiled demo screenshotMapguide Untiled Marker Pulse scene diagramMarker Pulse Measure demo screenshotMeasure Measure Style demo screenshotMeasure Style Min Max Resolution demo screenshotMin Max Resolution Min Zoom demo screenshotMin Zoom Mobile Full Screen demo screenshotMobile Full Screen Modify Features demo screenshotModify Features Modify Icon scene diagramModify Icon Modify Interaction demo screenshotModify Interaction Modify Scale and Rotate demo screenshotModify Scale and Rotate Modify Test demo screenshotModify Test Mouse Position demo screenshotMouse Position Moveend demo screenshotMoveend Multi Layer demo screenshotMulti Layer Multiple Cogs demo screenshotMultiple Cogs Navigation Controls demo screenshotNavigation Controls Numpytile demo screenshotNumpytile Offscreen Canvas demo screenshotOffscreen Canvas Ogc Map Tiles demo screenshotOgc Map Tiles Ogc Map Tiles Geographic demo screenshotOgc Map Tiles Geographic Ogc Vector Tiles demo screenshotOgc Vector Tiles Ogc Vector Tiles Geographic demo screenshotOgc Vector Tiles Geographic Osm Vector Tiles demo screenshotOsm Vector Tiles Overlay demo screenshotOverlay Overviewmap demo screenshotOverviewmap Overview Map demo screenshotOverview Map Overviewmap Custom demo screenshotOverviewmap Custom Page Scroll demo screenshotPage Scroll Pan Animation demo screenshotPan Animation Permalink demo screenshotPermalink Pinch Zoom demo screenshotPinch Zoom Pmtiles Elevation demo screenshotPmtiles Elevation Pmtiles Image demo screenshotPmtiles Image Polygon Pattern demo screenshotPolygon Pattern Polygon Styles demo screenshotPolygon Styles Populated Places demo screenshotPopulated Places Popup demo screenshotPopup Preload demo screenshotPreload Print to Scale scene diagramPrint to Scale Projection and Scale demo screenshotProjection and Scale Raster demo screenshotRaster Rectangle scene diagramRectangle Region Growing demo screenshotRegion Growing Regularshape demo screenshotRegularshape Render Geometry demo screenshotRender Geometry Reprojection demo screenshotReprojection Reprojection By Code scene diagramReprojection By Code Reprojection Image scene diagramReprojection Image Reprojection Wgs84 demo screenshotReprojection Wgs84 Resolution Zoom demo screenshotResolution Zoom Reusable Source demo screenshotReusable Source Rich Text Labels scene diagramRich Text Labels Rotation demo screenshotRotation Scale Line demo screenshotScale Line Scaleline Indiana East demo screenshotScaleline Indiana East Sea Level demo screenshotSea Level Select Feature demo screenshotSelect Feature Select Features demo screenshotSelect Features Select Hover Features demo screenshotSelect Hover Features Select Multiple Features demo screenshotSelect Multiple Features Semi Transparent Layer demo screenshotSemi Transparent Layer Sentinel Hub scene diagramSentinel Hub Sentinel Hub Custom Script scene diagramSentinel Hub Custom Script Sentinel Hub Date Picker demo screenshotSentinel Hub Date Picker Shaded Relief demo screenshotShaded Relief Side By Side demo screenshotSide By Side Simple demo screenshotSimple Snap demo screenshotSnap Snap Draw scene diagramSnap Draw Sphere Mollweide demo screenshotSphere Mollweide Stac Item demo screenshotStac Item Stadia Maps demo screenshotStadia Maps Stamen demo screenshotStamen Static Attribution demo screenshotStatic Attribution Static Image demo screenshotStatic Image Street Labels demo screenshotStreet Labels Style Expressions demo screenshotStyle Expressions Style Function demo screenshotStyle Function Style Renderer demo screenshotStyle Renderer Svg Layer demo screenshotSvg Layer Synthetic Lines demo screenshotSynthetic Lines Synthetic Points demo screenshotSynthetic Points Teleport demo screenshotTeleport Tile Error demo screenshotTile Error Tile Grid demo screenshotTile Grid Tilejson demo screenshotTilejson Tile Load Events demo screenshotTile Load Events Tile Load Progress demo screenshotTile Load Progress Tile Preload demo screenshotTile Preload Tile Transition demo screenshotTile Transition Tile Transitions demo screenshotTile Transitions Tissot demo screenshotTissot Tooltip on Hover demo screenshotTooltip on Hover Topojson demo screenshotTopojson Topolis scene diagramTopolis Tracing scene diagramTracing Translate Features demo screenshotTranslate Features Turf demo screenshotTurf Two Finger Pan Scroll demo screenshotTwo Finger Pan Scroll Utfgrid demo screenshotUtfgrid Vector Esri demo screenshotVector Esri Vector Esri Edit demo screenshotVector Esri Edit Vector Label Decluttering demo screenshotVector Label Decluttering Vector Labels demo screenshotVector Labels Vector Labels Justify Text demo screenshotVector Labels Justify Text Vector Layer demo screenshotVector Layer Vector Osm scene diagramVector Osm Vector Style demo screenshotVector Style Vector Tile Info demo screenshotVector Tile Info Vector Tiles 4326 demo screenshotVector Tiles 4326 Vector Tile Selection demo screenshotVector Tile Selection Vector Wfs demo screenshotVector Wfs Vector Wfs Geographic demo screenshotVector Wfs Geographic Vector Wfs Getfeature demo screenshotVector Wfs Getfeature View Bookmark demo screenshotView Bookmark View Padding demo screenshotView Padding Webgl Draw Line demo screenshotWebgl Draw Line Webgl Layer Swipe demo screenshotWebgl Layer Swipe Webgl Points Layer demo screenshotWebgl Points Layer Webgl Sea Level demo screenshotWebgl Sea Level Webgl Shaded Relief demo screenshotWebgl Shaded Relief Webgl Tiles demo screenshotWebgl Tiles Webgl Tile Style demo screenshotWebgl Tile Style Webgl Vector Layer demo screenshotWebgl Vector Layer Webgl Vector Tiles demo screenshotWebgl Vector Tiles Wind demo screenshotWind Wind Arrows demo screenshotWind Arrows Wkb demo screenshotWkb Wkt demo screenshotWkt WMS demo screenshotWMS WMS Capabilities scene diagramWMS Capabilities WMS Custom Proj demo screenshotWMS Custom Proj WMS Custom Tilegrid 512x256 demo screenshotWMS Custom Tilegrid 512x256 WMS Getlegendgraphic demo screenshotWMS Getlegendgraphic WMS Image demo screenshotWMS Image WMS Image Custom Proj scene diagramWMS Image Custom Proj WMS Image Svg demo screenshotWMS Image Svg WMS No Proj scene diagramWMS No Proj WMS Params demo screenshotWMS Params WMS Tiled demo screenshotWMS Tiled WMS Tiled Wrap 180 scene diagramWMS Tiled Wrap 180 WMS Time demo screenshotWMS Time WMTS scene diagramWMTS WMTS Capabilities scene diagramWMTS Capabilities WMTS Dimensions scene diagramWMTS Dimensions WMTS Hidpi demo screenshotWMTS Hidpi WMTS Ign scene diagramWMTS Ign WMTS Layer From Capabilities scene diagramWMTS Layer From Capabilities XYZ demo screenshotXYZ XYZ Esri demo screenshotXYZ Esri XYZ Retina demo screenshotXYZ Retina Zindex Order demo screenshotZindex Order Zoom Constrained demo screenshotZoom Constrained Zoomify scene diagramZoomify Zoomslider demo screenshotZoomslider Zoom Slider demo screenshotZoom Slider