+
+
+ {{ shortdesc }}
+Example of an accessible map.
-This page's map element has its tabindex attribute set to "0", that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the map element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.
-See the accessible.js source to see how this is done.
-Demonstrates animated pan, zoom, and rotation.
-See the animation.js source to see how this is done.
-Example of a tiled ArcGIS layer.
-See the arcgis-tiled.js source to see how this is done.
-Example of a attributions visibily change on map resize, to collapse them on small maps.
-See the attributions.js source to see how this is done.
-Demonstrates two-way binding of HTML input elements to OpenLayers objects.
-See the bind-input.js source to see how this is done.
- - -Example of a Bing Maps layer.
-When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol.source.BingMaps.
See the bing-maps.js source to see how this is done.
-Using a DragBox interaction to select features.
-This example shows how to use a DragBox interaction to select features. Selected features are added
- to the feature overlay of a select interaction (ol.interaction.Select) for highlighting.
Use SHIFT+drag to draw boxes.
See the box-selection.js source to see how this is done.
-Example of brightness/contrast control on the client (WebGL only).
-See the brightness-contrast.js source to see how this is done.
-- This example shows how to customize the buttons tooltips with - Bootstrap. -
-- See the button-title.js source to see how this is done. -
-Renders tiles with coordinates for debugging.
-The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).
-See the canvas-tiles.js source to see how this is done.
-This example demonstrates how a map's view can be
- adjusted so a geometry or coordinate is positioned at a specific
- pixel location. The map above has top, right, bottom, and left
- padding applied inside the viewport. The view's fitGeometry method
- is used to fit a geometry in the view with the same padding. The
- view's centerOn method is used to position a coordinate (Lausanne)
- at a specific pixel location (the center of the black box).
Use Alt+Shift+drag to rotate the map.
See the center.js source to see how this is done.
-Example of using ol.Cluster.
See the cluster.js source to see how this is done.
-This example shows how to create custom controls.
-- This example creates a "rotate to north" button. - See the custom-controls.js - source to see how this is done. -
-Example of using ol3 and d3 together.
-The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.
See the d3.js source to see how this is done.
-α :
β :
γ :
heading :
Listen to DeviceOrientation events
-See the device-orientation.js source to see how this is done.
-Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
-See the drag-and-drop-image-vector.js source to see how this is done.
-Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
-See the drag-and-drop.js source to see how this is done.
-Example of a drag features interaction.
-See the drag-features.js source to see how this is done.
-A single interaction to drag, rotate, and zoom.
-Shift + Drag to rotate and zoom the map around its center.
See the drag-rotate-and-zoom.js source to see how this is done.
-Example of using the ol.interaction.Draw interaction together with - the ol.interaction.Modify interaction.
- - -See the draw-and-modify-features.js source to see how this is done.
-Example of using the ol.interaction.Draw interaction.
- - -See the draw-features.js source to see how this is done.
-Example of dynamic data.
-See the dynamic-data.js source to see how this is done.
-Demonstrates the use of style geometries to render source features of a cluster.
-- This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown. -
-To achieve this, we make heavy use of style functions and ol.style.Style#geometry. See the earthquake-clusters.js source to see how this is done.
Example of a map in EPSG:4326.
-See the epsg-4326.js source to see how this is done.
-Example of exporting a map as a PNG image.
-See the export-map.js source to see how this is done.
-Example of a fractal.
- -See the fractal.js source to see how this is done.
-Example of drag rotate and zoom control with full screen effect.
-Hold down Shift + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the Shift + drag thing again.
If there is no button on the map, your browser does not support the Full Screen API.
-See the full-screen-drag-rotate-and-zoom.js source to see how this is done.
-Example of a full screen control.
-Click the control in the top right corner to go full screen. Click it again to exit full screen.
-If there is no button on the map, your browser does not support the Full Screen API.
-See the full-screen.js source to see how this is done.
-Example of GeoJSON features.
-See the geojson.js source to see how this is done.
-position accuracy :
altitude :
altitude accuracy :
heading :
speed :
Example of a geolocation map.
-See the geolocation.js source to see how this is done.
-This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
-Additionally map.forEachLayerAtPixel is used to change the mouse
- pointer when hovering a non-transparent pixel on the map.
See the getfeatureinfo-image.js source to see how this is done.
-This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.
-Additionally map.forEachLayerAtPixel is used to change the mouse
- pointer when hovering a non-transparent pixel on the map.
See the getfeatureinfo-tile.js source to see how this is done.
-Example of using the GPX source.
-See the gpx.js source to see how this is done.
-This example shows how to add a graticule overlay to a map.
-See the graticule.js source to see how this is done.
-Demonstrates the use of a heatmap layer.
-
- This example parses a KML file and renders the features as a ol.layer.Heatmap layer.
-
See the heatmap-earthquakes.js source to see how this is done.
-Example of hue/saturation control on the client (WebGL only).
-See the hue-saturation.js source to see how this is done.
-Icon sprite with WebGL.
-See the icon-sprite-webgl.js source to see how this is done.
-In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.
-Example using an icon to symbolize a point.
-See the icon.js source to see how this is done.
-Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
-The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.
-See the igc.js source to see how this is done.
-Apply a filter to imagery
- -
- Layer rendering can be manipulated in precompose and postcompose event listeners.
- These listeners get an event with a reference to the Canvas rendering context.
- In this example, the postcompose listener applies a filter to the image data.
-
See the image-filter.js source for details on how this is done.
-Example using image load events.
-
- Image sources fire events related to image loading. You can
- listen for imageloadstart, imageloadend,
- and imageloaderror type events to monitor image loading
- progress. This example registers listeners for these events and
- renders an image loading progress bar at the bottom of the map.
-
- See the image-load-events.js source - for more detail on how this is done. -
-Example of an image vector layer.
-This example uses a ol.source.ImageVector source. That source gets vector features from the
- ol.source.Vector it's configured with, and draw these features to an HTML5 canvas element that
- is then used as the image of an image layer.
See the image-vector-layer.js source to see how this is done.
-Demonstrates the use of a Shape symbolizer to render earthquake locations.
-
- This example parses a KML file and renders the features as a vector layer. The layer is given a style that renders earthquake locations with a size relative to their magnitude.
-
See the kml-earthquakes.js source to see how this is done.
-Demonstrates rendering timezones from KML.
-This example parses a KML file and renders the features as a vector layer. The layer is given a ol.style.Style that fills timezones yellow with an opacity calculated based on the current offset to local noon.
See the kml-timezones.js source to see how this is done.
-Example of using the KML source.
-See the kml.js source to see how this is done.
-Layer WebGL clipping example.
-This example shows how to use the precompose and postcompose rendering hooks to clip layers using WebGL.
See the layer-clipping-webgl.js source to see how this is done.
-Layer clipping example.
-See the layer-clipping.js source to see how this is done.
-Restricting layer rendering to a limited extent.
-
- This example uses the layer.setExtent() method to
- modify the extent of the overlay layer. Use the controls below
- to limit rendering based on an extent.
-
-
- See the layer-extent.js - source for details on how this is done. -
-Example of a map with layer group.
-See the layer-group.js source to see how this is done.
-View a portion of one layer over another
-
- Layer rendering can be manipulated in precompose and postcompose event listeners.
- These listeners get an event with a reference to the Canvas rendering context.
- In this example, the precompose listener sets a clipping mask around the most
- recent mouse position, giving you a spyglass effect for viewing one layer over another.
-
- Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size. -
-See the layer-spy.js source to see how this is done.
-Example of a Layer swipe map.
-See the layer-swipe.js source to see how this is done.
-Example of setting a layer source after construction.
-
- Typically, the source for a layer is provided to the layer constructor.
- If you need to set a layer source after construction, this can be
- done with the layer.setSource() method.
-
- The layer in the map above is constructed with no source. Use the - links below to set/unset the layer source. A layer is not rendered - until its source is set. -
-- - -
-See the lazy-source.js source for details on how this is done.
-Example of drawing arrows for each line string segment.
-See the line-arrows.js source to see how this is done.
-Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
-The base layer is OpenCycleMap with an overlay from OpenSeaMap. The OpenSeaMap tile server does not support CORS headers.
-See the localized-openstreetmap.js source to see how this is done.
-Example of a untiled MapGuide map.
-See the mapguide-untiled.js source to see how this is done.
-Example of a MapQuest map.
-See the mapquest.js source to see how this is done.
-Example of using the - ol.interaction.Draw interaction for creating simple - measuring application.
- - -NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth - curvature is not taken into account
-See the measure.js source to see how this is done.
-Show/hide layers depending on current view resolution.
-- Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown. -
-- If you continue to zoom in, you'll see the OSM layer also disappear. -
-- The rendering of the layers are here controlled using minResolution and maxResolution options. -
-See the min-max-resolution.js source to see how this is done.
-Editing features with the modify interaction.
-This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+click to select multiple features).
See the modify-features.js source to see how this is done.
-Example for testing feature modification.
-See the modify-test.js source to see how this is done.
-Example of a mouse position control, outside the map.
-See the mouse-position.js source to see how this is done.
-Use of the moveend event.
-In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.
See the moveend.js source for details on how this is done.
-Shows how to add navigation controls.
- The following navigation controls are added to the map: -
OpenLayers 3 Examplesol.control.Zoom (added by default)ol.control.ZoomToExtentSee the navigation-controls.js source to see how this is done.
-Demonstrates overlays.
-The popups are created using - Popovers from Bootstrap.
-See the overlay.js source to see how this is done.
-Example of OverviewMap control with advanced customization.
-See the overviewmap-custom.js source to see how this is done.
-This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.
-Example of OverviewMap control.
-See the overviewmap.js source to see how this is done.
-Showing the vertices of a polygon with a custom style geometry.
-See the polygon-styles.js source to see how this is done.
-Uses an overlay to create a popup.
-
- Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to display the popup, and another listener is set as the click handler for the close button to hide the popup.
-
- See the popup.js source to see how this is done. -
-Example of tile preloading.
-The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.
-See the preload.js source to see how this is done.
-Example of some Regular Shape styles.
-See the regularshape.js source to see how this is done.
-Example of a rotated map.
-Use Alt+Shift+drag to rotate the map.
See the rotation.js source to see how this is done.
-Example of a scale line.
-See the scale-line.js source to see how this is done.
-Example of using the Select interaction. Choose between Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.
Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.
In this example, a listener is registered for the Select interaction's select event in order to update the selection status below.
-
See the select-features.js source to see how this is done.
-Example of a map with a semi-transparent layer.
-See the semi-transparent-layer.js source to see how this is done.
-The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
-See the side-by-side.js source to see how this is done.
-Example of a simple map.
-See the simple.js source to see how this is done.
-Example of using the snap interaction together with
- draw and modify interactions. The snap interaction must be added
- last, as it needs to be the first to handle the
- pointermove event.
See the snap.js source to see how this is done.
-Example of a Sphere Mollweide map with a Graticule component.
-See the sphere-mollweide.js source to see how this is done.
-Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.
-See the stamen.js source to see how this is done.
-Example of a static image layer.
-- This example uses a static image - as a layer source. The map view is configured with a custom - projection that translates image coordinates directly into map - coordinates. -
-- See the static-image.js source - for details on how this is done. -
-Using symbols in an atlas with WebGL.
-When using symbol styles with WebGL, OpenLayers would render the symbol
- on a temporary image and would create a WebGL texture for each image. For a
- better performance, it is recommended to use atlas images (similar to
- image sprites with CSS), so that the number of textures is reduced. OpenLayers
- provides an AtlasManager, which when passed to the constructor
- of a symbol style, will create atlases for the symbols.
See the symbol-atlas-webgl.js source to see how this is done.
-Synthetic lines example.
-See the synthetic-lines.js source to see how this is done.
-Performance results:
-| Device/Browser | -200 lines | -500 lines | -1000 lines | -2000 lines | -5000 lines | -10000 lines | -20000 lines | -
|---|---|---|---|---|---|---|---|
| Mac Book Air / Chrome 33 canary | -60 fps | -60 fps | -60 fps | -60 fps | -60 fps | -60 fps | -60 fps | -
| Mac Book Air / FireFox 25 | -60 fps | -60 fps | -60 fps | -60 fps | -60 fps | -22 fps | -6 fps | -
| Mac Book Air / Safari 7 | -60 fps | -60 fps | -60 fps | -40 fps | -10 fps | -N/A | -N/A | -
| iPhone 4S / iOS 7 / Safari | -60 fps | -33 fps | -15 fps | -5 fps | -N/A | -N/A | -N/A | -
Synthetic points example.
-See the synthetic-points.js source to see how this is done.
-Example of moving a map from one target to another.
-Click on the Teleport button below the map to move the map from one target to another.
-See the teleport.js source to see how this is done.
-Example using tile load events.
-
- Image tile sources fire events related to tile loading. You can
- listen for tileloadstart, tileloadend,
- and tileloaderror type events to monitor tile loading
- progress. This example registers listeners for these events and
- renders a tile loading progress bar at the bottom of the map.
-
- See the tile-load-events.js source - for more detail on how this is done. -
-Example of vector tiles from openstreetmap.us.
-See the tile-vector.js source to see how this is done.
-Example of a TileJSON layer.
-See the tilejson.js source to see how this is done.
-This example shows how to read data from a TileUTFGrid layer.
-Point to a country to see its name and flag.
-Tiles made with TileMill. Hosting on MapBox.com or with open-source TileServer.
-See the tileutfgrid.js source to see how this is done.
-Example of Tissot indicatrix maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
-See the tissot.js source to see how this is done.
-Demonstrates rendering of features from a TopoJSON topology.
-See the topojson.js source to see how this is done.
-Example of GeoJSON features with labels.
-See the vector-labels.js source to see how this is done.
-Note: The 'Text/Wrap' option is currently not working properly. This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping.
-Example of a countries vector layer with country information on hover and country labels at higher zoom levels.
-See the vector-layer.js source to see how this is done.
-Example of using the OSM XML source. Vector data is loaded dynamically from a server using a tiling strategy.
-See the vector-osm.js source to see how this is done.
-Example of using WFS with a BBOX strategy.
-See the vector-wfs.js source to see how this is done.
-Example of using the WKT parser.
-See the wkt.js source to see how this is done.
-Example of parsing a WMS GetCapabilities response.
-See the wms-capabilities.js source to see how this is done.
-Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.
-See the wms-custom-proj.js source to see how this is done.
-Example of two single image WMS layers.
-Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.
-See the wms-image-custom-proj.js source to see how this is done.
-Example of a single image WMS layer.
-See the wms-image.js source to see how this is done.
-Example of two WMS layers using the projection EPSG:21781, which is unknown to the client.
-See the wms-no-proj.js source to see how this is done.
-Example of a tiled WMS layer that wraps across the 180° meridian.
-See the wms-tiled-wrap-180.js source to see how this is done.
-Example of a tiled WMS layer.
-See the wms-tiled.js source to see how this is done.
-Example of parsing a WMTS GetCapabilities response.
-See the wmts-capabilities.js source to see how this is done.
-Example of a WMTS based HiDPI layer.
-See the wmts-hidpi.js source to see how this is done.
-Example of a WMTS source created from a WMTS capabilities document.
-See the wmts-layer-from-capabilities.js source to see how this is done.
-Example of a WMTS source.
-See the wmts.js source to see how this is done.
-Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.
-See the xyz-esri-4326-512.js source for details on how this is done.
-Example of a XYZ source using Esri tiles.
-See the xyz-esri.js source for details on how this is done.
-Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.
-The ol.source.XYZ must contain tilePixelRatio parameter. The tiles were prepared from a GeoTIFF file with MapTiler.
See the xyz-retina.js source for details on how this is done.
-Example of a XYZ source.
-See the xyz.js source for details on how this is done.
-Example of a zoom constrained view.
-This map has a view that is constrained between zoom levels 9 and 13. This is done using the minZoom and maxZoom view options.
See the zoom-constrained.js source for details.
-Example of a Zoomify source.
-See the zoomify.js source to see how this is done.
-Example of various ZoomSlider controls.
-- See the zoomslider.js - source to see how this is done. -
-This page's map element has its tabindex attribute set to "0", that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the map element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.
+tags: "accessibility, tabindex" +--- +ol.source.XYZ instead.
+tags: arcgis, tile, tilelayer"
+---
+collapsible option is set to true if the width
+ of the map gets smaller than 600 pixels.
+tags: "attributions, openstreetmap"
+---
+When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol.source.BingMaps.
This example shows how to use a DragBox interaction to select features. Selected features are added
+ to the feature overlay of a select interaction (ol.interaction.Select) for highlighting.
Use SHIFT+drag to draw boxes.
The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not + OSM tile coordinates (origin top left).
+tags: "layers, openstreetmap, canvas" +--- +fitGeometry method
+ is used to fit a geometry in the view with the same padding. The
+ view's centerOn method is used to position a coordinate (Lausanne)
+ at a specific pixel location (the center of the black box).
+ Use Alt+Shift+drag to rotate the map.
ol.source.Cluster."
+docs: >
+ This example shows how to do clustering on point features.
+tags: "cluster, vector"
+---
+The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.
α :
β :
γ :
heading :
Shift + Drag to rotate and zoom the map around its center.
This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations + (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents + the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.
+To achieve this, we make heavy use of style functions and ol.style.Style#geometry.
Hold down Shift + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the Shift + drag thing again.
If there is no button on the map, your browser does not support the Full Screen API.
+tags: "full-screen, drag, rotate, zoom, bing, bing-maps" +--- +Click the control in the top right corner to go full screen. Click it again to exit full screen.
+If there is no button on the map, your browser does not support the Full Screen API.
+tags: "full-screen, bing, bing-maps" +--- +position accuracy :
altitude :
altitude accuracy :
heading :
speed :
Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.
Additionally map.forEachLayerAtPixel is used to change the mouse pointer when hovering a non-transparent pixel on the map.
ol.layer.Heatmap layer.
+tags: "heatmap, kml, vector, style"
+---
+In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.
+tags: "webgl, icon, sprite, vector, point" +--- +The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.
+tags: "complex-geometry, closest-feature, igc, opencyclemap" +--- +Layer rendering can be manipulated in precompose and postcompose event listeners.
+ These listeners get an event with a reference to the Canvas rendering context.
+ In this example, the postcompose listener applies a filter to the image data.
Image sources fire events related to image loading. You can
+ listen for imageloadstart, imageloadend,
+ and imageloaderror type events to monitor image loading
+ progress. This example registers listeners for these events and
+ renders an image loading progress bar at the bottom of the map.
This example uses a ol.source.ImageVector source. That source gets vector features from the
+ ol.source.Vector it's configured with, and draw these features to an HTML5 canvas element that
+ is then used as the image of an image layer.
style that renders earthquake locations with a size relative to their magnitude.
+tags: "KML, vector, style, tooltip"
+---
+ol.style.Style that fills timezones
+ yellow with an opacity calculated based on the current offset to local noon.
+tags: "KML, vector, style"
+---
+precompose and postcompose rendering hooks to clip layers using WebGL.
+tags: "clipping, webgl, openstreetmap"
+---
+layer.setExtent() method to
+ modify the extent of the overlay layer. Use the controls below
+ to limit rendering based on an extent.
+tags: "extent, tilejson"
+---
+Layer rendering can be manipulated in precompose and postcompose event listeners.
+ These listeners get an event with a reference to the Canvas rendering context.
+ In this example, the precompose listener sets a clipping mask around the most
+ recent mouse position, giving you a spyglass effect for viewing one layer over another.
Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.
+tags: "spy, image manipulation" +--- +Typically, the source for a layer is provided to the layer constructor.
+ If you need to set a layer source after construction, this can be
+ done with the layer.setSource() method.
The layer in the map above is constructed with no source. Use the + links below to set/unset the layer source. A layer is not rendered + until its source is set.
+tags: "source" +--- +The base layer is OpenCycleMap with an overlay from OpenSeaMap. The OpenSeaMap tile server + does not support CORS headers.
+tags: "cors, localized-openstreetmap, openseamap, openstreetmap" +--- +NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account
+tags: "draw, edit, measure, vector" +--- +Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.
+If you continue to zoom in, you'll see the OSM layer also disappear.
+The rendering of the layers are here controlled using minResolution and maxResolution options.
+tags: "minResolution, maxResolution, resolution" +--- +This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing.
+ Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+click to select multiple features).
In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.
This example shows how to use the beforeRender function on the Map to run one + or more animations.
+The following navigation controls are added to the map:
+ol.control.Zoom (added by default)ol.control.ZoomToExtentThe popups are created using Popovers from Bootstrap.
+tags: "overlay, popup, bootstrap, popover, mapquest, openaerial" +resources: overlay.css +--- +This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.
+tags: "overview, overviewmap" +resources: overviewmap-custom.css +--- +
+ Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an ol.Overlay is created with the popup container. A listener is registered for the map's click event to display the popup, and another listener is set as the click handler for the close button to hide the popup.
+
The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.
+tags: "preload, bing" +--- +Use Alt+Shift+drag to rotate the map.
Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.
+ Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.
In this example, a listener is registered for the Select interaction's select event in order to update the selection status below.
+
pointermove event.
+
+tags: "draw, edit, modify, vector, featureoverlay, snap"
+---
++ This example uses a static image + as a layer source. The map view is configured with a custom + projection that translates image coordinates directly into map + coordinates. +
+tags: "static image, xkcd" +--- +When using symbol styles with WebGL, OpenLayers would render the symbol
+ on a temporary image and would create a WebGL texture for each image. For a
+ better performance, it is recommended to use atlas images (similar to
+ image sprites with CSS), so that the number of textures is reduced. OpenLayers
+ provides an AtlasManager, which when passed to the constructor
+ of a symbol style, will create atlases for the symbols.
Performance results:
+| Device/Browser | +200 lines | +500 lines | +1000 lines | +2000 lines | +5000 lines | +10000 lines | +20000 lines | +
|---|---|---|---|---|---|---|---|
| Mac Book Air / Chrome 33 canary | +60 fps | +60 fps | +60 fps | +60 fps | +60 fps | +60 fps | +60 fps | +
| Mac Book Air / FireFox 25 | +60 fps | +60 fps | +60 fps | +60 fps | +60 fps | +22 fps | +6 fps | +
| Mac Book Air / Safari 7 | +60 fps | +60 fps | +60 fps | +40 fps | +10 fps | +N/A | +N/A | +
| iPhone 4S / iOS 7 / Safari | +60 fps | +33 fps | +15 fps | +5 fps | +N/A | +N/A | +N/A | +
Click on the Teleport button below the map to move the map from one target to another.
+tags: "teleport, openstreetmap" +--- +tileloadstart, tileloadend,
+ and tileloaderror type events to monitor tile loading
+ progress. This example registers listeners for these events and
+ renders a tile loading progress bar at the bottom of the map.
+ This example creates a "rotate to north" button.
+tags: "tile, events, loading"
+---
+Point to a country to see its name and flag.
+ Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/). +tags: "utfgrid, tileutfgrid, tilejson" +--- +