Merge pull request #13996 from MoonE/bootstrap-5
Update to bootstrap 5.2
This commit is contained in:
MoonE
GitHub
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -46,7 +46,7 @@
|
|||||||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
|
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
|
||||||
</div>
|
</div>
|
||||||
<?js if (doc.classdesc) { ?>
|
<?js if (doc.classdesc) { ?>
|
||||||
<div class="class-description col-lg-7 align-self-center pl-0"><?js= doc.classdesc ?></div>
|
<div class="class-description col-lg-7 align-self-center ps-0"><?js= doc.classdesc ?></div>
|
||||||
<?js } ?>
|
<?js } ?>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -4,13 +4,13 @@ var version = obj.packageInfo.version;
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
|
<title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
|
||||||
<script src="scripts/prettify/prettify.js"></script>
|
<script src="scripts/prettify/prettify.js"></script>
|
||||||
<script src="scripts/prettify/lang-css.js"></script>
|
<script src="scripts/prettify/lang-css.js"></script>
|
||||||
<script src="scripts/jquery.min.js"></script>
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
|
||||||
<script src="scripts/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
@@ -21,42 +21,42 @@ var version = obj.packageInfo.version;
|
|||||||
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container-fluid">
|
<header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
<!-- menu items that get hidden below 768px width -->
|
||||||
<span class="navbar-toggler-icon"></span>
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
</button>
|
<ul class="navbar-nav ms-auto">
|
||||||
|
|
||||||
<!-- menu items that get hidden below 768px width -->
|
|
||||||
<nav class="collapse navbar-collapse" id="olmenu">
|
|
||||||
<ul class="navbar-nav ml-auto">
|
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="docdropdown">
|
||||||
<a class="dropdown-item" href="/doc/">Docs</a>
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
|
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
|
||||||
<li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
<li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="codedropdown">
|
||||||
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
<div id="wrap" class="row">
|
<div id="wrap" class="row">
|
||||||
<div class="navigation col-md-4 col-lg-3">
|
<div class="navigation col-md-4 col-lg-3">
|
||||||
<div class="search-wrapper">
|
<div class="search-wrapper">
|
||||||
@@ -80,17 +80,17 @@ var version = obj.packageInfo.version;
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main col-md-8 col-lg-9">
|
<div class="main col-md-8 col-lg-9">
|
||||||
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
|
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
|
||||||
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||||||
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
<button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||||||
</div>
|
</div>
|
||||||
<?js= content ?>
|
<?js= content ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>prettyPrint();</script>
|
|
||||||
<script src="scripts/linenumber.js"></script>
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
</div>
|
</div>
|
||||||
|
<script>prettyPrint();</script>
|
||||||
|
<script src="scripts/linenumber.js"></script>
|
||||||
|
<script src="scripts/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ function listContent(item, title, listItemPrinter) {
|
|||||||
} ?>
|
} ?>
|
||||||
<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
|
<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
|
||||||
<span class="title toggle">
|
<span class="title toggle">
|
||||||
<span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
|
<span class="fa <?js= getItemCssClass(item.type) ?> me-2 mt-1"></span>
|
||||||
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
|
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
|
||||||
</span><?js
|
</span><?js
|
||||||
listContent(item, 'Members', printListItem);
|
listContent(item, 'Members', printListItem);
|
||||||
|
|||||||
+3
-2
@@ -2,14 +2,15 @@
|
|||||||
"globals": {
|
"globals": {
|
||||||
"$": false,
|
"$": false,
|
||||||
"arc": false,
|
"arc": false,
|
||||||
"common": false,
|
"bootstrap": false,
|
||||||
"chroma": false,
|
"chroma": false,
|
||||||
|
"common": false,
|
||||||
"createMapboxStreetsV6Style": false,
|
"createMapboxStreetsV6Style": false,
|
||||||
"d3": false,
|
"d3": false,
|
||||||
"html2canvas": false,
|
|
||||||
"geojsonvt": false,
|
"geojsonvt": false,
|
||||||
"gifler": false,
|
"gifler": false,
|
||||||
"GyroNorm": false,
|
"GyroNorm": false,
|
||||||
|
"html2canvas": false,
|
||||||
"jspdf": false,
|
"jspdf": false,
|
||||||
"jsts": false,
|
"jsts": false,
|
||||||
"JSZip": false,
|
"JSZip": false,
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
.tooltip-inner {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
@@ -3,12 +3,11 @@ layout: example.html
|
|||||||
title: Custom Tooltips
|
title: Custom Tooltips
|
||||||
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
|
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/components/tooltips/">Bootstrap</a>.
|
This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/5.2/components/tooltips/">Bootstrap</a>.
|
||||||
For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
|
For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
|
||||||
tags: "custom, tooltip"
|
tags: "custom, tooltip"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -17,11 +17,10 @@ const map = new Map({
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.ol-zoom-in, .ol-zoom-out').tooltip({
|
document
|
||||||
placement: 'right',
|
.querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
|
||||||
container: '#map',
|
.forEach(function (el) {
|
||||||
});
|
new bootstrap.Tooltip(el, {
|
||||||
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
|
container: '#map',
|
||||||
placement: 'left',
|
});
|
||||||
container: '#map',
|
});
|
||||||
});
|
|
||||||
|
|||||||
+16
-17
@@ -5,22 +5,21 @@ shortdesc: Example of a cartodb map.
|
|||||||
docs: >
|
docs: >
|
||||||
A simple example with an anonymous cartodb map
|
A simple example with an anonymous cartodb map
|
||||||
tags: "simple, openstreetmap, attribution"
|
tags: "simple, openstreetmap, attribution"
|
||||||
|
resources:
|
||||||
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<form class="row">
|
||||||
<div id="map" class="map"></div>
|
<div class="col-auto">
|
||||||
<div>
|
<div class="input-group">
|
||||||
<form class="form-horizontal">
|
<label for="country-area" class="input-group-text">Show european countries larger than</label>
|
||||||
<label>
|
<select id="country-area" class="form-select">
|
||||||
Show countries larger than
|
<option value="0" default>0 ㎢</option>
|
||||||
<select id="country-area" class="form-control">
|
<option value="5000">5000 ㎢</option>
|
||||||
<option value="0" default>0 ㎢</option>
|
<option value="10000">10000 ㎢</option>
|
||||||
<option value="5000">5000 ㎢</option>
|
<option value="50000">50000 ㎢</option>
|
||||||
<option value="10000">10000 ㎢</option>
|
<option value="100000">100000 ㎢</option>
|
||||||
<option value="50000">50000 ㎢</option>
|
</select>
|
||||||
<option value="100000">100000 ㎢</option>
|
</div>
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ docs: >
|
|||||||
tags: "smooth, smoothing, chaikin"
|
tags: "smooth, smoothing, chaikin"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="shall-smoothen">Smooth drawn geometry?</label>
|
<label for="shall-smoothen">Smooth drawn geometry?</label>
|
||||||
<input id="shall-smoothen" type="checkbox" checked><br>
|
<input id="shall-smoothen" type="checkbox" checked><br>
|
||||||
<label for="iterations">Number of smoothings</label>
|
<label for="iterations">Number of smoothings</label>
|
||||||
|
|||||||
@@ -5,19 +5,21 @@ shortdesc: Example of using ol/source/Cluster.
|
|||||||
docs: >
|
docs: >
|
||||||
This example shows how to do clustering on point features.
|
This example shows how to do clustering on point features.
|
||||||
tags: "cluster, vector"
|
tags: "cluster, vector"
|
||||||
|
resources:
|
||||||
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form>
|
<form>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="distance" class="col-form-label">Cluster distance</label>
|
<label for="distance" class="col-form-label pb-0">Cluster distance</label>
|
||||||
<input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
|
<input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
|
||||||
<small class="form-text text-muted">
|
<small class="form-text text-muted">
|
||||||
The distance within which features will be clustered together.
|
The distance within which features will be clustered together.
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="min-distance" class="col-form-label">Minimum distance</label>
|
<label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
|
||||||
<input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
|
<input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
|
||||||
<small class="form-text text-muted">
|
<small class="form-text text-muted">
|
||||||
The minimum distance between clusters. Can't be larger than the configured distance.
|
The minimum distance between clusters. Can't be larger than the configured distance.
|
||||||
</small>
|
</small>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ docs: >
|
|||||||
tags: "draw, edit, modify, vector, featureoverlay"
|
tags: "draw, edit, modify, vector, featureoverlay"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Geometry type </label>
|
<label for="type">Geometry type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="Point">Point</option>
|
<option value="Point">Point</option>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ docs: >
|
|||||||
tags: "draw, edit, modify, vector, circle, sphere, geodesic"
|
tags: "draw, edit, modify, vector, circle, sphere, geodesic"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Geometry type </label>
|
<label for="type">Geometry type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="Point">Point</option>
|
<option value="Point">Point</option>
|
||||||
|
|||||||
+17
-11
@@ -8,16 +8,22 @@ docs: >
|
|||||||
point. To activate freehand drawing for lines, polygons, and circles, hold
|
point. To activate freehand drawing for lines, polygons, and circles, hold
|
||||||
the `Shift` key. To remove the last point of a line or polygon, press "Undo".
|
the `Shift` key. To remove the last point of a line or polygon, press "Undo".
|
||||||
tags: "draw, edit, freehand, vector"
|
tags: "draw, edit, freehand, vector"
|
||||||
|
resources:
|
||||||
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<div class="row">
|
||||||
<label for="type">Geometry type: </label>
|
<div class="col-auto">
|
||||||
<select class="form-control mr-2 mb-2 mt-2" id="type">
|
<span class="input-group">
|
||||||
<option value="Point">Point</option>
|
<label class="input-group-text" for="type">Geometry type:</label>
|
||||||
<option value="LineString">LineString</option>
|
<select class="form-select" id="type">
|
||||||
<option value="Polygon">Polygon</option>
|
<option value="Point">Point</option>
|
||||||
<option value="Circle">Circle</option>
|
<option value="LineString">LineString</option>
|
||||||
<option value="None">None</option>
|
<option value="Polygon">Polygon</option>
|
||||||
</select>
|
<option value="Circle">Circle</option>
|
||||||
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
|
<option value="None">None</option>
|
||||||
</form>
|
</select>
|
||||||
|
<input class="form-control" type="button" value="Undo" id="undo">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ docs: >
|
|||||||
tags: "draw, edit, freehand, vector"
|
tags: "draw, edit, freehand, vector"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Geometry type </label>
|
<label for="type">Geometry type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="LineString">LineString</option>
|
<option value="LineString">LineString</option>
|
||||||
|
|||||||
+17
-11
@@ -12,16 +12,22 @@ docs: >
|
|||||||
circle. Star drawing uses a custom geometry function that converts a circle
|
circle. Star drawing uses a custom geometry function that converts a circle
|
||||||
into a star using the center and radius provided by the draw interaction.
|
into a star using the center and radius provided by the draw interaction.
|
||||||
tags: "draw, edit, freehand, vector"
|
tags: "draw, edit, freehand, vector"
|
||||||
|
resources:
|
||||||
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<div class="row">
|
||||||
<label for="type">Shape type: </label>
|
<div class="col-auto">
|
||||||
<select class="form-control mr-2 mb-2 mt-2" id="type">
|
<span class="input-group">
|
||||||
<option value="Circle">Circle</option>
|
<label class="input-group-text" for="type">Shape type:</label>
|
||||||
<option value="Square">Square</option>
|
<select class="form-select" id="type">
|
||||||
<option value="Box">Box</option>
|
<option value="Circle">Circle</option>
|
||||||
<option value="Star">Star</option>
|
<option value="Square">Square</option>
|
||||||
<option value="None">None</option>
|
<option value="Box">Box</option>
|
||||||
</select>
|
<option value="Star">Star</option>
|
||||||
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
|
<option value="None">None</option>
|
||||||
</form>
|
</select>
|
||||||
|
<input class="form-control" type="button" value="Undo" id="undo">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -6,10 +6,10 @@ docs: >
|
|||||||
Example of exporting a map as a PNG image.
|
Example of exporting a map as a PNG image.
|
||||||
tags: "export, png, openstreetmap"
|
tags: "export, png, openstreetmap"
|
||||||
resources:
|
resources:
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css
|
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css
|
||||||
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
|
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
|
<a id="export-png" class="btn btn-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
|
||||||
<a id="image-download" download="map.png"></a>
|
<a id="image-download" download="map.png"></a>
|
||||||
|
|||||||
@@ -8,9 +8,8 @@ docs: >
|
|||||||
not geographic).
|
not geographic).
|
||||||
tags: "geographic"
|
tags: "geographic"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map">
|
<div id="map" class="map">
|
||||||
<div id="popup"></div>
|
<div id="popup"></div>
|
||||||
|
|||||||
+25
-24
@@ -36,9 +36,7 @@ const element = document.getElementById('popup');
|
|||||||
|
|
||||||
const popup = new Overlay({
|
const popup = new Overlay({
|
||||||
element: element,
|
element: element,
|
||||||
positioning: 'bottom-center',
|
|
||||||
stopEvent: false,
|
stopEvent: false,
|
||||||
offset: [0, -10],
|
|
||||||
});
|
});
|
||||||
map.addOverlay(popup);
|
map.addOverlay(popup);
|
||||||
|
|
||||||
@@ -59,31 +57,34 @@ map.on('moveend', function () {
|
|||||||
info.innerHTML = formatCoordinate(center);
|
info.innerHTML = formatCoordinate(center);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let popover;
|
||||||
map.on('click', function (event) {
|
map.on('click', function (event) {
|
||||||
$(element).popover('dispose');
|
if (popover) {
|
||||||
|
popover.dispose();
|
||||||
const feature = map.getFeaturesAtPixel(event.pixel)[0];
|
popover = undefined;
|
||||||
if (feature) {
|
|
||||||
const coordinate = feature.getGeometry().getCoordinates();
|
|
||||||
popup.setPosition([
|
|
||||||
coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
|
|
||||||
coordinate[1],
|
|
||||||
]);
|
|
||||||
$(element).popover({
|
|
||||||
container: element.parentElement,
|
|
||||||
html: true,
|
|
||||||
sanitize: false,
|
|
||||||
content: formatCoordinate(coordinate),
|
|
||||||
placement: 'top',
|
|
||||||
});
|
|
||||||
$(element).popover('show');
|
|
||||||
}
|
}
|
||||||
|
const feature = map.getFeaturesAtPixel(event.pixel)[0];
|
||||||
|
if (!feature) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const coordinate = feature.getGeometry().getCoordinates();
|
||||||
|
popup.setPosition([
|
||||||
|
coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
|
||||||
|
coordinate[1],
|
||||||
|
]);
|
||||||
|
|
||||||
|
popover = new bootstrap.Popover(element, {
|
||||||
|
container: element.parentElement,
|
||||||
|
content: formatCoordinate(coordinate),
|
||||||
|
html: true,
|
||||||
|
offset: [0, 20],
|
||||||
|
placement: 'top',
|
||||||
|
sanitize: false,
|
||||||
|
});
|
||||||
|
popover.show();
|
||||||
});
|
});
|
||||||
|
|
||||||
map.on('pointermove', function (event) {
|
map.on('pointermove', function (event) {
|
||||||
if (map.hasFeatureAtPixel(event.pixel)) {
|
const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
|
||||||
map.getViewport().style.cursor = 'pointer';
|
map.getViewport().style.cursor = type;
|
||||||
} else {
|
|
||||||
map.getViewport().style.cursor = 'inherit';
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -4,16 +4,16 @@ title: Geolocation Tracking with Orientation
|
|||||||
shortdesc: Example of a geolocated and oriented map.
|
shortdesc: Example of a geolocated and oriented map.
|
||||||
tags: "fullscreen, geolocation, orientation, mobile"
|
tags: "fullscreen, geolocation, orientation, mobile"
|
||||||
---
|
---
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="./theme/ol.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="./theme/site.css" type="text/css">
|
|
||||||
<title>Mobile Geolocation Tracking with Orientation</title>
|
<title>Mobile Geolocation Tracking with Orientation</title>
|
||||||
<style type="text/css">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./theme/site.css">
|
||||||
|
<style>
|
||||||
html, body, .map {
|
html, body, .map {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -28,23 +28,23 @@ tags: "fullscreen, geolocation, orientation, mobile"
|
|||||||
background-color: lightgrey;
|
background-color: lightgrey;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
.button {
|
.geolocate-buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="info"></div>
|
<div id="info"></div>
|
||||||
<img id="geolocation_marker" src="data/geolocation_marker.png" />
|
<img id="geolocation_marker" src="data/geolocation_marker.png" />
|
||||||
<div class="button">
|
<div class="geolocate-buttons">
|
||||||
<button id="geolocate">Geolocate Me!</button>
|
<button id="geolocate" class="btn btn-primary">Geolocate Me!</button>
|
||||||
<button id="simulate">Simulate</button>
|
<button id="simulate" class="btn btn-secondary">Simulate</button>
|
||||||
</div>
|
</div>
|
||||||
<script src="common.js"></script>
|
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
|
||||||
<script src="geolocation-orientation.js"></script>
|
<script src="geolocation-orientation.js"></script>
|
||||||
|
<script src="common.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -12,13 +12,13 @@ tags: "hitTolerance"
|
|||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<span id="status">Try to click the line in the map.</span>
|
<span id="status">Try to click the line in the map.</span>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="hitTolerance">Hit tolerance for selecting features: </label>
|
<label for="hitTolerance">Hit tolerance for selecting features: </label>
|
||||||
<select id="hitTolerance" class="form-control">
|
<select id="hitTolerance">
|
||||||
<option value="0" selected>0 Pixels</option>
|
<option value="0" selected>0 Pixels</option>
|
||||||
<option value="5">5 Pixels</option>
|
<option value="5">5 Pixels</option>
|
||||||
<option value="10">10 Pixels</option>
|
<option value="10">10 Pixels</option>
|
||||||
</select>
|
</select>
|
||||||
Area:
|
Area:
|
||||||
<canvas id="circle" style="vertical-align: middle" />
|
<canvas id="circle" style="vertical-align: middle"></canvas>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
+2
-3
@@ -6,8 +6,7 @@ docs: >
|
|||||||
Example using an icon to symbolize a point.
|
Example using an icon to symbolize a point.
|
||||||
tags: "vector, style, icon, marker, popup"
|
tags: "vector, style, icon, marker, popup"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map"><div id="popup"></div></div>
|
<div id="map" class="map"><div id="popup"></div></div>
|
||||||
|
|||||||
+18
-13
@@ -59,22 +59,29 @@ const popup = new Overlay({
|
|||||||
});
|
});
|
||||||
map.addOverlay(popup);
|
map.addOverlay(popup);
|
||||||
|
|
||||||
|
let popover;
|
||||||
|
function disposePopover() {
|
||||||
|
if (popover) {
|
||||||
|
popover.dispose();
|
||||||
|
popover = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
// display popup on click
|
// display popup on click
|
||||||
map.on('click', function (evt) {
|
map.on('click', function (evt) {
|
||||||
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
||||||
return feature;
|
return feature;
|
||||||
});
|
});
|
||||||
if (feature) {
|
disposePopover();
|
||||||
popup.setPosition(evt.coordinate);
|
if (!feature) {
|
||||||
$(element).popover({
|
return;
|
||||||
placement: 'top',
|
|
||||||
html: true,
|
|
||||||
content: feature.get('name'),
|
|
||||||
});
|
|
||||||
$(element).popover('show');
|
|
||||||
} else {
|
|
||||||
$(element).popover('dispose');
|
|
||||||
}
|
}
|
||||||
|
popup.setPosition(evt.coordinate);
|
||||||
|
popover = new bootstrap.Popover(element, {
|
||||||
|
placement: 'top',
|
||||||
|
html: true,
|
||||||
|
content: feature.get('name'),
|
||||||
|
});
|
||||||
|
popover.show();
|
||||||
});
|
});
|
||||||
|
|
||||||
// change mouse cursor when over marker
|
// change mouse cursor when over marker
|
||||||
@@ -84,6 +91,4 @@ map.on('pointermove', function (e) {
|
|||||||
map.getTarget().style.cursor = hit ? 'pointer' : '';
|
map.getTarget().style.cursor = hit ? 'pointer' : '';
|
||||||
});
|
});
|
||||||
// Close the popup when the map is moved
|
// Close the popup when the map is moved
|
||||||
map.on('movestart', function () {
|
map.on('movestart', disposePopover);
|
||||||
$(element).popover('dispose');
|
|
||||||
});
|
|
||||||
|
|||||||
+25
-31
@@ -1,9 +1,10 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
|
<title>OpenLayers Examples</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
@@ -39,51 +40,45 @@
|
|||||||
background-color: #f8f9fa !important;
|
background-color: #f8f9fa !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<title>OpenLayers Examples</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
<a class="navbar-brand" href="/"><img class="header-logo" src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- menu items that get hidden below 768px width -->
|
<!-- menu items that get hidden below 768px width -->
|
||||||
<nav class="collapse navbar-collapse" id="olmenu">
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
<form class="form-inline" role="search">
|
<form role="search">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
|
<input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
|
||||||
<div class="input-group-append">
|
<span class="input-group-text text-white bg-transparent" id="count"></span>
|
||||||
<span class="input-group-text text-white bg-transparent" id="count"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<ul class="navbar-nav ml-auto">
|
<ul class="navbar-nav ms-auto">
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
<a class="dropdown-item" href="/doc/">Docs</a>
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
|
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
|
||||||
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
@@ -102,8 +97,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<script type="text/javascript" src="resources/Jugl.js"></script>
|
<script type="text/javascript" src="resources/Jugl.js"></script>
|
||||||
<script type="text/javascript" src="examples-info.js"></script>
|
<script type="text/javascript" src="examples-info.js"></script>
|
||||||
<script type="text/javascript" src="index.js"></script>
|
<script type="text/javascript" src="index.js"></script>
|
||||||
|
|||||||
+1
-1
@@ -12,7 +12,7 @@
|
|||||||
clone: true,
|
clone: true,
|
||||||
parent: target,
|
parent: target,
|
||||||
});
|
});
|
||||||
document.getElementById('count').innerHTML = ' ' + examples.length + ' ';
|
document.getElementById('count').innerHTML = String(examples.length);
|
||||||
}
|
}
|
||||||
|
|
||||||
let timerId;
|
let timerId;
|
||||||
|
|||||||
@@ -6,8 +6,9 @@ docs: >
|
|||||||
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
|
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
|
||||||
tags: "KML, vector, style, tooltip"
|
tags: "KML, vector, style, tooltip"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map"><div id="info"></div></div>
|
<div id="map" class="map">
|
||||||
|
<div id="info"></div>
|
||||||
|
</div>
|
||||||
|
|||||||
+23
-10
@@ -58,33 +58,46 @@ const map = new Map({
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
const info = $('#info');
|
const info = document.getElementById('info');
|
||||||
info.tooltip({
|
info.style.pointerEvents = 'none';
|
||||||
|
const tooltip = new bootstrap.Tooltip(info, {
|
||||||
animation: false,
|
animation: false,
|
||||||
|
customClass: 'pe-none',
|
||||||
|
offset: [0, 5],
|
||||||
|
title: '-',
|
||||||
trigger: 'manual',
|
trigger: 'manual',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let currentFeature;
|
||||||
const displayFeatureInfo = function (pixel) {
|
const displayFeatureInfo = function (pixel) {
|
||||||
info.css({
|
|
||||||
left: pixel[0] + 'px',
|
|
||||||
top: pixel[1] - 15 + 'px',
|
|
||||||
});
|
|
||||||
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
|
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
|
||||||
return feature;
|
return feature;
|
||||||
});
|
});
|
||||||
if (feature) {
|
if (feature) {
|
||||||
info.attr('data-original-title', feature.get('name')).tooltip('show');
|
info.style.left = pixel[0] + 'px';
|
||||||
|
info.style.top = pixel[1] + 'px';
|
||||||
|
if (feature !== currentFeature) {
|
||||||
|
tooltip.setContent({'.tooltip-inner': feature.get('name')});
|
||||||
|
}
|
||||||
|
if (currentFeature) {
|
||||||
|
tooltip.update();
|
||||||
|
} else {
|
||||||
|
tooltip.show();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
info.tooltip('hide');
|
tooltip.hide();
|
||||||
}
|
}
|
||||||
|
currentFeature = feature;
|
||||||
};
|
};
|
||||||
|
|
||||||
map.on('pointermove', function (evt) {
|
map.on('pointermove', function (evt) {
|
||||||
if (evt.dragging) {
|
if (evt.dragging) {
|
||||||
info.tooltip('hide');
|
tooltip.hide();
|
||||||
|
currentFeature = undefined;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
|
const pixel = map.getEventPixel(evt.originalEvent);
|
||||||
|
displayFeatureInfo(pixel);
|
||||||
});
|
});
|
||||||
|
|
||||||
map.on('click', function (evt) {
|
map.on('click', function (evt) {
|
||||||
|
|||||||
@@ -7,8 +7,9 @@ docs: >
|
|||||||
yellow with an opacity calculated based on the current offset to local noon.
|
yellow with an opacity calculated based on the current offset to local noon.
|
||||||
tags: "KML, vector, style"
|
tags: "KML, vector, style"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map"><div id="info"></div></div>
|
<div id="map" class="map">
|
||||||
|
<div id="info"></div>
|
||||||
|
</div>
|
||||||
|
|||||||
+23
-10
@@ -82,33 +82,46 @@ const map = new Map({
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
const info = $('#info');
|
const info = document.getElementById('info');
|
||||||
info.tooltip({
|
info.style.pointerEvents = 'none';
|
||||||
|
const tooltip = new bootstrap.Tooltip(info, {
|
||||||
animation: false,
|
animation: false,
|
||||||
|
customClass: 'pe-none',
|
||||||
|
offset: [0, 5],
|
||||||
|
title: '-',
|
||||||
trigger: 'manual',
|
trigger: 'manual',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let currentFeature;
|
||||||
const displayFeatureInfo = function (pixel) {
|
const displayFeatureInfo = function (pixel) {
|
||||||
info.css({
|
|
||||||
left: pixel[0] + 'px',
|
|
||||||
top: pixel[1] - 15 + 'px',
|
|
||||||
});
|
|
||||||
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
|
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
|
||||||
return feature;
|
return feature;
|
||||||
});
|
});
|
||||||
if (feature) {
|
if (feature) {
|
||||||
info.attr('data-original-title', feature.get('name')).tooltip('show');
|
info.style.left = pixel[0] + 'px';
|
||||||
|
info.style.top = pixel[1] + 'px';
|
||||||
|
if (feature !== currentFeature) {
|
||||||
|
tooltip.setContent({'.tooltip-inner': feature.get('name')});
|
||||||
|
}
|
||||||
|
if (currentFeature) {
|
||||||
|
tooltip.update();
|
||||||
|
} else {
|
||||||
|
tooltip.show();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
info.tooltip('hide');
|
tooltip.hide();
|
||||||
}
|
}
|
||||||
|
currentFeature = feature;
|
||||||
};
|
};
|
||||||
|
|
||||||
map.on('pointermove', function (evt) {
|
map.on('pointermove', function (evt) {
|
||||||
if (evt.dragging) {
|
if (evt.dragging) {
|
||||||
info.tooltip('hide');
|
tooltip.hide();
|
||||||
|
currentFeature = undefined;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
|
const pixel = map.getEventPixel(evt.originalEvent);
|
||||||
|
displayFeatureInfo(pixel);
|
||||||
});
|
});
|
||||||
|
|
||||||
map.on('click', function (evt) {
|
map.on('click', function (evt) {
|
||||||
|
|||||||
@@ -10,9 +10,11 @@ tags: "extent, tilejson"
|
|||||||
cloak:
|
cloak:
|
||||||
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
|
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
|
||||||
value: Your Mapbox access token from https://mapbox.com/ here
|
value: Your Mapbox access token from https://mapbox.com/ here
|
||||||
|
resources:
|
||||||
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<button type="button" class="btn btn-default" id="India">India</button>
|
<button type="button" class="btn btn-light" id="India">India</button>
|
||||||
<button type="button" class="btn btn-default" id="Argentina">Argentina</button>
|
<button type="button" class="btn btn-light" id="Argentina">Argentina</button>
|
||||||
<button type="button" class="btn btn-default" id="Nigeria">Nigeria</button>
|
<button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
|
||||||
<button type="button" class="btn btn-default" id="Sweden">Sweden</button>
|
<button type="button" class="btn btn-light" id="Sweden">Sweden</button>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
Example of a map with layer group.
|
Example of a map with layer group.
|
||||||
tags: "tilejson, input, bind, group, layergroup"
|
tags: "tilejson, input, bind, group, layergroup"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://code.jquery.com/jquery-3.6.0.min.js
|
||||||
cloak:
|
cloak:
|
||||||
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
|
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
|
||||||
value: Your Mapbox access token from https://mapbox.com/ here
|
value: Your Mapbox access token from https://mapbox.com/ here
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ docs: >
|
|||||||
tags: "draw, edit, measure, modify, style, vector"
|
tags: "draw, edit, measure, modify, style, vector"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Measurement type </label>
|
<label for="type">Measurement type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="LineString">Length (LineString)</option>
|
<option value="LineString">Length (LineString)</option>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ docs: >
|
|||||||
tags: "draw, edit, measure, vector"
|
tags: "draw, edit, measure, vector"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Measurement type </label>
|
<label for="type">Measurement type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="length">Length (LineString)</option>
|
<option value="length">Length (LineString)</option>
|
||||||
|
|||||||
@@ -7,14 +7,14 @@ cloak:
|
|||||||
- key: AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN
|
- key: AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN
|
||||||
value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
|
value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
<title>Mobile full screen example</title>
|
<title>Mobile full screen example</title>
|
||||||
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
|
<link rel="stylesheet" type="text/css" href="../theme/ol.css">
|
||||||
<style type="text/css">
|
<style>
|
||||||
html, body, .map {
|
html, body, .map {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ docs: >
|
|||||||
tags: "draw, edit, modify, vector, scale, rotate"
|
tags: "draw, edit, modify, vector, scale, rotate"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Geometry type </label>
|
<label for="type">Geometry type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="Point">Point</option>
|
<option value="Point">Point</option>
|
||||||
|
|||||||
@@ -3,12 +3,11 @@ layout: example.html
|
|||||||
title: Overlay
|
title: Overlay
|
||||||
shortdesc: Demonstrates overlays.
|
shortdesc: Demonstrates overlays.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The popups are created using <a href="https://getbootstrap.com/docs/4.5/components/popovers/">Popovers</a> from Bootstrap.</p>
|
<p>The popups are created using <a href="https://getbootstrap.com/docs/5.2/components/popovers/">Popovers</a> from Bootstrap.</p>
|
||||||
tags: "overlay, popup, bootstrap, popover"
|
tags: "overlay, popup, bootstrap, popover"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
|
||||||
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
|
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div style="display: none;">
|
<div style="display: none;">
|
||||||
@@ -16,5 +15,5 @@ resources:
|
|||||||
<a class="overlay" id="vienna" target="_blank" href="https://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
<a class="overlay" id="vienna" target="_blank" href="https://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
||||||
<div id="marker" title="Marker"></div>
|
<div id="marker" title="Marker"></div>
|
||||||
<!-- Popup -->
|
<!-- Popup -->
|
||||||
<div id="popup" title="Welcome to OpenLayers"></div>
|
<div id="popup"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+11
-8
@@ -43,19 +43,22 @@ const vienna = new Overlay({
|
|||||||
});
|
});
|
||||||
map.addOverlay(vienna);
|
map.addOverlay(vienna);
|
||||||
|
|
||||||
|
const element = popup.getElement();
|
||||||
map.on('click', function (evt) {
|
map.on('click', function (evt) {
|
||||||
const element = popup.getElement();
|
|
||||||
const coordinate = evt.coordinate;
|
const coordinate = evt.coordinate;
|
||||||
const hdms = toStringHDMS(toLonLat(coordinate));
|
const hdms = toStringHDMS(toLonLat(coordinate));
|
||||||
|
|
||||||
$(element).popover('dispose');
|
|
||||||
popup.setPosition(coordinate);
|
popup.setPosition(coordinate);
|
||||||
$(element).popover({
|
let popover = bootstrap.Popover.getInstance(element);
|
||||||
container: element,
|
if (popover) {
|
||||||
placement: 'top',
|
popover.dispose();
|
||||||
|
}
|
||||||
|
popover = new bootstrap.Popover(element, {
|
||||||
animation: false,
|
animation: false,
|
||||||
html: true,
|
container: element,
|
||||||
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
|
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
|
||||||
|
html: true,
|
||||||
|
placement: 'top',
|
||||||
|
title: 'Welcome to OpenLayers',
|
||||||
});
|
});
|
||||||
$(element).popover('show');
|
popover.show();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,27 +7,31 @@ docs: >
|
|||||||
OSM (EPSG:3857) to arbitrary projection by searching
|
OSM (EPSG:3857) to arbitrary projection by searching
|
||||||
in <a href="https://epsg.io/">EPSG.io</a> database.
|
in <a href="https://epsg.io/">EPSG.io</a> database.
|
||||||
tags: "reprojection, projection, proj4js, epsg.io, graticule"
|
tags: "reprojection, projection, proj4js, epsg.io, graticule"
|
||||||
|
resources:
|
||||||
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form class="row">
|
||||||
<label for="epsg-query">Search projection: </label>
|
<span class="col-auto">
|
||||||
<input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
|
<span class="input-group">
|
||||||
<button id="epsg-search" class="btn">Search</button>
|
<label class="input-group-text" for="epsg-query">Search projection: </label>
|
||||||
<span id="epsg-result"></span>
|
<input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
|
||||||
|
<button class="btn btn-outline-secondary" id="epsg-search">Search</button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span class="mt-2" id="epsg-result"> </span>
|
||||||
</form>
|
</form>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="render-edges">
|
<div class="form-check mt-2">
|
||||||
Render reprojection edges:
|
<input class="form-check-input" type="checkbox" id="render-edges" />
|
||||||
<input type="checkbox" id="render-edges" />
|
<label class="form-check-label" for="render-edges">Render reprojection edges</label><br>
|
||||||
</label>
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
<label for="show-tiles">
|
<input class="form-check-input" type="checkbox" id="show-tiles" />
|
||||||
Show tile coordinates:
|
<label class="form-check-label" for="show-tiles">Show tile coordinates</label><br>
|
||||||
<input type="checkbox" id="show-tiles" />
|
</div>
|
||||||
</label>
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" id="show-graticule" />
|
||||||
<label for="show-graticule">
|
<label class="form-check-label" for="show-graticule">Show graticule</label>
|
||||||
Show graticule:
|
</div>
|
||||||
<input type="checkbox" id="show-graticule" />
|
|
||||||
</label>
|
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
.form-inline label {
|
.reprojection-form {
|
||||||
justify-content: left;
|
display: grid;
|
||||||
|
grid-template-columns: max-content max-content;
|
||||||
|
grid-gap: 5px;
|
||||||
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|||||||
+29
-38
@@ -7,42 +7,33 @@ docs: >
|
|||||||
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
|
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form class="reprojection-form">
|
||||||
<div class="col-md-3">
|
<label for="base-layer">Base map:</label>
|
||||||
<label for="base-layer">Base map:</label>
|
<select id="base-layer">
|
||||||
<select id="base-layer">
|
<option value="osm">OSM (EPSG:3857)</option>
|
||||||
<option value="osm">OSM (EPSG:3857)</option>
|
<option value="wms4326">WMS (EPSG:4326)</option>
|
||||||
<option value="wms4326">WMS (EPSG:4326)</option>
|
</select>
|
||||||
</select>
|
|
||||||
</div>
|
<label for="overlay-layer">Overlay map:</label>
|
||||||
<div class="col-md-4">
|
<select id="overlay-layer">
|
||||||
<label for="overlay-layer">Overlay map:</label>
|
<option value="bng">British National Grid (EPSG:27700)</option>
|
||||||
<select id="overlay-layer">
|
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
|
||||||
<option value="bng">British National Grid (EPSG:27700)</option>
|
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
|
||||||
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
|
<option value="states">United States (EPSG:3857)</option>
|
||||||
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
|
</select>
|
||||||
<option value="states">United States (EPSG:3857)</option>
|
|
||||||
</select>
|
<label for="view-projection">View projection:</label>
|
||||||
</div>
|
<select id="view-projection">
|
||||||
<div class="col-md-5">
|
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
|
||||||
<label for="view-projection">View projection:</label>
|
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
|
||||||
<select id="view-projection">
|
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
|
||||||
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
|
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
|
||||||
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
|
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
|
||||||
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
|
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
|
||||||
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
|
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
|
||||||
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
|
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
|
||||||
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
|
</select>
|
||||||
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
|
|
||||||
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
|
<label for="render-edges">Render reprojection edges:</label>
|
||||||
</select>
|
<span><input type="checkbox" id="render-edges" /></span>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<form class="form-inline">
|
|
||||||
<div class="col-md-auto">
|
|
||||||
<label>
|
|
||||||
Render reprojection edges:
|
|
||||||
<input type="checkbox" id="render-edges" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
|
<title>Map</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../theme/ol.css">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -9,9 +9,9 @@ docs: >
|
|||||||
tags: "select, vector"
|
tags: "select, vector"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Action type </label>
|
<label for="type">Action type </label>
|
||||||
<select id="type" class="form-control">
|
<select id="type">
|
||||||
<option value="click" selected>Click</option>
|
<option value="click" selected>Click</option>
|
||||||
<option value="singleclick">Single-click</option>
|
<option value="singleclick">Single-click</option>
|
||||||
<option value="pointermove">Hover</option>
|
<option value="pointermove">Hover</option>
|
||||||
|
|||||||
@@ -3,100 +3,101 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
|
<title>{{ title }}</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
{{#each css.local}}
|
{{#each css.local}}
|
||||||
<link rel="stylesheet" href="{{{ . }}}" type="text/css">
|
<link rel="stylesheet" type="text/css" href="{{{ . }}}">
|
||||||
{{/each}}
|
{{/each}}
|
||||||
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
<title>{{ title }}</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
<a href='/' class='navbar-brand'><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- menu items that get hidden below 768px width -->
|
<!-- menu items that get hidden below 768px width -->
|
||||||
<nav class="collapse navbar-collapse" id="olmenu">
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
<ul class="nav navbar-nav ml-auto">
|
<ul class="nav navbar-nav ms-auto">
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
<a class="dropdown-item" href="/doc/">Docs</a>
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
|
||||||
<li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="container-fluid line-numbers">
|
<div class="container-fluid line-numbers">
|
||||||
|
|
||||||
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||||||
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
<button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#if ./experimental}}
|
{{#if ./experimental}}
|
||||||
<div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert">
|
<div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert">
|
||||||
<button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
<button id="experimental-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
This example uses features that are not part of the stable API and subject to change between releases. Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a>
|
This example uses features that are not part of the stable API and subject to change between releases. Consult the <a href="/en/latest/apidoc/">API documentation</a>
|
||||||
to see what is supported in the latest release.
|
to see what is supported in the latest release.
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<a href="#" id="codepen-button" class="btn btn-link float-right">
|
<a href="#" id="codepen-button" class="btn btn-link float-end">
|
||||||
<i class="fab fa-codepen fa-lg"></i> Edit
|
<i class="fab fa-codepen fa-lg"></i> Edit
|
||||||
</a>
|
</a>
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h4 id="title">{{ title }}</h4>
|
<h4 id="title">{{ title }}</h4>
|
||||||
<p class="tags">
|
<p class="tags">
|
||||||
{{#each tags}}
|
{{#each tags}}
|
||||||
<span class="badge-group">
|
<span class="badge-group">
|
||||||
<a
|
<a
|
||||||
href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a
|
href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a
|
||||||
><a
|
><a
|
||||||
class="badge badge-info tag-modal-toggle text-white"
|
class="badge badge-info tag-modal-toggle"
|
||||||
data-toggle="modal"
|
data-bs-toggle="modal"
|
||||||
data-target="#tag-example-list"
|
data-bs-target="#tag-example-list"
|
||||||
data-title="{{ ./tag }}"
|
data-title="{{ ./tag }}"
|
||||||
data-content="{{#each ./examples}}
|
data-content="<ul class="list-group">
|
||||||
<a class="list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}" href="./{{ ./link }}">{{escape ./title}}</a>{{/each}}"
|
{{#each ./examples}}
|
||||||
|
<li><a class="list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}" href="./{{ ./link }}">{{escape ./title}}</a>
|
||||||
|
{{/each}}
|
||||||
|
</ul>"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>{{ ./examples.length }}</a>
|
>{{ ./examples.length }}</a>
|
||||||
</span>
|
</span>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</p>
|
</p>
|
||||||
<div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
|
<div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="tag-example-title"></h5>
|
<h5 class="modal-title" id="tag-example-title"></h5>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="list-group"></div>
|
<div class="list-group"></div>
|
||||||
@@ -165,8 +166,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
|
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
|
||||||
{{#each js.local}}
|
{{#each js.local}}
|
||||||
<script src="{{{ . }}}"></script>
|
<script src="{{{ . }}}"></script>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
@@ -176,14 +176,12 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
|
||||||
<script src="./resources/common.js"></script>
|
<script src="./resources/common.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$('#tag-example-list').on('show.bs.modal', function (event) {
|
document.getElementById('tag-example-list')
|
||||||
const button = $(event.relatedTarget); // Button that triggered the modal
|
.addEventListener('show.bs.modal', function (event) {
|
||||||
const title = button.data('title');
|
const button = event.relatedTarget; // Button that triggered the modal
|
||||||
const content = button.data('content');
|
this.querySelector('.modal-title').innerText = button.dataset.title;
|
||||||
const modal = $(this)
|
this.querySelector('.modal-body').innerHTML = button.dataset.content;
|
||||||
modal.find('.modal-title').text(title);
|
});
|
||||||
modal.find('.modal-body').html(content);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
const releaseUrl = 'https://api.github.com/repos/openlayers/openlayers/releases/latest';
|
const releaseUrl = 'https://api.github.com/repos/openlayers/openlayers/releases/latest';
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ docs: >
|
|||||||
tags: "draw, edit, vector, topology, topolis"
|
tags: "draw, edit, vector, topology, topolis"
|
||||||
resources:
|
resources:
|
||||||
- https://unpkg.com/topolis@0.2.5/dist/topolis.js
|
- https://unpkg.com/topolis@0.2.5/dist/topolis.js
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://code.jquery.com/jquery-3.6.0.min.js
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js
|
- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css
|
- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ docs: >
|
|||||||
tags: "draw, trace, snap, vector, topology"
|
tags: "draw, trace, snap, vector, topology"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Geometry type </label>
|
<label for="type">Geometry type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="Polygon">Polygon</option>
|
<option value="Polygon">Polygon</option>
|
||||||
|
|||||||
@@ -6,10 +6,10 @@ docs: >
|
|||||||
This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
|
This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
|
||||||
tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server, edit, updateFeature, addFeature"
|
tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server, edit, updateFeature, addFeature"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://code.jquery.com/jquery-3.6.0.min.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Draw or modify </label>
|
<label for="type">Draw or modify </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="DRAW">Draw</option>
|
<option value="DRAW">Draw</option>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
This example loads new features from ArcGIS REST Feature Service when the view extent changes.
|
This example loads new features from ArcGIS REST Feature Service when the view extent changes.
|
||||||
tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server"
|
tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server"
|
||||||
resources:
|
resources:
|
||||||
- https://code.jquery.com/jquery-3.5.1.min.js
|
- https://code.jquery.com/jquery-3.6.0.min.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="info"> </div>
|
<div id="info"> </div>
|
||||||
|
|||||||
@@ -14,9 +14,9 @@ docs: >
|
|||||||
tags: "vector tiles, selection"
|
tags: "vector tiles, selection"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form>
|
||||||
<label for="type">Action type </label>
|
<label for="type">Action type </label>
|
||||||
<select id="type" class="form-control">
|
<select id="type">
|
||||||
<option value="singleselect" selected>Single Select</option>
|
<option value="singleselect" selected>Single Select</option>
|
||||||
<option value="multiselect">Multi Select</option>
|
<option value="multiselect">Multi Select</option>
|
||||||
<option value="singleselect-hover">Single Select on hover</option>
|
<option value="singleselect-hover">Single Select on hover</option>
|
||||||
|
|||||||
@@ -14,8 +14,7 @@ const baseDir = dirname(fileURLToPath(import.meta.url));
|
|||||||
const isCssRegEx = /\.css(\?.*)?$/;
|
const isCssRegEx = /\.css(\?.*)?$/;
|
||||||
const isJsRegEx = /\.js(\?.*)?$/;
|
const isJsRegEx = /\.js(\?.*)?$/;
|
||||||
const importRegEx = /\s?import .*? from '([^']+)'/g;
|
const importRegEx = /\s?import .*? from '([^']+)'/g;
|
||||||
const isTemplateJs =
|
const isTemplateJs = /\/(?:bootstrap(?:\.bundle)?)(?:\.min)?\.js(?:\?.*)?$/;
|
||||||
/\/(jquery(-\d+\.\d+\.\d+)?|(bootstrap(\.bundle)?))(\.min)?\.js(\?.*)?$/;
|
|
||||||
const isTemplateCss =
|
const isTemplateCss =
|
||||||
/\/(?:bootstrap|fontawesome-free@[\d.]+\/css\/(?:fontawesome|brands|solid))(?:\.min)?\.css(?:\?.*)?$/;
|
/\/(?:bootstrap|fontawesome-free@[\d.]+\/css\/(?:fontawesome|brands|solid))(?:\.min)?\.css(?:\?.*)?$/;
|
||||||
|
|
||||||
|
|||||||
+44
-43
@@ -2,77 +2,78 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>OpenLayers - {{ title }}</title>
|
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
<title>OpenLayers - {{ title }}</title>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
{{#each head}}
|
{{#each head}}
|
||||||
{{{ this }}}
|
{{{ this }}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
<a href='/' class='navbar-brand'><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- menu items that get hidden below 768px width -->
|
<!-- menu items that get hidden below 768px width -->
|
||||||
<nav class="collapse navbar-collapse" id="olmenu">
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
<ul class="nav navbar-nav ml-auto">
|
<ul class="nav navbar-nav ms-auto">
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
<a class="dropdown-item" href="/doc/">Docs</a>
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
<li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
<li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
{{#if uncontained}}
|
|
||||||
|
{{#if uncontained}}
|
||||||
|
{{{ contents }}}
|
||||||
|
{{else}}
|
||||||
|
<div class="container">
|
||||||
{{{ contents }}}
|
{{{ contents }}}
|
||||||
{{else}}
|
</div>
|
||||||
<div class="container">
|
{{/if}}
|
||||||
{{{ contents }}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
<footer>
|
<footer>
|
||||||
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>. All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>. Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
<br>
|
<br>
|
||||||
<a href="https://www.netlify.com">
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
This site is powered by Netlify.
|
|
||||||
</a>
|
|
||||||
</footer>
|
</footer>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
{{#each scripts}}
|
{{#each scripts}}
|
||||||
{{{this}}}
|
{{{this}}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -41,6 +41,7 @@ Open the `index.html` file in a text editor. It should look something like this
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Quick Start</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|||||||
+3
-3
@@ -3,11 +3,11 @@ title: Welcome
|
|||||||
layout: default.hbs
|
layout: default.hbs
|
||||||
uncontained: true
|
uncontained: true
|
||||||
head:
|
head:
|
||||||
- <link rel="stylesheet" href="./theme/index.css" type="text/css">
|
- <link rel="stylesheet" type="text/css" href="./theme/index.css">
|
||||||
---
|
---
|
||||||
<div id='map'></div>
|
<div id='map'></div>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<blockquote id='tagline' class='text-right plain'>
|
<blockquote id='tagline' class='text-end plain'>
|
||||||
<p>A high-performance, feature-packed library for all your mapping needs.</p>
|
<p>A high-performance, feature-packed library for all your mapping needs.</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<div class='row' id='news'>
|
<div class='row' id='news'>
|
||||||
@@ -101,7 +101,7 @@ head:
|
|||||||
<li>Latest v3: <a href="https://github.com/openlayers/openlayers/releases/tag/v3.20.1">v3.20.1</a>, released 2016-12-12 — <a href="/en/v3.20.1/doc/">docs</a>, <a href="/en/v3.20.1/apidoc/">API</a> & <a href="/en/v3.20.1/examples/">examples</a></li>
|
<li>Latest v3: <a href="https://github.com/openlayers/openlayers/releases/tag/v3.20.1">v3.20.1</a>, released 2016-12-12 — <a href="/en/v3.20.1/doc/">docs</a>, <a href="/en/v3.20.1/apidoc/">API</a> & <a href="/en/v3.20.1/examples/">examples</a></li>
|
||||||
<li>Latest v2: v2.13.1, released 2013-07-09 — you'll find everything you need on the <a href="./two">2.x page</a></li>
|
<li>Latest v2: v2.13.1, released 2013-07-09 — you'll find everything you need on the <a href="./two">2.x page</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Please consider upgrading to benefit of the latest features and bug fixes. Get best performance and usability for free by using recent versions of OpenLayers</p>
|
<p>Please consider upgrading to benefit from the latest features and bug fixes. Get better performance and usability for free by using recent versions of OpenLayers.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class='row'>
|
<div class='row'>
|
||||||
|
|||||||
+24
-10
@@ -7,11 +7,6 @@ body {
|
|||||||
padding-top: 54px;
|
padding-top: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
@@ -27,6 +22,12 @@ h6,
|
|||||||
font-weight: 700
|
font-weight: 700
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.row h1 {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
h1.topic {
|
h1.topic {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: var(--ol-subtle-foreground-color);
|
color: var(--ol-subtle-foreground-color);
|
||||||
@@ -58,9 +59,7 @@ a :not(:first-child) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a:hover,
|
a:hover,
|
||||||
a:focus,
|
a:focus {
|
||||||
footer a:hover,
|
|
||||||
footer a:focus {
|
|
||||||
color: var(--ol-brand-color);
|
color: var(--ol-brand-color);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@@ -95,6 +94,14 @@ footer a:focus {
|
|||||||
color: var(--ol-brand-color);
|
color: var(--ol-brand-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-brand:focus,
|
||||||
|
.navbar-brand:hover,
|
||||||
|
.nav-link:focus,
|
||||||
|
.nav-link:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: var(--ol-foreground-color);
|
background-color: var(--ol-foreground-color);
|
||||||
color: var(--ol-background-color);
|
color: var(--ol-background-color);
|
||||||
@@ -111,7 +118,7 @@ a.dropdown-item {
|
|||||||
.dropdown-item:hover {
|
.dropdown-item:hover {
|
||||||
color: var(--ol-brand-color);
|
color: var(--ol-brand-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: var(--ol-background-color)
|
background-color: var(--ol-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav>li>a {
|
.navbar-nav>li>a {
|
||||||
@@ -169,6 +176,7 @@ a.badge-info:focus,
|
|||||||
a.badge-info:hover {
|
a.badge-info:hover {
|
||||||
background-color: var(--ol-foreground-color);
|
background-color: var(--ol-foreground-color);
|
||||||
color: var(--ol-brand-color);
|
color: var(--ol-brand-color);
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-modal-toggle {
|
.tag-modal-toggle {
|
||||||
@@ -510,4 +518,10 @@ div.code-toolbar>.toolbar button:before {
|
|||||||
|
|
||||||
.nameContainer .anchor:target+h4 {
|
.nameContainer .anchor:target+h4 {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="/ol/ol.css" type="text/css">
|
<meta charset="UTF-8">
|
||||||
|
<title>linestring-style-css-filter</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/ol/ol.css">
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -25,5 +27,4 @@
|
|||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>map-text-align</title>
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -22,5 +24,4 @@
|
|||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>render-context</title>
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -14,5 +16,4 @@
|
|||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="/ol/ol.css" type="text/css">
|
<meta charset="UTF-8">
|
||||||
|
<title>default</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/ol/ol.css">
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -36,5 +38,4 @@
|
|||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user