OpenLayers Examples

22

An enterprise-grade GIS library with advanced projections and formats. All examples use MapTiler Cloud tiles.

mapMap Display & Interaction

Satellite aerial view of the Eiffel Tower and central Paris as an OpenLayers raster tile layer.

Satellite Basemap with OpenLayersDisplay MapTiler satellite imagery as a raster tile layer in OpenLayers.

Paris map configured with custom zoom, pan, and rotation interactions in OpenLayers.

Configure Interactions in OpenLayersConfigure zoom, pan, and rotation interactions on an ol.Map using OpenLayers interaction defaults.

OpenLayers map centered on Paris, initialized with MapTiler vector tiles via ol-mapbox-style.

Initialize an OpenLayers MapCreate an ol.Map instance with MapTiler vector tiles using ol-mapbox-style and navigation controls.

Paris map with Streets, Outdoor, and Topo buttons for switching MapTiler vector styles.

Switch Vector Styles in OpenLayersDynamically switch between MapTiler vector tile styles using ol-mapbox-style in OpenLayers.

Non-interactive static map image of Berlin generated with the MapTiler Static Maps API.

Static Map Image with OpenLayersDisplay a non-interactive map image using the MapTiler Static Maps API alongside an interactive OpenLayers map.

pin_dropMarkers, Annotations & Overlays

Custom Marker Icons with OpenLayersStyle point features with custom icons using ol.style.Icon with SVG or PNG sources.

Paris map divided into four colored choropleth zones using an OpenLayers style function.

Choropleth Map with OpenLayersCreate a data-driven choropleth map using a style function to color polygons based on property values.

Paris map with two red LineString features branching from the Eiffel Tower area.

LineString Features in OpenLayersAdd a styled line to an OpenLayers map using a vector source with ol.geom.LineString geometry.

Paris map with a filled red polygon area rendered using OpenLayers vector styling.

Polygon Features in OpenLayersRender a styled polygon area using a vector source with ol.geom.Polygon and custom fill/stroke styles.

Paris map with two red circular OpenLayers markers and popups near the Eiffel Tower.

Add Markers and Popups in OpenLayersPlace point features on a vector layer and display popups with ol.Overlay on click in OpenLayers.

Paris region map with markers grouped into numbered clusters using ol.source.Cluster.

Point Clustering with OpenLayersGroup nearby point features into clusters using ol.source.Cluster with dynamic styling based on cluster size.

Paris map with circles of varying color and size styled by data property in OpenLayers.

Data-Driven Styling with OpenLayersStyle vector features dynamically based on data properties using OpenLayers style functions.

searchGeocoding & Search

Western Europe map with a Search a Place box for forward geocoding in OpenLayers.

Address Search with OpenLayersSearch for places using the MapTiler Geocoding API and display results on an OpenLayers map.

Paris map used to demonstrate click-to-reverse-geocode lookups with OpenLayers.

Reverse Geocoding with OpenLayersClick anywhere on an OpenLayers map to get the address at that location using the MapTiler Reverse Geocoding API.

routeRouting & Navigation

Paris map with a driving route traced along the Seine using the OSRM API and OpenLayers.

Display a Route with OpenLayersDisplay a driving route between two points using the OSRM routing API rendered as a vector feature on an OpenLayers map.

my_locationLocation & Real-Time

Berlin map with a red square geofence boundary and a Click the Map control in OpenLayers.

Geofencing with OpenLayersDefine a polygon boundary in OpenLayers and check whether a clicked point falls inside or outside the geofence.

World map used to demonstrate the browser Geolocation API in OpenLayers.

Geolocation with OpenLayersTrack and display the user's current position as a point feature on an OpenLayers map using the browser Geolocation API.

insightsAnalytics & Advanced

Paris map ready for point, line, and polygon drawing with ol.interaction.Draw.

Draw Interaction in OpenLayersLet users draw points, lines, and polygons on the map using ol.interaction.Draw with a vector source.

Paris map with an Export PNG button for saving the OpenLayers canvas as an image.

Export Map as PNG with OpenLayersCapture the current OpenLayers map view as a downloadable PNG image using the canvas export API.

Paris map with a green-toned heatmap layer visualizing point density in OpenLayers.

Heatmap Layer with OpenLayersVisualize point density using ol.layer.Heatmap with weighted features on a MapTiler basemap.

Paris map with a teal GeoJSON polygon feature loaded near the Louvre in OpenLayers.

Load GeoJSON in OpenLayersFetch and display GeoJSON features on an OpenLayers map using ol.format.GeoJSON and a styled vector layer.

Paris store locator with a sidebar list of shops and orange map markers in OpenLayers.

Store Locator with OpenLayersBuild a store locator with a sidebar list, point features, and popup overlays using OpenLayers.

Compare Libraries Official Docs

auto_awesome

Build maps using OpenLayers with AI

Install the OpenLayers skill in your IDE and let AI write the code for you.

auto_awesomeGet skills keyGet a free API key

All examples use MapTiler maps and require a free API key.