Cool extensions for OpenLayers (ol).
-
For more information see the online API documentation.
More example for use in:
webpack
parcel
Angular
If you like this, you may like
ol-games
.
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 show how to show 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
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
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 use 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 show how to use a transparent style to let the features selectable when animated.
map, feature, animation, bounce, drop, select
This example animates deatures along a path.
map, feature, animation, path
Filter to crop or mask a map or a layer using an area (ol.feature).
filter, crop, mask
Filter to add color effects on maps or layers (hue, color, grayscale, enhance...).
filter, effect, color, hue, saturation, invert, grayscale
This filter apply a composite operation on layer drawing.
filter, effect, composite, color, canvas
This filter creates a folding effect on the map.
filter, effect, fold, folding, map, canvas
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
The ovelay 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.Profil is a control that draw a profil of a 3D lineString (with a XYZ or XYZM layout).
control, profil, 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, globe, overview
The ol.control.Swipe is a control that add a split screen to compare two map overlays.
control, globe, overview
The ol.control.Globe add a small globe on the map to display a position marker.
control, swipe, overlay, split
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
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
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
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
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
An isochrone control that use the French Geoportail API.
routing, isochrone, IGNF, Geoportail
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
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
The ovelay 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
A ol/source/DCI to display the French DFCI grid on a map as a layer.
source, dfci, grid, index
ol/source/Geoportail abd ol/layer/Geoportail handle french Geoportail layers and API key.
source, layer, geoprotail
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
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, triangulation
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
An interactioon for drawing feature geometry on a touch device.
interaction, touch, draw, vector
The LongTouch interaction is an interaction to handle a long touch event.
interaction, touch, long
An interactioon to display a popup when modifying a feature to remove a vertex on touch devices.
interaction, touch, modify, remove, 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.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
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
The ol/control/Imageline displays images on map as a line.
storymap, image, line, control
A usefull tool to make a GeoJSON file with all of the found GPS points in a list of images.
exif, tag, image, geojson
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.control.Cloud adds an animated clouds overlay over the map.
control, effect, clouds, birds, animation
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
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
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