Fork me on GitHub
Cool extensions for OpenLayers 3 (OL3).

If you like this, you may like OL3-AnimatedCluster


Font style

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

The 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

The 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

This example show how to show values using a

style, vector, statistic, chart, pie, text

Fill pattern style

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

style, vector, fill, pattern, hatch

Textpath style

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

style, vector, textpath, text, along


Feature animation

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

map, feature, animation, bounce, drop

Feature animation with select

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

This example animates deatures along a path.

map, feature, animation, path


A pulse function to pulse points on a map.

map, animation, pulse


Crop/mask filter

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

filter, crop, mask

Clip filter

Filter to clip a map or a layer.

filter, clip

Colorize filter

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

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

Texture filter

Filter to add texture effects on maps or layers.

filter, effect, texture

Composite filter

This filter apply a composite operation on layer drawing.

filter, effect, composite, color, canvas

Folding map

This filter creates a folding effect on the map.

filter, effect, fold, folding, map, canvas

Canvas controls

Canvas control

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.

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

control, canvas, compass

Graticule control.

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

control, canvas, graticule

Grid reference control.

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

control, canvas, grid, reference, index

Target control.

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

control, canvas, target


Transform interaction

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

interaction, transform, scale, translate, rotate, vector

An interaction to draw holes in polygons

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

interaction, draw, hole, polygon, donut

Split feature interaction

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

interaction, split, linestring

Splitter interaction

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

interaction, split, linestring

Draw regular interaction

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

interaction, regular, interaction, draw, circle, triangle

Hover interaction

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

interaction, hover, cursor

Snap guide interaction

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

interaction, sna, guide

Clip interaction

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

interaction, clip, circle, canvas

Dropfile interaction

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

interaction, drag, drop

Control bar

Control button

The ol.control.Button is simple control button.

control, button, toolbar

Control Toggle

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

control, button, toggle, toolbar

Control bar

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

control, bar, toolbar, button, panel

Control subbar

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

control, bar, subbar, toolbar, button, panel

Edit bar

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

control, edit, bar, toolbar, button, panel


Layer switcher control example

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

layerswitcher, control, jQuery

LayerSwitcher image

A simple layer switcher with image buttons.

layerswitcher, control, preview, jQuery

LayerSwitcher popup

A simple layer switcher as a menu.

layerswitcher, control, jQuery

Overlay menu

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

overlay, control, menu, jQuery

Overview map

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

overview, control

Geo bookmarks control

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

control, bookmark, place

Profil control

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

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

control, permalink

Swipe control

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

control, globe, overview

Globe control

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

control, swipe, overlay, split


Search bar

A generic search bar to search on the map.

search, control

Search feature

A search bar to search features on the map.

search, control, vector

Search places

A search bar to search places using the photon API.

search, control, photon, places, autocomplete



Show popup on a map with style.

popup, overlay, jQuery

Animated popup!

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

popup, overlay, animation, jQuery

Overlay control

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

popup, overlay, animation, jQuery

Layer / source

Hexbin maps

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

layer, hexbin, cluster, hexagon, binning, heatmap

Georeference images on a map

ol.source.GeoImage georeference images on a map.

layer, georeference, georeferencing, image, photo

Preview of a layer

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

layer, preview

BDpedia layer

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

layer, vector, wikipedia, dbpedia

Wikimedia Commons layer

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

layer, vector, wikipedia, wikimedia, commons


Draw feature using GPS

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

interaction, mobile, draw, GPS, location

Touch compass interaction

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

interaction, touch, drag, compass

Touch draw interaction

An interactioon for drawing feature geometry on a touch device.

interaction, touch, draw, vector

Long touch interaction

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

interaction, touch, long


Cardinal spline

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

Convex Hull

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

geom, polygon, convex hull, envelope

Cluster envelope

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

geom, polygon, convex hull, envelope



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

exif, tag, image, geojson

Thinker Bell animation

Add some magic on your maps.

interaction, Tinker Bell, sparkle, cursor

Magnify glass

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

Map in the cloud

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

control, effect, clouds, birds, animation

Lego map

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

filter, effect, lego, brick

Watter ripple

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

interaction, effect, animation, watter, ripple

Synchronize Maps

Synchronize maps and add an overlay to show mouse position.

synchronization, map, cursor

Synchronize Maps

Synchronize maps in different windows.

synchronization, map, window

Full map

Pirate map.

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

Layer 2.5/3D

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

layer, vector, 3D, buildings, animation

BDpedia photo map

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

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