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

If you like this, you may like OL3-AnimatedCluster

Styles

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 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

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

Fill pattern style

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

style, vector, fill, pattern, hatch

Animation

Pulse!

A pulse function to pulse points on a map.

map, animation, pulse

Filter

Crop/mask filter

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

filter, crop, mask

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

Canvas

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

Pirate map.

The ol.control.PirateMap adds an old map effect on a canvas renderer. It colors the map, adds a parchment texture and compass onto the map.

control, canvas, pirate, compass, effect

Target control.

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

control, canvas, target

Interactions

Transform interaction

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

interaction, transform, scale, translate, rotate, vector

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

Controls

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

Overview map

An overview map with zoom limit and custom styles.

overview, control

Control bar

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

control, bar, toolbar, panel

Popup

Popup!

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

Layer / source

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

Miscancellous

Flashlight!

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.

interaction, effect, clouds, birds, animation

Watter ripple

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

interaction, effect, animation, watter

Synchronize Maps

Synchronize maps in different windows.

synchronization, map

Full map

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