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

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

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

This example shows how to display values using a ol.style.Chart.

style, vector, statistic, chart, pie, text

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

style, vector, fill, pattern, hatch

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

style, vector, stroke, pattern, hatch

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

With the ol.style.FlowLine you can add arrows to draw Sankey maps.

style, vector, flow, color, arrow, sankey

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

ol/style/Profile is a style to draw line profiles on a map.

style, vector, profile, 3D, gpx

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

style, vector, textpath, text, along

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

style, vector, hash, stroke, offset

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

style, vector, hatch, fill, scribble

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

map, layer, animation, cluster, animated

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

map, feature, animation, bounce, drop

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

map, feature, animation, bounce, drop, select

This example animates features along a path.

map, feature, animation, path

A pulse function to pulse points on a map.

map, animation, pulse

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

filter, crop, mask

Filter to clip a map or a layer.

filter, clip

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

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

Filter to add texture effects on maps or layers.

filter, effect, texture

This filter applies a composite operation on layer drawing.

filter, effect, composite, color, canvas

Apply canvas filter on layer drawing.

filter, effect, svg, blur, huerotate, canvas

Apply CSS filter on layers (mix-blend-mode).

filter, effect, ol6, blend

This filter creates a folding effect on the map.

filter, effect, fold, folding, map, canvas

A filter to turn your maps into pencil sketchs.

filter, pencil, sketch, map, canvas

A set of filters to turn detect edges on map layers.

filter, SVG, map, canvas, Sobel, Roberts, Prewitt

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

layer, switcher, control

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

layer, switcher, control, filter

A simple layer switcher with image buttons.

layerswitcher, control, preview

A simple layer switcher as a menu.

layerswitcher, control

A layer switcher integrating bars to handle layer properties and buttons.

layerswitcher, shop, control

A control to help adding WMS on your maps.

map, control, layer, WMS, capabilities, getCapabilities

A control to help adding WMTS on your maps.

map, control, layer, WMTS, capabilities, getCapabilities

A control to jump from a map zone to another.

map, control, zone, locate

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

overlay, control, menu

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

overview, control

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

control, bookmark, place

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

control, profile, Z, altitude, GPX, GPS

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

control, permalink

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

control, swipe, compare

Swipe control and clip interaction to compare two maps.

map, compare, swipe, clip

The ol.control.Notification lets you show notification on the map.

map, control, notification

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

control, swipe, overlay, split

The ol.control.Gauge add a gauge on the map.

control, gauge

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

control, scale

ol/control/FeatureList displays a list of features attributes in a list.

control, list, table

The ol.control.Button is simple control button.

control, button, toolbar

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

control, button, toggle, toolbar

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

control, bar, toolbar, button, panel

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

control, bar, subbar, toolbar, button, panel

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

control, edit, bar, toolbar, button, panel

A control to print the map.

control, canvas, print, map, export

Add a dialog to print the map.

control, canvas, print, map, export, dialog

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

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

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

control, canvas, compass

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

control, canvas, graticule

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

control, canvas, grid, reference, index

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

control, canvas, target

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

interaction, transform, scale, translate, rotate, vector

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

interaction, feature, copy, cut, paste

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

interaction, draw, hole, polygon, donut

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

interaction, split, linestring

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

interaction, split, linestring

A modify interaction that support undo/redo.

interaction, modify, undo

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

interaction, regular, interaction, draw, circle, triangle

An interaction to offset the feature geometry.

interaction, vector, transform, offset

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

interaction, hover, cursor

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

interaction, sna, guide

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

interaction, clip, circle, canvas

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

interaction, drag, drop

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

interaction, drag, popup, placemark, overlay

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

interaction, undo, redo

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

interaction, undo, redo, attributes

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

interaction, undo, redo, custom, action

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

style, legend, features, control

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

style, legend, features, control

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

style, legend, features, control

Legend items can use ol/legend/Image to display an image as legend.

style, legend, image, control

Legends can be associated with a layer and displayed when the layer is visible only.

style, legend, layer, control

A generic search bar to search on the map.

search, control

A search control to get lon/lat from user.

search, control, GPS, longitude, latitude

A search bar to search features on the map.

search, control, vector

A search control to search features in WikiPedia.

search, control, vector, wikipedia, mediawiki

A search bar to search places using the OSM Nominatim.

search, control, OSM, nominatim, places, autocomplete

A search bar to search places using the photon API.

search, control, OSM, photon, places, autocomplete

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

search, control, BAN, french, places, autocomplete

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

search, control, Geoportail, french, places, autocomplete

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

search, control, Geoportail, french, parcel, autocomplete

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

search, select, features, control

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

search, select, features, control

Use Dijkstra's algorithm on a vector layer.

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

A routing control that use the French Geoportail API.

routing, IGNF, Geoportail

An isochrone control that use the French Geoportail API.

routing, isochrone, IGNF, Geoportail

Show popup on a map with style.

popup, overlay

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

popup, overlay, animation

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

popup, overlay, feature, attribute, select

Popup on a fixed place in the map viewport.

popup, overlay

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

Display a placemark on the map.

popup, overlay, placemark, animation

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

popup, overlay, animation

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

layer, hexbin, cluster, hexagon, binning, heatmap

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

layer, binning, cluster, square, grid

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

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

layer, cluster, binning, feature, aggregate

ol/source/GeoImage georeference images on a map.

layer, georeference, georeferencing, image, photo

ol/source/IDW is an IDW (Inverse Distance Weighted) interpolated source.

layer, source, IDW, interpolation, inverse, distance, weight

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

source, dfci, grid, index

The ol/source/DayNight display night and day on a map.

source, night, day

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

source, layer, geoportail

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

layer, preview

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

layer, vector, OSM, Overpass

ol/source/GeoRSS is a vector source to load a GeoRSS feed.

source, layer, vector, GeoRSS

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

layer, vector, wikipedia, dbpedia

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

layer, vector, wikipedia, wikimedia, commons

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

source, vector, Delaynay, Voronoi, triangulation, TIN

The ol/interaction/GeolocationButton is a simple button to handle geolocation.

interaction, mobile, GPS, location

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

interaction, mobile, draw, GPS, location

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

mobile, control, bar, draw, GPS, location

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

interaction, touch, drag, compass

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

interaction, touch, long

An interactioon for drawing feature geometry on a touch device.

interaction, touch, draw, vector

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

interaction, touch, modify, remove, vector

An interaction specially designed to work on mobile, with a cursor to shift the finger position and lets it visible when drawing.

interaction, mobile, touch, modify, draw, vector

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

The ol/geohash adds functions to convert a geohash to/from a latitude/longitude point, and to determine bounds of a geohash cell and find neighbours of a geohash.

geom, geohash

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

geom, track, great circle, sphere

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

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

geom, polygon, convex hull, envelope

Fast polygon intersection calculation with an extent.

geometry, intersection, extent

Rough polygon intersection calculation with a circle.

geometry, intersection

Calculte statistics on a map using fast polygon intersection calculation.

geometry, intersection, statistics

ol/PerspectiveMap displays a map with a perspective effect by pitching the map.

map, 3D, 2.5D, perspective

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

storymap, scroll-driven, narration, control

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

storymap, timeline, date, time, control

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

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

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

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

This example use a ol/control/Timeline to control layer visibility.

storymap, timeline, layer, date, time, control, historic

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

storymap, image, line, control

Use elevation Band Interleaved by Line (BIL) to encode altitude as RGB pixels in a layer.

layer, elevation, bil, altitude, DEM

Use elevation layer to render hyspometric tints.

layer, elevation, bil, hyspometric, DEM

Use elevation layer to render sea level at different elevation.

layer, elevation, bil, flood, DEM

A control to show debug information on the map.

control, status, overlay, debug

A control to display dialogs on a map.

control, dialog, overlay, form

Add some magic on your maps.

control, canvas, animation, video, record

Add some magic on your maps.

interaction, Tinker Bell, sparkle, cursor

Add a blob interaction on your maps.

interaction, blob, clip, cursor

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

The flashlight interaction add a flashlight effect on mouse move.

interaction, effect, light

The ol.Overlay.AnimatedCanvas is an overlay to play animations on top of the map.

control, effect, rain, snow, clouds, birds, animation

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

control, effect, clouds, birds, animation

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

filter, effect, lego, brick

ol/source/OilPainting turns an image layer into artistic oil painting.

source, filter, oil, painting

ol/filter/Poinitillism turns an image layer into artistic impressionnist pointillist painting.

source, filter, impressionnism, pointillism, painting

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

interaction, effect, animation, watter, ripple

Synchronize maps and add an overlay to show mouse position.

synchronization, map, cursor, comparison

Synchronize maps in different windows.

synchronization, map, window, comparison

An exemple to change colors on a VectorTile

source, layer, geoportail, vectortile, style

An exemple to download data using a WFS.

source, layer, geoportail, WFS, opendata

Add a progress bar to your maps.

control, progress, bar

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

exif, tag, image, geojson, tool

Convert a GeoJSON file to CSV.

csv, geojson, tool

Convert a CSV file to GeoJSON.

csv, geojson, tool

This example shows 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

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

layer, vector, 3D, buildings, animation

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

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

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

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

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

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

A map with animations when adding points.

map, animation, blink