ol-ext
Version:
A set of cool extensions for OpenLayers (ol) in node modules structure
1,273 lines (1,136 loc) • 81.3 kB
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ol-ext</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
<meta name="description" content="Cool extensions to use with Openlayers (ol)." />
<meta name="keywords" content="ol,extension,canvas,3D,animation,layer,selection,control,openlayers,popup" />
<link rel="stylesheet" href="examples/githubcorner.css" />
<meta name="twitter:image" content="https://raw.githubusercontent.com/Viglino/ol-ext/master/img/ol-ext.jpg" />
<meta name="twitter:site" content="@viglino" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="ol-ext: cool ol extensions" />
<meta name="twitter:description" content="ol-ext is a set of extensions, controls, interactions, popup to use with Openlayers (ol)." />
<meta property="og:image" content="https://raw.githubusercontent.com/Viglino/ol-ext/master/img/ol-ext.jpg" />
<meta property="og:site_name" content="ol-ext" />
<meta property="og:type" content="article" />
<meta property="og:title" content="ol-ext: cool ol extensions" />
<meta property="og:description" content="ol-ext is a set of extensions, controls, interactions, popup to use with Openlayers (ol)." />
<style>
div.icss-github-corner {
position: fixed;
right: 0;
top: 0;
background-color: #fff;
display: block;
width: 5.8em;
height: 6.5em;
box-shadow: 0 5px 10px rgba(0,0,0,.5);
transform: rotate(-7deg) skewX(7deg);
background-image: linear-gradient(55deg, rgba(0,0,0,.15), rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 35%, rgba(0,0,0,0.5) 45%);
transform-origin: 0 0;
z-index:10;
}
body {
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-size: 16px;
margin: 0.5em;
}
input:focus {
outline-width: 0;
}
a {
color: #337ab7;
text-decoration: none;
}
.navbar {
top:0; left: 0;
right: 0;
width:100%;
position: fixed;
z-index: 1;
background-color: #333;
color: #fff;
height: 4em;
overflow: hidden;
}
.navbar p {
display: inline-block;
margin: 0;
}
.navbar img {
height:1.5em;
vertical-align: middle;
}
.navbar h1 {
display: inline-block;
font-size:1.5em;
margin: 0.5em;
vertical-align: middle;
}
h2 {
clear:both;
margin:1em 0 0;
}
input[type="search"] {
font-size: 1em;
padding: .3em 1em;
border-radius: 1em;
border:0;
box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,.5),
1px 1px 2px 0px rgba(255,255,255,.5),
-1px -1px 2px 0px rgba(0,0,0,.5);
}
.container {
width:1170px;
max-width: 100%;
margin:auto;
}
.small, small {
font-size: 0.85em;
}
#examples {
margin-top:4em;
}
#examples > div > div {
box-sizing: border-box;
float: left;
padding: 0.5em;
width: 33.3333%;
}
@media (max-width: 1500px) {
#examples > div > div {
width: 50%;
}
}
@media (max-width: 900px) {
#examples > div > div {
width: 100%;
}
}
@media (max-width: 1000px) {
header h1 span {
display: none;
}
}
@media (max-width: 580px) {
.navbar {
height: 6.5em;
}
.navbar p {
display: block;
}
#examples {
margin-top: 7em;
}
.navbar .news {
position: absolute;
right: 2em;
top: .15em;
}
}
.example,
.desc {
background-color: #f5f5f5;
margin: 0;
overflow: auto;
padding: 10px;
height: 9em;
overflow: hidden;
}
.desc p {
max-width: 50em;
margin: .5em auto 1em;
display: block;
}
#examples > div.desc {
width:100%;
box-sizing: border-box;
}
.example {
position: relative;
}
.news,
.new:after {
position: absolute;
content: "NEW!";
background: yellow;
color: red;
right: -0.2em;
top: 0.2em;
padding: .5em;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
transform: rotate(10deg) scaleX(.7);
border-radius: 50%;
width: 2.8em;
height: 1.7em;
line-height: 1.8em;
text-align: center;
box-shadow: 0.1em 0.2em 0.5em 0.1em rgba(0,0,0,.5);
}
.news {
position: relative;
display: inline-block;
white-space: nowrap;
transform: rotate(10deg) scaleX(.5);
font-size: 1.5em;
height: 2.3em;
width: 4.5em;
line-height: 2.3em;
cursor: pointer;
right: 0;
z-index: 5;
text-align: center;
padding: 0;
}
.example:hover {
background-color: #ddd;
}
.example p.description {
font-size: 0.9em;
margin: 5px 0;
}
.example p.tag {
font-size: 0.8em;
color:#693;
margin: 0;
}
.example p.tag a {
cursor: pointer;
color: #693;
}
.example p.tag a:before {
content: ', '
}
.example p.tag a:first-child:before {
content: '';
}
.example img {
display:none;
margin:auto;
float:right;
width:180px;
}
.example .date {
float: right;
/** position date above image */
margin-right: -180px;
top: calc(-0.85em + -0.7em);
position: relative;
color: #337ab7;
cursor: pointer;
}
</style>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/** Add date next to title if available */
function addDate() {
const yearSelection = $("#year-selection");
const dates = [];
$(".example").each(function () {
const exampleDate = $(this).data('date') || '2017';
$(this).find(">:first-child").after(`<span class="date"><small>${exampleDate}</small></span>`);
$(this).find(".date").click(addToSearchInput);
/** add dates to dropdown */
const year = exampleDate.split('-')[0];
if (dates.indexOf(year) === -1) {
dates.push(year);
}
});
dates.sort(function(a, b){return b-a}).forEach(function (d) {
yearSelection.append(`<option value="${d}">Examples from ${d}</option>`);
});
}
function addToSearchInput() {
$('#keywords').val($(this).text()).change();
}
function search() {
$('#keywords').on('keyup change search', function () {
const s = new RegExp($(this).val(), "i");
let k = 0;
$(".example").each(function () {
const text = $(this).text();
const t = s.test(text);
if (!t) {
$(this).parent().hide();
} else {
k++;
$(this).parent().show();
}
});
$("h2").each(function () {
if ($(".example:visible", $(this).next()).length) $(this).show();
else $(this).hide();
});
$("#count").text("(" + k + ")");
// Set new url
window.history.replaceState(null, null, document.location.origin + document.location.pathname + "?q=" + $(this).val());
});
// Decode url
const search = window.location.search.replace(/^\?/, "").split("&");
for (let i = 0; i < search.length; i++) if (/^q=/.test(search[i])) {
$("#keywords").val(search[i].split("=")[1]).trigger("keyup");
}
}
/** Add tags on click to search */
function tagOnClick() {
$('.tag').each(function () {
const tags = $(this).text().split(',');
const div = $(this).html('');
tags.forEach(function (t) {
$('<a>').text(t.trim())
.click(addToSearchInput)
.appendTo(div);
})
})
}
/** Examples from the last 2 month */
function newExamples() {
const d = new Date((new Date()).getTime() - 2 * 31 * 24 * 60 * 60 * 1000);
let nb = 0;
$(".example[data-date]").each(function () {
if (new Date($(this).data('date')) > d) {
nb++;
$(this).addClass('new');
$(".tag", this).text($(".tag", this).text() + ', new');
}
});
if (nb) {
$('<span>').addClass('news')
.text(nb + ' NEWS')
.click(function () {
$('#keywords').val('new').change();
})
.appendTo($('.container'));
}
}
/** wrap .example's in div if the don't have a wrapper?? */
function wrapExamples() {
$(".example").wrap($("<div>"));
}
function appendExampleLinkToTitles() {
$(".example a.mainlink").each(function () {
let href = /[^\/]*$/.exec($(this).attr('href')).pop();
$("<small>").text("(" + href + ")")
.appendTo($(this));
$("<img>").attr('src', "img/" + href.replace('html', $(this).data('img') || 'jpg'))
.appendTo($(this))
.load(function (e) {
$(this).show();
})
});
}
$(document).ready(function() {
wrapExamples();
appendExampleLinkToTitles();
newExamples();
tagOnClick();
addDate();
search();
});
</script>
</head>
<body>
<div class='icss-github-corner'></div>
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
<header role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<h1><img src="https://openlayers.org/theme/img/logo-dark.svg"> ol-ext<span>:
Extensions for OpenLayers (ol)</span>
</h1>
<p>
<input type="search" placeholder="Search" class="search-query" id="keywords" name="q" list="year-selection">
<span id="count"></span>
<datalist id="year-selection">
</datalist>
</p>
</div>
</header>
<div id="examples">
<div class="desc" style="height: auto;">
<p>
Cool extensions for <a href="https://github.com/openlayers/openlayers">OpenLayers (ol)</a>.
-
For more information see the <a href="./doc/doc-pages/">online API documentation</a>.
<br/>
More example for use in:
<a href="https://github.com/darkscript/ol-ol-ext-webpack-example">
<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.svg" style="height:2em; vertical-align:middle;" />webpack
</a>
<a href="https://github.com/Viglino/ol-ext-parcel-bundler">
<img src="https://parceljs.org/parcel.fb905a63.png" style="height:2em; vertical-align:middle;" />parcel
</a>
<a href="https://github.com/Viglino/ol-ext-angular">
<img src="https://angular.io/assets/images/logos/angular/angular.svg" style="height:2em; vertical-align:middle;" />Angular
</a>
<br/>
If you like this, you may like <a href="https://viglino.github.io/ol-games/">
<img src="https://raw.githubusercontent.com/Viglino/ol-games/master/img/ol3-games.png" style="height:1.6em; vertical-align: middle;"> ol-games
</a>.
</p>
<p style="text-align: center;">
<a class="github-button" href="https://github.com/viglino/ol-ext" data-icon="octicon-star" data-show-count="true" aria-label="Star viglino/ol-ext on GitHub">Star</a>
<a class="github-button" href="https://github.com/viglino/ol-ext/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork viglino/ol-ext on GitHub">Fork</a>
<a class="github-button" href="https://github.com/viglino/ol-ext/issues" data-icon="octicon-issue-opened" data-show-count="true" aria-label="Issue viglino/ol-ext on GitHub">Issue</a>
<a class="github-button" href="https://github.com/viglino/ol-ext/subscription" data-icon="octicon-eye" data-show-count="true" aria-label="Watch viglino/ol-ext on GitHub">Watch</a>
<br/>
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-url="https://viglino.github.io/ol-ext/"
data-text="Awesome extensions for #Openlayers @jmviglino">
Tweet
</a>
<a class="github-button" href="https://github.com/viglino" data-show-count="true" aria-label="Follow @viglino on GitHub">@viglino</a>
<a class="github-button" href="https://github.com/viglino/ol-ext/archive/master.zip" data-icon="octicon-download" aria-label="Download viglino/ol-ext on GitHub">Download</a>
</p>
</div>
<h2>Styles</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.font.html">
<strong>Font style</strong><br>
</a>
<p class="description">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..</p>
<p class="tag">style, vector, font, fontawesome, icon, maki</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.photo.html">
<strong>Photo style</strong><br>
</a>
<p class="description">
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.
</p>
<p class="tag">style, vector, photo</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.chart.html">
<strong>Statistic charts style</strong><br>
</a>
<p class="description">
The ol.style.Chart is an image style to draw statistical graphics (bar, donut or pie charts) on a map.
</p>
<p class="tag">style, vector, statistic, chart, pie, donut, animation</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.chart+text.html">
<strong>Statistic charts style + values</strong><br>
</a>
<p class="description">
This example shows how to display values using a <i>ol.style.Chart</i>.
</p>
<p class="tag">style, vector, statistic, chart, pie, text</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.pattern.html">
<strong>Fill pattern style</strong><br>
</a>
<p class="description">
The ol.style.FillPattern is a fill style with a set of cartographic patterns to use in your maps.
</p>
<p class="tag">style, vector, fill, pattern, hatch</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.strokepattern.html">
<strong>Stroke pattern style</strong><br>
</a>
<p class="description">
The ol.style.StokePattern is a stroke style with a set of cartographic patterns to use in your maps.
</p>
<p class="tag">style, vector, stroke, pattern, hatch</p>
</div>
<div class="example" data-date="2019-02">
<a class="mainlink" href="examples/style/map.style.flowline.html">
<strong>FlowLine style</strong><br>
</a>
<p class="description">
The <i>ol.style.FlowLine</i> is a line style to draw LineString with variable colors and widths
to display flows or Sankey diagram on a map.
</p>
<p class="tag">style, vector, flow, color, sankey</p>
</div>
<div class="example" data-date="2020-10">
<a class="mainlink" href="examples/style/map.style.flowarrow.html">
<strong>Flow arrow style</strong><br>
</a>
<p class="description">
With the <i>ol.style.FlowLine</i> you can add arrows to draw Sankey maps.
</p>
<p class="tag">style, vector, flow, color, arrow, sankey</p>
</div>
<div class="example" data-date="2019-02-05">
<a class="mainlink" href="examples/style/map.style.gpxline.html">
<strong>FlowLine style</strong><br>
</a>
<p class="description">
This example displays a GPX track using a <i>ol.style.FlowLine</i> to symbolize
elevation along the line as a color.
</p>
<p class="tag">style, vector, flow, color, gpx</p>
</div>
<div class="example" data-date="2020-10-25">
<a class="mainlink" href="examples/style/map.style.profile.html">
<strong>Profile style</strong><br>
</a>
<p class="description">
<i>ol/style/Profile</i> is a style to draw line profiles on a map.
</p>
<p class="tag">style, vector, profile, 3D, gpx</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.textpath.html">
<strong>Textpath style</strong><br>
</a>
<p class="description">
The ol.vector.setTextPathStyle() is a function to draw text along a linear feature (ol.geom.lineString) on postcompose.
</p>
<p class="tag">style, vector, textpath, text, along</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.hashlines.html">
<strong>Hash lines style</strong><br>
</a>
<p class="description">
This example uses the <i>ol.geom.offsetCoords()</i> function to draw an offset line with a dash symbol.
</p>
<p class="tag">style, vector, hash, stroke, offset</p>
</div>
<div class="example">
<a class="mainlink" href="examples/style/map.style.scribblefill.html">
<strong>Scribble fill</strong><br>
</a>
<p class="description">
The <i>scribbleFill</i> function calculates a MultiPolyline to fill a Polygon
with a scribble effect that appear hand-made.
</p>
<p class="tag">style, vector, hatch, fill, scribble</p>
</div>
</div>
<h2>Animation</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/animation/map.animatedcluster.html" data-img='gif'>
<strong>Animated clusters</strong><br>
</a>
<p class="description"><i>ol.layer.AnimatedCluster</i> is a layer that animates clusters on zoom change.</p>
<p class="tag">map, layer, animation, cluster, animated</p>
</div>
<div class="example">
<a class="mainlink" href="examples/animation/map.featureanimation.html">
<strong>Feature animation</strong><br>
</a>
<p class="description"><i>ol.featureAnimation</i> provides animations to animate features on a map.</p>
<p class="tag">map, feature, animation, bounce, drop</p>
</div>
<div class="example">
<a class="mainlink" href="examples/animation/map.featureanimation.select.html">
<strong>Feature animation with select</strong><br>
</a>
<p class="description">This example shows how to use a transparent style to let the features selectable when animated.</p>
<p class="tag">map, feature, animation, bounce, drop, select</p>
</div>
<div class="example">
<a class="mainlink" href="examples/animation/map.featureanimation.path.html">
<strong>Animate features along a path</strong><br>
</a>
<p class="description">This example animates features along a path.</p>
<p class="tag">map, feature, animation, path</p>
</div>
<div class="example">
<a class="mainlink" href="examples/animation/map.pulse.html">
<strong>Pulse!</strong><br>
</a>
<p class="description">A pulse function to pulse points on a map.</p>
<p class="tag">map, animation, pulse</p>
</div>
</div>
<h2>Filter</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/filter/map.filter.crop.html">
<strong>Crop/mask filter</strong><br>
</a>
<p class="description">Filter to crop or mask a map or a layer using an area (ol.feature).</p>
<p class="tag">filter, crop, mask</p>
</div>
<div class="example">
<a class="mainlink" href="examples/filter/map.filter.clip.html">
<strong>Clip filter</strong><br>
</a>
<p class="description">Filter to clip a map or a layer.</p>
<p class="tag">filter, clip</p>
</div>
<div class="example">
<a class="mainlink" href="examples/filter/map.filter.colorize.html">
<strong>Colorize filter</strong><br>
</a>
<p class="description">Filter to add color effects on maps or layers (hue, color, grayscale, enhance...).</p>
<p class="tag">filter, effect, color, hue, saturation, invert, grayscale</p>
</div>
<div class="example">
<a class="mainlink" href="examples/filter/map.filter.texture.html">
<strong>Texture filter</strong><br>
</a>
<p class="description">Filter to add texture effects on maps or layers.</p>
<p class="tag">filter, effect, texture</p>
</div>
<div class="example">
<a class="mainlink" href="examples/filter/map.filter.composite.html">
<strong>Composite filter</strong><br>
</a>
<p class="description">This filter applies a composite operation on layer drawing.</p>
<p class="tag">filter, effect, composite, color, canvas</p>
</div>
<div class="example" data-date="2021-01-03">
<a class="mainlink" href="examples/filter/map.filter.canvasfilter.html">
<strong>Canvas filter</strong><br>
</a>
<p class="description">Apply canvas filter on layer drawing.</p>
<p class="tag">filter, effect, svg, blur, huerotate, canvas</p>
</div>
<div class="example" data-date="2021-08-01">
<a class="mainlink" href="examples/filter/map.filter.css.html">
<strong>Mix blend mode filter</strong><br>
</a>
<p class="description">Apply CSS filter on layers (mix-blend-mode).</p>
<p class="tag">filter, effect, ol6, blend</p>
</div>
<div class="example">
<a class="mainlink" href="examples/filter/map.filter.fold.html" data-img='png'>
<strong>Folding map</strong><br>
</a>
<p class="description">This filter creates a folding effect on the map.</p>
<p class="tag">filter, effect, fold, folding, map, canvas</p>
</div>
<div class="example" data-date="2021-01">
<a class="mainlink" href="examples/filter/map.filter.pencilsketch.html">
<strong>Pencil sketch filter</strong><br>
</a>
<p class="description">A filter to turn your maps into pencil sketchs.</p>
<p class="tag">filter, pencil, sketch, map, canvas</p>
</div>
<div class="example" data-date="2021-04">
<a class="mainlink" href="examples/filter/map.filter.edgedetection.html">
<strong>Edge detection filter</strong><br>
</a>
<p class="description">A set of filters to turn detect edges on map layers.</p>
<p class="tag">filter, SVG, map, canvas, Sobel, Roberts, Prewitt</p>
</div>
</div>
<h2>Controls</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/control/map.switcher.html">
<strong>Layer switcher control example</strong><br>
</a>
<p class="description">Example of a layer switcher control with visibility, opacity and ordering.</p>
<p class="tag">layer, switcher, control</p>
</div>
<div class="example" data-date="2019-01-15">
<a class="mainlink" href="examples/control/map.switcher.filter.html">
<strong>Switcher with layer filter option</strong><br>
</a>
<p class="description">Example of a layer switcher control with a filter to filter layers on names.</p>
<p class="tag">layer, switcher, control, filter</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.switcher.image.html">
<strong>LayerSwitcher image</strong><br>
</a>
<p class="description">A simple layer switcher with image buttons.</p>
<p class="tag">layerswitcher, control, preview</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.switcher.popup.html">
<strong>LayerSwitcher popup</strong><br>
</a>
<p class="description">A simple layer switcher as a menu.</p>
<p class="tag">layerswitcher, control</p>
</div>
<div class="example" data-date="2023-01-23">
<a class="mainlink" href="examples/control/map.switcher.shop.html">
<strong>Layer shop</strong><br>
</a>
<p class="description">A layer switcher integrating bars to handle layer properties and buttons.</p>
<p class="tag">layerswitcher, shop, control</p>
</div>
<div class="example" data-date="2020-10-21">
<a class="mainlink" href="examples/layer/map.wmscapabilities.html">
<strong>WMS Capabilities control</strong><br>
</a>
<p class="description">A control to help adding WMS on your maps.</p>
<p class="tag">map, control, layer, WMS, capabilities, getCapabilities</p>
</div>
<div class="example" data-date="2021-08-01">
<a class="mainlink" href="examples/layer/map.wmtscapabilities.html">
<strong>WMTS Capabilities control</strong><br>
</a>
<p class="description">A control to help adding WMTS on your maps.</p>
<p class="tag">map, control, layer, WMTS, capabilities, getCapabilities</p>
</div>
<div class="example" data-date="2019-02-09">
<a class="mainlink" href="examples/control/map.control.mapzone.html">
<strong>MapZone control</strong><br>
</a>
<p class="description">A control to jump from a map zone to another.</p>
<p class="tag">map, control, zone, locate</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.overlay.menu.html">
<strong>Overlay menu</strong><br>
</a>
<p class="description">The overlay control can be used to display a menu on to of the map.</p>
<p class="tag">overlay, control, menu</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.overview.html">
<strong>Overview map</strong><br>
</a>
<p class="description">An overview map with zoom limit and custom styles. Click on the overview will center the map.</p>
<p class="tag">overview, control</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.geobookmark.html">
<strong>Geo bookmarks control</strong><br>
</a>
<p class="description"><i>ol.control.GeoBookmark</i> adds a control to handle geo bookmarks, ie. save places.</p>
<p class="tag">control, bookmark, place</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.profile.html">
<strong>Profile control</strong><br>
</a>
<p class="description"><i>ol.control.Profile</i> is a control that draw a profile of a 3D lineString (with a XYZ or XYZM layout).</p>
<p class="tag">control, profile, Z, altitude, GPX, GPS</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.permalink.html">
<strong>Permalink control</strong><br>
</a>
<p class="description">The <i>ol.control.Permalink</i> is hyperlink that will return the user to the current map view.</p>
<p class="tag">control, permalink</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.swipe.html">
<strong>Swipe control</strong><br>
</a>
<p class="description">The <i>ol.control.Swipe</i> is a control that add a split screen to compare two map overlays. </p>
<p class="tag">control, swipe, compare</p>
</div>
<div class="example" data-date="2022-10-22">
<a class="mainlink" href="examples/misc/map.compare.html">
<strong>Compare map</strong><br>
</a>
<p class="description">Swipe control and clip interaction to compare two maps.</p>
<p class="tag">map, compare, swipe, clip</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.notification.html" data-img="gif">
<strong>Notification control</strong><br>
</a>
<p class="description">The <i>ol.control.Notification</i> lets you show notification on the map. </p>
<p class="tag">map, control, notification</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.globe.html">
<strong>Globe control</strong><br>
</a>
<p class="description">The <i>ol.control.Globe</i> add a small globe on the map to display a position marker. </p>
<p class="tag">control, swipe, overlay, split</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.gauge.html">
<strong>Gauge control</strong><br>
</a>
<p class="description">The <i>ol.control.Gauge</i> add a gauge on the map. </p>
<p class="tag">control, gauge</p>
</div>
<div class="example" data-date="2019-07-22">
<a class="mainlink" href="examples/control/map.control.scale.html">
<strong>Scale control</strong><br>
</a>
<p class="description"><i>ol.control.Scale</i> displays the current scale in a control on the map.</p>
<p class="tag">control, scale</p>
</div>
<div class="example" data-date="2023-11-28">
<a class="mainlink" href="examples/control/map.control.featurelist.html">
<strong>FeatureList control</strong><br>
</a>
<p class="description"><i>ol/control/FeatureList</i> displays a list of features attributes in a list.</p>
<p class="tag">control, list, table</p>
</div>
</div>
<h2>Control bar</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/bar/map.control.button.html">
<strong>Control button</strong><br>
</a>
<p class="description">The <i>ol.control.Button</i> is simple control button.</p>
<p class="tag">control, button, toolbar</p>
</div>
<div class="example">
<a class="mainlink" href="examples/bar/map.control.toggle.html">
<strong>Control Toggle</strong><br>
</a>
<p class="description"><i>ol.control.Toggle</i> is an <i>ol.control.Button</i> with an active/deactive state. </p>
<p class="tag">control, button, toggle, toolbar</p>
</div>
<div class="example">
<a class="mainlink" href="examples/bar/map.control.bar.html">
<strong>Control bar</strong><br>
</a>
<p class="description">The <i>ol.control.Bar</i> is a panel that contains other controls. You can compose toolbars with it.</p>
<p class="tag">control, bar, toolbar, button, panel</p>
</div>
<div class="example">
<a class="mainlink" href="examples/bar/map.control.subbar.html">
<strong>Control subbar</strong><br>
</a>
<p class="description"><i>ol.control.Bar</i> an be bested using an ol.control.Toggle to add subbar.</p>
<p class="tag">control, bar, subbar, toolbar, button, panel</p>
</div>
<div class="example">
<a class="mainlink" href="examples/bar/map.control.editionbar.html">
<strong>Edition bar</strong><br>
</a>
<p class="description">An example of <i>ol.control.Bar</i> to handle an edit toolbar.</p>
<p class="tag">control, edit, bar, toolbar, button, panel</p>
</div>
</div>
<h2>Canvas controls</h2>
<div>
<div class="example" data-date="2019-04-01">
<a class="mainlink" href="examples/canvas/map.control.print.html">
<strong>Print control</strong><br>
</a>
<p class="description">A control to print the map.</p>
<p class="tag">control, canvas, print, map, export</p>
</div>
<div class="example" data-date="2021-05">
<a class="mainlink" href="examples/canvas/map.control.printdialog.html">
<strong>Print dialog control</strong><br>
</a>
<p class="description">Add a dialog to print the map.</p>
<p class="tag">control, canvas, print, map, export, dialog</p>
</div>
<div class="example">
<a class="mainlink" href="examples/canvas/map.canvas.control.html">
<strong>Canvas control</strong><br>
</a>
<p class="description">Example of canvas controls, ie. controls that are drawn on the canvas to use with export (jpeg/png) functions.</p>
<p class="tag">control, canvas, scale line, attribution, title, export</p>
</div>
<div class="example">
<a class="mainlink" href="examples/canvas/map.control.compass.html">
<strong>Compass control.</strong><br>
</a>
<p class="description">The <i>ol.control.Compass </i> draw a compass on the map.</p>
<p class="tag">control, canvas, compass</p>
</div>
<div class="example">
<a class="mainlink" href="examples/canvas/map.control.graticule.html">
<strong>Graticule control.</strong><br>
</a>
<p class="description">The <i>ol.control.Graticule </i> draw a graticule and coordinate labels on the map.</p>
<p class="tag">control, canvas, graticule</p>
</div>
<div class="example">
<a class="mainlink" href="examples/canvas/map.control.gridreference.html">
<strong>Grid reference control.</strong><br>
</a>
<p class="description">The <i>ol.control.GridReference</i> display a grid reference on the map associated with an index map.</p>
<p class="tag">control, canvas, grid, reference, index</p>
</div>
<div class="example">
<a class="mainlink" href="examples/canvas/map.target.control.html">
<strong>Target control.</strong><br>
</a>
<p class="description">The <i>ol.control.Target </i> draw a target to materialize the center of the map.</p>
<p class="tag">control, canvas, target</p>
</div>
</div>
<h2>Interactions</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.transform.html">
<strong>Transform interaction</strong><br>
</a>
<p class="description">The <i>ol.interaction.Transform</i> is an interaction to transform features (scale, translate, rotate).</p>
<p class="tag">interaction, transform, scale, translate, rotate, vector</p>
</div>
<div class="example" data-date="2019-05-24">
<a class="mainlink" href="examples/interaction/map.interaction.copypaste.html">
<strong>An interaction to copy / paste features on the map</strong><br>
</a>
<p class="description"><i>ol.interaction.CopyPaste</i> is an interaction to copy, cut, paste features.</p>
<p class="tag">interaction, feature, copy, cut, paste</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.drawhole.html">
<strong>An interaction to draw holes in polygons</strong><br>
</a>
<p class="description"><i>ol.interaction.DrawHole</i> is an interaction to draw holes in poglygon features.</p>
<p class="tag">interaction, draw, hole, polygon, donut</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.split.html">
<strong>Split feature interaction</strong><br>
</a>
<p class="description"><i>ol.interaction.Split</i> is an interaction to split feature geometry (ol.geom.LineString).</p>
<p class="tag">interaction, split, linestring</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.splitter.html">
<strong>Splitter interaction</strong><br>
</a>
<p class="description">An interaction that acts as a split feature agent while editing vector features (LineString). </p>
<p class="tag">interaction, split, linestring</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.modifyfeature.html">
<strong>Modify feature</strong><br>
</a>
<p class="description">A modify interaction that support undo/redo.</p>
<p class="tag">interaction, modify, undo</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.drawregular.html">
<strong>Draw regular interaction</strong><br>
</a>
<p class="description"><i>ol.interaction.DrawRegular</i> is an interaction to draw regular polygon (circle/ellipse, triangle, square/rectangles, etc).</p>
<p class="tag">interaction, regular, interaction, draw, circle, triangle</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.offset.html">
<strong>Offset interaction</strong><br>
</a>
<p class="description">An interaction to offset the feature geometry.</p>
<p class="tag">interaction, vector, transform, offset</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.hover.html">
<strong>Hover interaction</strong><br>
</a>
<p class="description">An interaction to do something when hovering a feature (change cursor, show a popup, display information, etc.)</p>
<p class="tag">interaction, hover, cursor</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.snapguides.html">
<strong>Snap guide interaction</strong><br>
</a>
<p class="description"><i>ol.interaction.SnapGuide</i> handles snapping of vector features using guides lines while modifying or drawing them.</p>
<p class="tag">interaction, sna, guide</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.interaction.clip.html">
<strong>Clip interaction</strong><br>
</a>
<p class="description"><i>ol.interaction.Clip</i> clip layers by a circle on the map.</p>
<p class="tag">interaction, clip, circle, canvas</p>
</div>
<div class="example">
<a class="mainlink" href="examples/interaction/map.ddrop.html">
<strong>Dropfile interaction</strong><br>
</a>
<p class="description"><i>ol.interaction.DropFile</i> is a drag and drop interaction. It fires a loadstart and loadend and errors.</p>
<p class="tag">interaction, drag, drop</p>
</div>
<div class="example" data-date="2018-12-10">
<a class="mainlink" href="examples/interaction/map.interaction.dragoverlay.html">
<strong>Drag overlays interaction</strong><br>
</a>
<p class="description"><i>ol.interaction.DraOverlay</i> is an interaction to drag overlays on the map.</p>
<p class="tag">interaction, drag, popup, placemark, overlay</p>
</div>
</div>
<h2>Undo/redo interaction</h2>
<div>
<div class="example" data-date="2018-12">
<a class="mainlink" href="examples/interaction/map.interaction.undoredo.html">
<strong>Undo/redo interaction</strong><br>
</a>
<p class="description"><i>ol/interaction/UndoRedo</i> is an interaction to handle undo/redo on a map.</p>
<p class="tag">interaction, undo, redo</p>
</div>
</div>
<div>
<div class="example" data-date="2019-01">
<a class="mainlink" href="examples/interaction/map.interaction.undoredo2.html">
<strong>Undo/redo attributes</strong><br>
</a>
<p class="description"><i>ol/interaction/FillAttribute</i> is a cancelable interaction to modify attributes.</p>
<p class="tag">interaction, undo, redo, attributes</p>
</div>
</div>
<div>
<div class="example" data-date="2019-02-23">
<a class="mainlink" href="examples/interaction/map.interaction.undocustom.html">
<strong>Undo/redo custom action</strong><br>
</a>
<p class="description">This example shows how to define action with <i>ol/interaction/UndoRedo</i>.</p>
<p class="tag">interaction, undo, redo, custom, action</p>
</div>
</div>
<h2>Legend</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/legend/map.control.legend.html">
<strong>Legend control</strong><br>
</a>
<p class="description"><i>ol.control.Legend</i> is a control to display a legend on a map.</p>
<p class="tag">style, legend, features, control</p>
</div>
<div class="example">
<a class="mainlink" href="examples/legend/map.control.legendstat.html">
<strong>Legend control</strong><br>
</a>
<p class="description">An example to display a <i>ol.control.Legend</i> in a statistical map.</p>
<p class="tag">style, legend, features, control</p>
</div>
<div class="example">
<a class="mainlink" href="examples/legend/map.control.legends.html">
<strong>Multi Legend control</strong><br>
</a>
<p class="description">An example to display a <i>ol.control.Legend</i> with 2 columns.</p>
<p class="tag">style, legend, features, control</p>
</div>
<div class="example" data-date="2022-10-25">
<a class="mainlink" href="examples/legend/map.control.legend.image.html">
<strong>Legend with an image</strong><br>
</a>
<p class="description">Legend items can use <i>ol/legend/Image</i> to display an image as legend.</p>
<p class="tag">style, legend, image, control</p>
</div>
<div class="example" data-date="2022-10-25">
<a class="mainlink" href="examples/legend/map.control.legend.layer.html" data-img="gif">
<strong>Layer legend</strong><br>
</a>
<p class="description">Legends can be associated with a layer and displayed when the layer is visible only.</p>
<p class="tag">style, legend, layer, control</p>
</div>
</div>
<h2>Search</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.search.html">
<strong>Search bar</strong><br>
</a>
<p class="description">A generic search bar to search on the map.</p>
<p class="tag">search, control</p>
</div>
<div class="example" data-date="2019-01-15">
<a class="mainlink" href="examples/search/map.control.searchgps.html">
<strong>Search GPS</strong><br>
</a>
<p class="description">A search control to get lon/lat from user.</p>
<p class="tag">search, control, GPS, longitude, latitude</p>
</div>
<div class="example" data-date="2024-06-21">
<a class="mainlink" href="examples/search/map.control.searchcoord.html">
<strong>Search coordinates</strong><br>
</a>
<p class="description">A search control to search place by coordinates.</p>
<p class="tag">search, control, coordinate, projection</p>
</div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.searchfeature.html">
<strong>Search feature</strong><br>
</a>
<p class="description">A search bar to search features on the map.</p>
<p class="tag">search, control, vector</p>
</div>
<div class="example" data-date="2019-03-02">
<a class="mainlink" href="examples/search/map.control.searchpedia.html">
<strong>Search WikiPedia feature</strong><br>
</a>
<p class="description">A search control to search features in WikiPedia.</p>
<p class="tag">search, control, vector, wikipedia, mediawiki</p>
</div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.searchnominatim.html">
<strong>Search places with Nominatim</strong><br>
</a>
<p class="description">A search bar to search places using the <a href="https://wiki.openstreetmap.org/wiki/Nominatim">OSM Nominatim</a>.</p>
<p class="tag">search, control, OSM, nominatim, places, autocomplete</p>
</div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.searchphoton.html">
<strong>Search places with Photon</strong><br>
</a>
<p class="description">A search bar to search places using the <a href="http://photon.komoot.de/">photon API</a>.</p>
<p class="tag">search, control, OSM, photon, places, autocomplete</p>
</div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.searchban.html">
<strong>Search French places</strong><br>
</a>
<p class="description">A search bar to search French places using the
<a href="https://adresse.data.gouv.fr/">French National Address Base (BAN) API</a>.
</p>
<p class="tag">search, control, BAN, french, places, autocomplete</p>
</div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.searchgeoportail.html">
<strong>Search Géoportail</strong><br>
</a>
<p class="description">A search bar to search French places using the
<a href="https://geoservices.ign.fr/documentation/services-acces.html">Géoportail API</a>.
</p>
<p class="tag">search, control, Geoportail, french, places, autocomplete</p>
</div>
<div class="example">
<a class="mainlink" href="examples/search/map.control.searchgeoportailparcelle.html">
<strong>Search French cadastral parcels</strong><br>
</a>
<p class="description">A search bar to search French cadastral parcels using the
<a href="https://geoservices.ign.fr/documentation/services-acces.html">Géoportail API</a>.
</p>
<p class="tag">search, control, Geoportail, french, parcel, autocomplete</p>
</div>
</div>
<h2>Select controls</h2>
<div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.select.html">
<strong>Select control</strong><br>
</a>
<p class="description"><i>ol.control.Select</i> is a control to select features by attributes in a source.</p>
<p class="tag">search, select, features, control</p>
</div>
<div class="example">
<a class="mainlink" href="examples/control/map.control.selectmulti.html" data-date="2019-03-13">
<strong>Multi-select control</strong><br>
</a>
<p class="description"><i>ol.control.SelectMulti</i> is a control container that manage other Select control.</p>
<p class="tag">search, select, features, control</p>
</div>
</div>
<h2>Routing</h2>
<div>
<div class="example" data-date="2018-11">
<a class="mainlink" href="examples/routing/map.source.dijkstra.html">
<strong>Dijkstra short path</strong><br>
</a>
<p class="description">Use Dijkstra's algorithm on a vector layer.</p>
<p class="tag">routing, graph, algo, dijkstra, A*, short path</p>
</div>
<div class="example" data-date="2019-02">
<a class="mainlink" href="examples/routing/map.control.routing.html">
<strong>Geoportail routing</strong><br>
</a>
<p class="description">A routing control that use the French Geoportail API.</p>
<p class="tag">routing, IGNF, Geoportail</p>
</div>
<div class="example" data-date="2019-02">
<a class="mainlink" href="examples/routing/map.control.isochrone.html">
<strong>Geoportail isochrone</strong><br>
</a>
<p class="description">An isochrone control that use the French Geoportail API.</p>
<p class="tag">routing, i