Font style
(map.style.font.html)

Draw points using an iconic font (font Awesome) gives you scalable vector icons that can instantly be customized (form, size, color, drop shadow) using attributes..

style, vector, font, fontawesome, icon, maki

Photo style
(map.style.photo.html)

The ol.style.Photo is an image style to show photos or images on a map. The photos are drawn in a box and can be anchored.

style, vector, photo

Statistic charts style
(map.style.chart.html)

The ol.style.Chart is an image style to draw statistical graphics (bar, donut or pie charts) on a map.

style, vector, statistic, chart, pie, donut, animation

Statistic charts style + values
(map.style.chart+text.html)

This example show how to show values using a ol.style.Chart.

style, vector, statistic, chart, pie, text

Fill pattern style
(map.style.pattern.html)

The ol.style.FillPattern is a fill style with a set of cartographic patterns to use in your maps.

style, vector, fill, pattern, hatch

Stroke pattern style
(map.style.strokepattern.html)

The ol.style.StokePattern is a stroke style with a set of cartographic patterns to use in your maps.

style, vector, stroke, pattern, hatch

FlowLine style
(map.style.flowline.html)

The ol.style.FlowLine is a line style to draw LineString with variable colors and widths to display flows or Sankey diagram on a map.

style, vector, flow, color, sankey

FlowLine style
(map.style.gpxline.html)

This example displays a GPX track using a ol.style.FlowLine to symbolize elevation along the line as a color.

style, vector, flow, color, gpx

Textpath style
(map.style.textpath.html)

The ol.vector.setTextPathStyle() is a function to draw text along a linear feature (ol.geom.lineString) on postcompose.

style, vector, textpath, text, along

Hash lines style
(map.style.hashlines.html)

This example use the ol.geom.offsetCoords() function to draw an offset line with a dash symbol.

style, vector, hash, stroke, offset

Scribble fill
(map.style.scribblefill.html)

The scribbleFill function calculates a MultiPolyline to fill a Polygon with a scribble effect that appear hand-made.

style, vector, hatch, fill, scribble

Animated clusters
(map.animatedcluster.html)

ol.layer.AnimatedCluster is a layer that animates clusters on zoom change.

map, layer, animation, cluster, animated

Feature animation
(map.featureanimation.html)

ol.featureAnimation provides animations to animate features on a map.

map, feature, animation, bounce, drop

Feature animation with select
(map.featureanimation.select.html)

This example show how to use a transparent style to let the features selectable when animated.

map, feature, animation, bounce, drop, select

Animate features along a path
(map.featureanimation.path.html)

This example animates deatures along a path.

map, feature, animation, path

Pulse!
(map.pulse.html)

A pulse function to pulse points on a map.

map, animation, pulse

Crop/mask filter
(map.filter.crop.html)

Filter to crop or mask a map or a layer using an area (ol.feature).

filter, crop, mask

Clip filter
(map.filter.clip.html)

Filter to clip a map or a layer.

filter, clip

Colorize filter
(map.filter.colorize.html)

Filter to add color effects on maps or layers (hue, color, grayscale, enhance...).

filter, effect, color, hue, saturation, invert, grayscale

Texture filter
(map.filter.texture.html)

Filter to add texture effects on maps or layers.

filter, effect, texture

Composite filter
(map.filter.composite.html)

This filter apply a composite operation on layer drawing.

filter, effect, composite, color, canvas

Folding map
(map.filter.fold.html)

This filter creates a folding effect on the map.

filter, effect, fold, folding, map, canvas

Layer switcher control example
(map.switcher.html)

Example of a layer switcher control with visibility, opacity and ordering.

layer, switcher, control

Switcher with layer filter option
(map.switcher.filter.html)

Example of a layer switcher control with a filter to filter layers on names.

layer, switcher, control, filter

LayerSwitcher image
(map.switcher.image.html)

A simple layer switcher with image buttons.

layerswitcher, control, preview

LayerSwitcher popup
(map.switcher.popup.html)

A simple layer switcher as a menu.

layerswitcher, control

MapZone control
(map.control.mapzone.html)

A control to jump from a map zone to another.

map, control, zone, locate

Overlay menu
(map.control.overlay.menu.html)

The ovelay control can be used to display a menu on to of the map.

overlay, control, menu

Overview map
(map.overview.html)

An overview map with zoom limit and custom styles. Click on the overview will center the map.

overview, control

Geo bookmarks control
(map.control.geobookmark.html)

ol.control.GeoBookmark adds a control to handle geo bookmarks, ie. save places.

control, bookmark, place

Profil control
(map.control.profil.html)

ol.control.Profil is a control that draw a profil of a 3D lineString (with a XYZ or XYZM layout).

control, profil, Z, altitude, GPX, GPS

Permalink control
(map.control.permalink.html)

The ol.control.Permalink is hyperlink that will return the user to the current map view.

control, permalink

Swipe control
(map.control.swipe.html)

The ol.control.Swipe is a control that add a split screen to compare two map overlays.

control, globe, overview

Notification control
(map.control.notification.html)

The ol.control.Swipe is a control that add a split screen to compare two map overlays.

control, globe, overview

Globe control
(map.control.globe.html)

The ol.control.Globe add a small globe on the map to display a position marker.

control, swipe, overlay, split

Scale control
(map.control.scale.html)

ol.control.Scale displays the cuurent scale in a control on the map.

control, scale

Control button
(map.control.button.html)

The ol.control.Button is simple control button.

control, button, toolbar

Control Toggle
(map.control.toggle.html)

ol.control.Toggle is an ol.control.Button with an active/deactive state.

control, button, toggle, toolbar

Control bar
(map.control.bar.html)

The ol.control.Bar is a panel that contains other controls. You can compose toolbars with it.

control, bar, toolbar, button, panel

Control subbar
(map.control.subbar.html)

ol.control.Bar an be bested using an ol.control.Toggle to add subbar.

control, bar, subbar, toolbar, button, panel

Edition bar
(map.control.editionbar.html)

An example of ol.control.Bar to handle an edit toolbar.

control, edit, bar, toolbar, button, panel

Print control
(map.control.print.html)

A control to print the map.

control, canvas, print, map, export

Canvas control
(map.canvas.control.html)

Example of canvas controls, ie. controls that are drawn on the canvas to use with export (jepg/png) functions.

control, canvas, scale line, attribution, title, export

Compass control.
(map.control.compass.html)

The ol.control.Compass draw a compass on the map.

control, canvas, compass

Graticule control.
(map.control.graticule.html)

The ol.control.Graticule draw a graticule and coordinate labels on the map.

control, canvas, graticule

Grid reference control.
(map.control.gridreference.html)

The ol.control.GridReference display a grid reference on the map associated with an index map.

control, canvas, grid, reference, index

Target control.
(map.target.control.html)

The ol.control.Target draw a target to materialize the center of the map.

control, canvas, target

Transform interaction
(map.interaction.transform.html)

The ol.interaction.Transform is an interaction to transform features (scale, translate, rotate).

interaction, transform, scale, translate, rotate, vector

An interaction to copy / paste features on the map
(map.interaction.copypaste.html)

ol.interaction.CopyPaste is an interaction to copy, cut, paste features.

interaction, feature, copy, cut, paste

An interaction to draw holes in polygons
(map.interaction.drawhole.html)

ol.interaction.DrawHole is an interaction to draw holes in poglygon features.

interaction, draw, hole, polygon, donut

Split feature interaction
(map.interaction.split.html)

ol.interaction.Split is an interaction to split feature geometry (ol.geom.LineString).

interaction, split, linestring

Splitter interaction
(map.interaction.splitter.html)

An interaction that acts as a split feature agent while editing vector features (LineString).

interaction, split, linestring

Modify feature
(map.interaction.modifyfeature.html)

A modify interaction that support undo/redo.

interaction, modify, undo

Draw regular interaction
(map.interaction.drawregular.html)

ol.interaction.DrawRegular is an interaction to draw regular polygon (circle/ellipse, triangle, square/rectangles, etc).

interaction, regular, interaction, draw, circle, triangle

Offset interaction
(map.interaction.offset.html)

An interaction to offset the feature geometry.

interaction, vector, transform, offset

Hover interaction
(map.interaction.hover.html)

An interaction to do something when hovering a feature (change cursor, show a popup, display information, etc.)

interaction, hover, cursor

Snap guide interaction
(map.interaction.snapguides.html)

ol.interaction.SnapGuide handles snapping of vector features using guides lines while modifying or drawing them.

interaction, sna, guide

Clip interaction
(map.interaction.clip.html)

ol.interaction.Clip clip layers by a circle on the map.

interaction, clip, circle, canvas

Dropfile interaction
(map.ddrop.html)

ol.interaction.DropFile is a drag and drop interaction. It fires a loadstart and loadend and errors.

interaction, drag, drop

Drag overlays interaction
(map.interaction.dragoverlay.html)

ol.interaction.DraOverlay is an interaction to drag overlays on the map.

interaction, drag, popup, placemark, overlay

Undo/redo interaction
(map.interaction.undoredo.html)

ol/interaction/UndoRedo is an interaction to handle undo/redo on a map.

interaction, undo, redo

Undo/redo attributes
(map.interaction.undoredo2.html)

ol/interaction/FillAttribute is a cancelable interaction to modify attributes.

interaction, undo, redo, attributes

Undo/redo custom action
(map.interaction.undocustom.html)

This example shows how to define action with ol/interaction/UndoRedo.

interaction, undo, redo, custom, action

Legend control
(map.control.legend.html)

ol.control.Legend is a control to display a legend on a map.

style, legend, features, control

Legend control
(map.control.legendstat.html)

An example to display a ol.control.Legend in a statistical map.

style, legend, features, control

Multi Legend control
(map.control.legends.html)

An example to display a ol.control.Legend with 2 columns.

style, legend, features, control

Search bar
(map.control.search.html)

A generic search bar to search on the map.

search, control

Search GPS
(map.control.searchgps.html)

A search control to get lon/lat from user.

search, control, GPS, longitude, latitude

Search feature
(map.control.searchfeature.html)

A search bar to search features on the map.

search, control, vector

Search WikiPedia feature
(map.control.searchpedia.html)

A search control to search features in WikiPedia.

search, control, vector, wikipedia, mediawiki

Search places with Nominatim
(map.control.searchnominatim.html)

A search bar to search places using the OSM Nominatim.

search, control, OSM, nominatim, places, autocomplete

Search places with Photon
(map.control.searchphoton.html)

A search bar to search places using the photon API.

search, control, OSM, photon, places, autocomplete

Search French places
(map.control.searchban.html)

A search bar to search French places using the French National Address Base (BAN) API.

search, control, BAN, french, places, autocomplete

Search Géoportail
(map.control.searchgeoportail.html)

A search bar to search French places using the Géoportail API.

search, control, Geoportail, french, places, autocomplete

Search French cadastral parcels
(map.control.searchgeoportailparcelle.html)

A search bar to search French cadastral parcels using the Géoportail API.

search, control, Geoportail, french, parcel, autocomplete

Select control
(map.control.select.html)

ol.control.Select is a control to select features by attributes in a source.

search, select, features, control

Multi-select control
(map.control.selectmulti.html)

ol.control.SelectMulti is a control container that manage other Select control.

search, select, features, control

Dijkstra short path
(map.source.dijkstra.html)

Use Dijkstra's algorithm on a vector layer.

routing, graph, algo, dijkstra, A*, short path

Geoportail routing
(map.control.routing.html)

A routing control that use the French Geoportail API.

routing, IGNF, Geoportail

Geoportail isochrone
(map.control.isochrone.html)

An isochrone control that use the French Geoportail API.

routing, isochrone, IGNF, Geoportail

Popup!
(map.popup.html)

Show popup on a map with style.

popup, overlay

Animated popup!
(map.popup.anim.html)

This example uses a CSS to add a bounce effect to the popup display.

popup, overlay, animation

Feature popup
(map.popup.feature.html)

ol/Overlay/PopupFeature is a popup to show the content of features on the map.

popup, overlay, feature, attribute, select

Tooltips
(map.tooltip.measure.html)

ol/Overlay/Tooltip is a popup to show information on the fly. It can be used to display measure while drawing.

popup, overlay, feature, tooltip, measure

Placemark
(map.placemark.html)

Display a placemark on the map.

popup, overlay, placemark, animation

Overlay control
(map.control.overlay.html)

The ovelay control can be used to display information on to of the map.

popup, overlay, animation

Hexbin maps
(map.layer.hexbin.html)

ol.source.HexBin aggregates features on hexagonal grid. Hexagonal binning (heatmaps) provide a convenient way to visualize density.

layer, hexbin, cluster, hexagon, binning, heatmap

Grid bin maps
(map.layer.gridbin.html)

ol.source.GridBin is a convenient way for aggregating data into a coarser representation for display.

layer, binning, cluster, square, grid

INSEE bin maps
(map.layer.insee.html)

The French INSEE grid is a 2.3 million squares grid (200m x 200m) that cover the France based on lambert azimutha equal area projection (EPSG:3035).

layer, binning, cluster, square, insee

Feature bin maps
(map.layer.featurebin.html)

The ol.source.FeatureBin is a source that use a set of features subdivision to bin data on it.

layer, cluster, binning, feature, aggregate

Georeference images on a map
(map.geoimage.html)

ol.source.GeoImage georeference images on a map.

layer, georeference, georeferencing, image, photo

Show DFCI grid in a layer
(map.dfci.html)

A ol/source/DCI to display the French DFCI grid on a map as a layer.

source, dfci, grid, index

French IGN's layer and source
(map.layer.geoportail.html)

ol/source/Geoportail abd ol/layer/Geoportail handle french Geoportail layers and API key.

source, layer, geoprotail

Preview of a layer
(map.preview.html)

Add a getPreview function to ol.layer that retrieve a preview of the layer.

layer, preview

Overpass source
(map.overpass.html)

ol.source.Overpass is a vector source that use the Overpass API to load OSM features.

layer, vector, OSM, Overpass

BDpedia layer
(map.dbpedia.html)

A BDpedia tile vector layer that use RDF of the french DBpedia project.

layer, vector, wikipedia, dbpedia

Wikimedia Commons layer
(map.wikicommons.html)

ol.layer.WikiCommons is a tile vector layer that use Wikimedia Commons.

layer, vector, wikipedia, wikimedia, commons

Delaunay triangulation
(map.source.delaunay.html)

ol.source.Delaunay computes a Delaunay triangulation of a vector source.

source, vector, Delaynay, triangulation

Draw feature using GPS
(map.interaction.geolocationdraw.html)

The ol.interaction.GeolocationDraw is a draw interaction that use the GPS to draw features.

interaction, mobile, draw, GPS, location

A control bar to record GPS tracks
(map.control.geolocationbar.html)

The ol.control.GeolocationBar is a control designed to record GPS tracks.

mobile, control, bar, draw, GPS, location

Touch compass interaction
(map.interaction.touchcompass.html)

The TouchCompass interaction lets you handle movement by dragging a touch compass.

interaction, touch, drag, compass

Touch draw interaction
(map.interaction.drawtouch.html)

An interactioon for drawing feature geometry on a touch device.

interaction, touch, draw, vector

Long touch interaction
(map.interaction.longtouch.html)

The LongTouch interaction is an interaction to handle a long touch event.

interaction, touch, long

ModifyTouch interaction
(map.interaction.modifytouch.html)

An interactioon to display a popup when modifying a feature to remove a vertex on touch devices.

interaction, touch, modify, remove, vector

Cardinal spline
(map.geom.cspline.html)

The ol.geom.Geometry.cspline() function smooth lines by using cardinal splines (canonical spline) to draw smooth curves that goes through the points.

geom, linestring, spline, smooth, curve

Great circle track
(map.geom.greatcircle.html)

The ol.sphere.greatCircleTrack() function computes a great circle geometry.

geom, track, great circle, sphere

Convex Hull
(map.convexhull.html)

The ol.coordinate.convexHull() function calculates a convex hull or convex envelope, ie. the smallest polygon that contains all points of a set.

geom, polygon, convex hull, envelope

Cluster envelope
(map.cluster.convexhull.html)

Uses convex hull to display the envelope of the points inside a cluster when cusor hovers the cluster.

geom, polygon, convex hull, envelope

Storymap
(map.control.storymap.html)

A control with scroll-driven navigation to create narrative maps.

storymap, scroll-driven, narration, control

Time line
(map.control.timeline.html)

The ol/control/Timeline displays features on a timeline.

storymap, timeline, date, time, control

Time line interval
(map.control.timeinterval.html)

The ol/control/Timeline can be used to displays filter features in a time interval.

storymap, timeline, interval, date, time, control, earthquake

Time line slider
(map.control.timequake.html)

This example use a ol/control/Timeline as a time slider.

storymap, timeline, slider, date, time, control, earthquake

Image line
(map.control.imageline.html)

The ol/control/Imageline displays images on map as a line.

storymap, image, line, control

Exif2GeoJSON
(exif2geojson.html)

A usefull tool to make a GeoJSON file with all of the found GPS points in a list of images.

exif, tag, image, geojson

GeoJSON2CSV
(geojson2csv.html)

Convert a GeoJSON file to CSV.

csv, geojson

Status control
(map.control.status.html)

A control to show debug information on the map.

control, status, overlay, debug

Dialog control
(map.dialog.html)

A control to display dialogs on a map.

control, dialog, overlay, form

Thinker Bell animation
(map.interaction.tinkerbell.html)

Add some magic on your maps.

interaction, Tinker Bell, sparkle, cursor

Magnify glass
(map.overlay.magnify.html)

The Magnify overlay add a "magnifying glass" effect to an OL3 map that displays a portion of the map in a different zoom (and actually display different content).

overlay, magnify, glass, zoom

Flashlight!
(map.flashlight.html)

The flashlight interaction add a flashlight effect on mouse move.

interaction, effect, light

Map in the cloud
(map.control.cloud.html)

The ol.control.Cloud adds an animated clouds overlay over the map.

control, effect, clouds, birds, animation

Lego map
(map.filter.lego.html)

A map that looks like made of a set of Lego bricks.

filter, effect, lego, brick

Watter ripple
(map.interaction.ripple.html)

The ripple interaction add a watter ripple effect on a map.

interaction, effect, animation, watter, ripple

Synchronize Maps
(map.interaction.synchronize.html)

Synchronize maps and add an overlay to show mouse position.

synchronization, map, cursor, comparison

Synchronize Maps
(map.synchro.html)

Synchronize maps in different windows.

synchronization, map, window, comparison

Pirate map.
(map.pirate.html)

This example show how to combine a color filter, with a parchment texture filter, a compass control and a graticule control to create an old map effect.

control, canvas, pirate, graticule, compass, effect

2.5/3D renderer
(map.layer.3D.html)

This example is an attempt to represent 2.5/3D informations on a map.

layer, vector, 3D, buildings, animation

2.5/3D layer
(map.layer.3D.2.html)

The ol/layer/Vector3D is a layer to display vector source in a 2.5/3D style.

layer, vector, 3D, source, animation, statistic

BDpedia photo map
(map.dbpedia.photo.html)

An example using a BDpedia layer with clusters to show photos on a map.

layer, vector, cluster, photo, style, dbpedia, animation

Clustering map
(map.clustering.html)

An example using the ol.style.Chart to display the cluster content.

layer, vector, cluster, chart, style, cluster, animation