Merge pull request #4420 from openlayers/strapless
Remove Bootstrap and jQuery from example snippets.
This commit is contained in:
Tim Schaub
@@ -1,8 +1,8 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en-US">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||||
<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/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
|
||||||
@@ -11,6 +11,7 @@
|
|||||||
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
||||||
{{{ extraHead.local }}}
|
{{{ extraHead.local }}}
|
||||||
{{{ css.tag }}}
|
{{{ css.tag }}}
|
||||||
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
|
||||||
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
|
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
</head>
|
</head>
|
||||||
@@ -24,14 +25,17 @@
|
|||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
{{{ contents }}}
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h4 id="title">{{ title }}</h4>
|
<h4 id="title">{{ title }}</h4>
|
||||||
|
{{{ contents }}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
<p id="shortdesc">{{ shortdesc }}</p>
|
<p id="shortdesc">{{ shortdesc }}</p>
|
||||||
<div id="docs">{{ md docs }}</div>
|
<div id="docs">{{ md docs }}</div>
|
||||||
<div id="tags">{{ tags }}</div>
|
|
||||||
<div id="api-links">Related API documentation: {{{ js.apiHtml }}}</div>
|
<div id="api-links">Related API documentation: {{{ js.apiHtml }}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -41,47 +45,33 @@
|
|||||||
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
|
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
|
||||||
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
|
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
|
||||||
</div>
|
</div>
|
||||||
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
|
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/library/pure/">
|
||||||
<textarea class="hidden" name="js">{{ js.source }}</textarea>
|
<textarea class="hidden" name="js">{{ js.source }}</textarea>
|
||||||
<textarea class="hidden" name="css">{{ css.source }}</textarea>
|
<textarea class="hidden" name="css">{{ css.source }}</textarea>
|
||||||
<textarea class="hidden" name="html">{{ contents }}</textarea>
|
<textarea class="hidden" name="html">{{ contents }}</textarea>
|
||||||
<input type="hidden" name="wrap" value="l">
|
<input type="hidden" name="wrap" value="l">
|
||||||
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
|
<input type="hidden" name="resources" value="http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
|
||||||
</form>
|
</form>
|
||||||
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
|
<link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
<script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>{{#if extraHead.remote}}
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
|
||||||
<link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
|
<style>
|
||||||
<script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>
|
{{ indent css.source spaces=6 }} </style>{{/if}}
|
||||||
{{ extraHead.remote }}
|
</head>
|
||||||
{{#if css.source}}
|
<body>
|
||||||
<style>
|
{{ indent contents spaces=4 }} <script>
|
||||||
{{ css.source }}
|
{{ indent js.source spaces=6 }} </script>
|
||||||
</style>
|
</body>
|
||||||
{{/if}}
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
{{ contents }}
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
{{ js.source }}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html></code></pre>
|
</html></code></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
||||||
<script src="./resources/common.js"></script>
|
<script src="./resources/common.js"></script>
|
||||||
<script src="./resources/prism/prism.min.js"></script>
|
<script src="./resources/prism/prism.min.js"></script>
|
||||||
{{{ js.tag }}}
|
{{{ js.tag }}}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -16,6 +16,4 @@ To enable this, examples have the following, not needed in application code:
|
|||||||
|
|
||||||
* html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these
|
* html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these
|
||||||
|
|
||||||
* in addition, examples use Twitter Bootstrap and jQuery; this is of course not a requirement - you may use whichever presentation/helper libraries you wish
|
|
||||||
|
|
||||||
At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.
|
At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Accessibility example
|
title: Accessible Map
|
||||||
shortdesc: Example of an accessible map.
|
shortdesc: Example of an accessible map.
|
||||||
docs: >
|
docs: >
|
||||||
This page's `map` element has its `tabindex` attribute set to `"0"`, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
|
This page's `map` element has its `tabindex` attribute set to `"0"`, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
|
||||||
@@ -10,11 +10,7 @@ docs: >
|
|||||||
|
|
||||||
tags: "accessibility, tabindex"
|
tags: "accessibility, tabindex"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<a class="skiplink" href="#map">Go to map</a>
|
||||||
<div class="span12">
|
<div id="map" class="map" tabindex="0"></div>
|
||||||
<a class="skiplink" href="#map">Go to map</a>
|
<button id="zoom-out">Zoom out</button>
|
||||||
<div id="map" class="map" tabindex="0"></div>
|
<button id="zoom-in">Zoom in</button>
|
||||||
<button id="zoom-out">Zoom out</button>
|
|
||||||
<button id="zoom-in">Zoom in</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+11
-19
@@ -1,27 +1,19 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Animation example
|
title: View Animation
|
||||||
shortdesc: Demonstrates animated pan, zoom, and rotation.
|
shortdesc: Demonstrates animated pan, zoom, and rotation.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use the beforeRender function on the Map to run one
|
This example shows how to use the beforeRender function on the Map to run one
|
||||||
or more animations.
|
or more animations.
|
||||||
tags: "animation"
|
tags: "animation"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<button id="rotate-left" title="Rotate clockwise">↻</button>
|
||||||
<div id="map" class="map"></div>
|
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
|
||||||
</div>
|
<button id="rotate-around-rome">Rotate around Rome</button>
|
||||||
</div>
|
<button id="pan-to-london">Pan to London</button>
|
||||||
<div class="row-fluid">
|
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
||||||
<div class="span12">
|
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
|
||||||
<button id="rotate-left" title="Rotate clockwise">↻</button>
|
<button id="spin-to-rome">Spin to Rome</button>
|
||||||
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
|
<button id="fly-to-bern">Fly to Bern</button>
|
||||||
<button id="rotate-around-rome">Rotate around Rome</button>
|
<button id="spiral-to-madrid">Spiral to Madrid</button>
|
||||||
<button id="pan-to-london">Pan to London</button>
|
|
||||||
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
|
||||||
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
|
|
||||||
<button id="spin-to-rome">Spin to Rome</button>
|
|
||||||
<button id="fly-to-bern">Fly to Bern</button>
|
|
||||||
<button id="spiral-to-madrid">Spiral to Madrid</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Tiled ArcGIS MapServer example
|
title: Tiled ArcGIS MapServer
|
||||||
shortdesc: Example of a tiled ArcGIS layer.
|
shortdesc: Example of a tiled ArcGIS layer.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use an ArcGIS REST MapService as tiles.
|
This example shows how to use an ArcGIS REST MapService as tiles.
|
||||||
@@ -9,8 +9,4 @@ docs: >
|
|||||||
<code>ol.source.XYZ</code> instead.
|
<code>ol.source.XYZ</code> instead.
|
||||||
tags: arcgis, tile, tilelayer"
|
tags: arcgis, tile, tilelayer"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Attributions example
|
title: Attributions
|
||||||
shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
|
shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
|
||||||
docs: >
|
docs: >
|
||||||
When the map gets too small because of a resize, the attribution will be collapsed.
|
When the map gets too small because of a resize, the attribution will be collapsed.
|
||||||
@@ -8,8 +8,4 @@ docs: >
|
|||||||
of the map gets smaller than 600 pixels.
|
of the map gets smaller than 600 pixels.
|
||||||
tags: "attributions, openstreetmap"
|
tags: "attributions, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+9
-13
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Bing Maps example
|
title: Bing Maps
|
||||||
shortdesc: Example of a Bing Maps layer.
|
shortdesc: Example of a Bing Maps layer.
|
||||||
docs: >
|
docs: >
|
||||||
<p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
|
<p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
|
||||||
@@ -8,15 +8,11 @@ tags: "bing, bing-maps"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<select id="layer-select">
|
||||||
<div id="map" class="map"></div>
|
<option value="Aerial">Aerial</option>
|
||||||
<select id="layer-select">
|
<option value="AerialWithLabels" selected>Aerial with labels</option>
|
||||||
<option value="Aerial">Aerial</option>
|
<option value="Road">Road</option>
|
||||||
<option value="AerialWithLabels" selected>Aerial with labels</option>
|
<option value="collinsBart">Collins Bart</option>
|
||||||
<option value="Road">Road</option>
|
<option value="ordnanceSurvey">Ordnance Survey</option>
|
||||||
<option value="collinsBart">Collins Bart</option>
|
</select>
|
||||||
<option value="ordnanceSurvey">Ordnance Survey</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+47
-55
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Blend modes example
|
title: Blend Modes
|
||||||
shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
|
shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
|
||||||
docs: >
|
docs: >
|
||||||
<p>This example shows how to change the canvas compositing / blending mode in
|
<p>This example shows how to change the canvas compositing / blending mode in
|
||||||
@@ -20,57 +20,49 @@ docs: >
|
|||||||
checkboxes.</p>
|
checkboxes.</p>
|
||||||
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
|
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<form class="form-horizontal">
|
||||||
<div id="map" class="map"></div>
|
<label>
|
||||||
</div>
|
<select id="blend-mode" class="form-control">
|
||||||
</div>
|
<option value="source-over">source-over (default)</option>
|
||||||
<div class="row-fluid">
|
<option>source-in</option>
|
||||||
<div class="span12">
|
<option>source-out</option>
|
||||||
<form class="form-horizontal">
|
<option>source-atop</option>
|
||||||
<label>
|
<option>destination-over</option>
|
||||||
<select id="blend-mode" class="form-control">
|
<option>destination-in</option>
|
||||||
<option value="source-over">source-over (default)</option>
|
<option>destination-out</option>
|
||||||
<option>source-in</option>
|
<option>destination-atop</option>
|
||||||
<option>source-out</option>
|
<option>lighter</option>
|
||||||
<option>source-atop</option>
|
<option>copy</option>
|
||||||
<option>destination-over</option>
|
<option>xor</option>
|
||||||
<option>destination-in</option>
|
<option>multiply</option>
|
||||||
<option>destination-out</option>
|
<option>screen</option>
|
||||||
<option>destination-atop</option>
|
<option>overlay</option>
|
||||||
<option>lighter</option>
|
<option>darken</option>
|
||||||
<option>copy</option>
|
<option>lighten</option>
|
||||||
<option>xor</option>
|
<option>color-dodge</option>
|
||||||
<option>multiply</option>
|
<option>color-burn</option>
|
||||||
<option>screen</option>
|
<option>hard-light</option>
|
||||||
<option>overlay</option>
|
<option>soft-light</option>
|
||||||
<option>darken</option>
|
<option selected>difference</option>
|
||||||
<option>lighten</option>
|
<option>exclusion</option>
|
||||||
<option>color-dodge</option>
|
<option>hue</option>
|
||||||
<option>color-burn</option>
|
<option>saturation</option>
|
||||||
<option>hard-light</option>
|
<option>color</option>
|
||||||
<option>soft-light</option>
|
<option>luminosity</option>
|
||||||
<option selected>difference</option>
|
</select>
|
||||||
<option>exclusion</option>
|
Canvas compositing / blending mode
|
||||||
<option>hue</option>
|
</label>
|
||||||
<option>saturation</option>
|
<label>
|
||||||
<option>color</option>
|
<input type="checkbox" id="affect-red" checked>
|
||||||
<option>luminosity</option>
|
Red circle affected
|
||||||
</select>
|
</label>
|
||||||
Canvas compositing / blending mode
|
<label>
|
||||||
</label>
|
<input type="checkbox" id="affect-green" checked>
|
||||||
<label>
|
Green circle affected
|
||||||
<input type="checkbox" id="affect-red" checked>
|
</label>
|
||||||
Red circle affected
|
<label>
|
||||||
</label>
|
<input type="checkbox" id="affect-blue" checked>
|
||||||
<label>
|
Blue circle affected
|
||||||
<input type="checkbox" id="affect-green" checked>
|
</label>
|
||||||
Green circle affected
|
</form>
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="affect-blue" checked>
|
|
||||||
Blue circle affected
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,20 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Box selection example
|
title: Box Selection
|
||||||
shortdesc: Using a DragBox interaction to select features.
|
shortdesc: Using a DragBox interaction to select features.
|
||||||
docs: >
|
docs: >
|
||||||
<p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
|
<p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
|
||||||
to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
|
to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
|
||||||
<p>Use <code>Ctrl+drag</code> (<code>Meta+drag</code> on Mac) to draw boxes.</p>
|
<p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) to draw boxes.</p>
|
||||||
tags: "DragBox, feature, selection, box"
|
tags: "DragBox, feature, selection, box"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info">No countries selected</div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="span4 offset4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Custom tooltips example
|
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="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
|
This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
|
||||||
tags: "custom, tooltip"
|
tags: "custom, tooltip"
|
||||||
|
resources:
|
||||||
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Canvas tiles example
|
title: Canvas Tiles
|
||||||
shortdesc: Renders tiles with coordinates for debugging.
|
shortdesc: Renders tiles with coordinates for debugging.
|
||||||
docs: >
|
docs: >
|
||||||
The black grid tiles are generated on the client with an HTML5 canvas. The
|
The black grid tiles are generated on the client with an HTML5 canvas. The
|
||||||
@@ -10,8 +10,4 @@ docs: >
|
|||||||
`-y - 1`.
|
`-y - 1`.
|
||||||
tags: "layers, openstreetmap, canvas"
|
tags: "layers, openstreetmap, canvas"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+14
-20
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Advanced View Positioning example
|
title: Advanced View Positioning
|
||||||
shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
|
shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
|
||||||
docs: >
|
docs: >
|
||||||
This example demonstrates how a map's view can be
|
This example demonstrates how a map's view can be
|
||||||
@@ -10,25 +10,19 @@ docs: >
|
|||||||
is used to fit a geometry in the view with the same padding. The
|
is used to fit a geometry in the view with the same padding. The
|
||||||
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
||||||
at a specific pixel location (the center of the black box).
|
at a specific pixel location (the center of the black box).
|
||||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
<p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
|
||||||
tags: "center, rotation, openstreetmap"
|
tags: "center, rotation, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div class="mapcontainer">
|
||||||
<div class="span12 mapcontainer">
|
<div id="map" class="map"></div>
|
||||||
<div id="map" class="map"></div>
|
<div class="padding-top"></div>
|
||||||
<div class="padding-top"></div>
|
<div class="padding-left"></div>
|
||||||
<div class="padding-left"></div>
|
<div class="padding-right"></div>
|
||||||
<div class="padding-right"></div>
|
<div class="padding-bottom"></div>
|
||||||
<div class="padding-bottom"></div>
|
<div class="center"></div>
|
||||||
<div class="center"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
|
||||||
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
|
||||||
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
|
||||||
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
|
||||||
<button id="centerlausanne">Center on Lausanne</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
||||||
|
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
||||||
|
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
||||||
|
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
||||||
|
<button id="centerlausanne">Center on Lausanne</button>
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Clustering example
|
title: Clustered Features
|
||||||
shortdesc: Example of using <code>ol.source.Cluster</code>.
|
shortdesc: Example of using <code>ol.source.Cluster</code>.
|
||||||
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"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,30 +1,26 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Manipulating colors with a raster source
|
title: Color Manipulation
|
||||||
shortdesc: Demonstrates color manipulation with a raster source.
|
shortdesc: Demonstrates color manipulation with a raster source.
|
||||||
docs: >
|
docs: >
|
||||||
A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
|
A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
|
||||||
tags: "color, hue, lightness, chroma"
|
tags: "color, hue, lightness, chroma"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<table class="controls">
|
||||||
<div id="map" class="map"></div>
|
<tr>
|
||||||
<table class="controls">
|
<td>hue</td>
|
||||||
<tr>
|
<td><span id="hueOut"></span>°</td>
|
||||||
<td>hue</td>
|
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
|
||||||
<td><span id="hueOut"></span>°</td>
|
</tr>
|
||||||
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
|
<tr>
|
||||||
</tr>
|
<td>chroma</td>
|
||||||
<tr>
|
<td><span id="chromaOut"></span> %</td>
|
||||||
<td>chroma</td>
|
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
|
||||||
<td><span id="chromaOut"></span> %</td>
|
</tr>
|
||||||
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
|
<tr>
|
||||||
</tr>
|
<td>lightness</td>
|
||||||
<tr>
|
<td><span id="lightnessOut"></span> %</td>
|
||||||
<td>lightness</td>
|
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
|
||||||
<td><span id="lightnessOut"></span> %</td>
|
</tr>
|
||||||
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
|
</table>
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Custom control example
|
title: Custom Controls
|
||||||
shortdesc: Shows how to create custom controls.
|
shortdesc: Shows how to create custom controls.
|
||||||
docs: >
|
docs: >
|
||||||
This example creates a "rotate to north" button.
|
This example creates a "rotate to north" button.
|
||||||
tags: "custom, control"
|
tags: "custom, control"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ var map = new ol.Map({
|
|||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: [0, 0],
|
center: [0, 0],
|
||||||
zoom: 2,
|
zoom: 3,
|
||||||
rotation: 1
|
rotation: 1
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,14 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Custom interaction example
|
title: Custom Interactions
|
||||||
shortdesc: Example of a custom interaction.
|
shortdesc: Example of a custom interaction.
|
||||||
docs: >
|
docs: >
|
||||||
This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
|
This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
|
||||||
Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
|
Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
|
||||||
tags: "drag, feature, vector, editing, custom, interaction"
|
tags: "drag, feature, vector, editing, custom, interaction"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -19,8 +19,7 @@ goog.require('ol.style.Style');
|
|||||||
/**
|
/**
|
||||||
* Define a namespace for the application.
|
* Define a namespace for the application.
|
||||||
*/
|
*/
|
||||||
window.app = {};
|
var app = {};
|
||||||
var app = window.app;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+2
-6
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: d3 integration example
|
title: d3 Integration
|
||||||
shortdesc: Example of using ol3 and d3 together.
|
shortdesc: Example of using ol3 and d3 together.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
|
<p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
|
||||||
@@ -9,8 +9,4 @@ resources:
|
|||||||
- http://d3js.org/d3.v3.min.js
|
- http://d3js.org/d3.v3.min.js
|
||||||
- http://d3js.org/topojson.v1.min.js
|
- http://d3js.org/topojson.v1.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
Vendored
-1
@@ -1,5 +1,4 @@
|
|||||||
// NOCOMPILE
|
// NOCOMPILE
|
||||||
// this example uses d3 for which we don't have an externs file.
|
|
||||||
goog.require('ol');
|
goog.require('ol');
|
||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
|
|||||||
@@ -1,23 +1,19 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Device-Orientation example
|
title: Device Orientation
|
||||||
shortdesc: Listen to DeviceOrientation events.
|
shortdesc: Listen to DeviceOrientation events.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to track changes in device orientation.
|
This example shows how to track changes in device orientation.
|
||||||
tags: "orientation, openstreetmap"
|
tags: "orientation, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<label>
|
||||||
<div id="map" class="map"></div>
|
track changes
|
||||||
<div class="span12">
|
<input id="track" type="checkbox"/>
|
||||||
<h4 id="title">Device orientation example</h4>
|
</label>
|
||||||
<label class="checkbox" for="track">
|
<p>
|
||||||
<input id="track" type="checkbox"/>track changes
|
α : <code id="alpha"></code>
|
||||||
</label>
|
β : <code id="beta"></code>
|
||||||
<p>α : <code id="alpha"></code></p>
|
γ : <code id="gamma"></code>
|
||||||
<p>β : <code id="beta"></code></p>
|
heading : <code id="heading"></code>
|
||||||
<p>γ : <code id="gamma"></code></p>
|
</p>
|
||||||
<p>heading : <code id="heading"></code></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,21 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Drag-and-Drop image vector example
|
title: Drag-and-Drop Image Vector
|
||||||
shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
|
shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector.
|
||||||
docs: >
|
docs: >
|
||||||
Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to
|
Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
|
||||||
an image on the client.
|
|
||||||
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
|
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
|
||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="span4 offset4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,21 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Drag-and-Drop example
|
title: Drag-and-Drop
|
||||||
shortdesc: Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
|
shortdesc: Example of using the drag-and-drop interaction.
|
||||||
docs: >
|
docs: >
|
||||||
Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will
|
Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
|
||||||
only work with data in EPSG:4326 and EPSG:3857.
|
|
||||||
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
|
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
|
||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="span4 offset4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Drag rotate and zoom example
|
title: Drag, Rotate, and Zoom
|
||||||
shortdesc: A single interaction to drag, rotate, and zoom.
|
shortdesc: A single interaction to drag, rotate, and zoom.
|
||||||
docs: >
|
docs: >
|
||||||
<p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
|
<p><code>Shift+Drag</code> to rotate and zoom the map around its center.</p>
|
||||||
tags: "drag, rotate, zoom, interaction"
|
tags: "drag, rotate, zoom, interaction"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,21 +1,17 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Draw and modify features example
|
title: Draw and Modify Features
|
||||||
shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
|
shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
|
||||||
docs: >
|
docs: >
|
||||||
Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
|
Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
|
||||||
tags: "draw, edit, modify, vector, featureoverlay"
|
tags: "draw, edit, modify, vector, featureoverlay"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<form class="form-inline">
|
||||||
<div id="map" class="map"></div>
|
<label>Geometry type </label>
|
||||||
</div>
|
<select id="type">
|
||||||
<form class="form-inline">
|
<option value="Point">Point</option>
|
||||||
<label>Geometry type </label>
|
<option value="LineString">LineString</option>
|
||||||
<select id="type">
|
<option value="Polygon">Polygon</option>
|
||||||
<option value="Point">Point</option>
|
</select>
|
||||||
<option value="LineString">LineString</option>
|
</form>
|
||||||
<option value="Polygon">Polygon</option>
|
|
||||||
</select>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+14
-18
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Draw features example
|
title: Draw Features
|
||||||
shortdesc: Example of using the ol.interaction.Draw interaction.
|
shortdesc: Example of using the ol.interaction.Draw interaction.
|
||||||
docs: >
|
docs: >
|
||||||
Example of using the Draw interaction. Select a geometry type from the
|
Example of using the Draw interaction. Select a geometry type from the
|
||||||
@@ -12,20 +12,16 @@ docs: >
|
|||||||
points and creates a rectangular box.
|
points and creates a rectangular box.
|
||||||
tags: "draw, edit, freehand, vector"
|
tags: "draw, edit, freehand, vector"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<form class="form-inline">
|
||||||
<div id="map" class="map"></div>
|
<label>Geometry type </label>
|
||||||
<form class="form-inline">
|
<select id="type">
|
||||||
<label>Geometry type </label>
|
<option value="Point">Point</option>
|
||||||
<select id="type">
|
<option value="LineString">LineString</option>
|
||||||
<option value="None">None</option>
|
<option value="Polygon">Polygon</option>
|
||||||
<option value="Point">Point</option>
|
<option value="Circle">Circle</option>
|
||||||
<option value="LineString">LineString</option>
|
<option value="Square">Square</option>
|
||||||
<option value="Polygon">Polygon</option>
|
<option value="Box">Box</option>
|
||||||
<option value="Circle">Circle</option>
|
<option value="None">None</option>
|
||||||
<option value="Square">Square</option>
|
</select>
|
||||||
<option value="Box">Box</option>
|
</form>
|
||||||
</select>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Dynamic data example
|
title: Dynamic Data
|
||||||
shortdesc: Example of dynamic data.
|
shortdesc: Example of dynamic data.
|
||||||
docs: >
|
docs: >
|
||||||
Example of dynamic data.
|
Example of dynamic data.
|
||||||
tags: "dynamic-data"
|
tags: "dynamic-data"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -9,8 +9,4 @@ docs: >
|
|||||||
<p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
|
<p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
|
||||||
tags: "KML, vector, style, geometry, cluster"
|
tags: "KML, vector, style, geometry, cluster"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: EPSG:4326 example
|
title: EPSG:4326
|
||||||
shortdesc: Example of a map in EPSG:4326.
|
shortdesc: Example of a map in EPSG:4326.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to create a map in EPSG:4326.
|
This example shows how to create a map in EPSG:4326.
|
||||||
tags: "epsg4326"
|
tags: "epsg4326"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,18 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Export map example
|
title: Map Export
|
||||||
shortdesc: Example of exporting a map as a PNG image.
|
shortdesc: Example of exporting a map as a PNG image.
|
||||||
docs: >
|
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"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="no-download" class="alert alert-danger" style="display: none">
|
||||||
<div id="map" class="map"></div>
|
This example requires a browser that supports the
|
||||||
<div id="no-download" class="alert alert-danger" style="display: none">
|
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
||||||
This example requires a browser that supports the
|
|
||||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
|
||||||
</div>
|
|
||||||
<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Export PNG</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Feature animation example
|
title: Custom Animation
|
||||||
shortdesc: Demonstrates how to animate features.
|
shortdesc: Demonstrates how to animate features.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
||||||
@@ -8,8 +8,4 @@ docs: >
|
|||||||
is added to the layer.
|
is added to the layer.
|
||||||
tags: "animation, vector, feature, flash"
|
tags: "animation, vector, feature, flash"
|
||||||
---
|
---
|
||||||
<div class="row">
|
<div id="map" class="map"></div>
|
||||||
<div class="span8">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Animate a feature movement
|
title: Marker Animation
|
||||||
shortdesc: Demonstrates how to move a feature along a line.
|
shortdesc: Demonstrates how to move a feature along a line.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
||||||
@@ -8,17 +8,9 @@ docs: >
|
|||||||
is being used.
|
is being used.
|
||||||
tags: "animation, feature, postcompose, polyline"
|
tags: "animation, feature, postcompose, polyline"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<label for="speed">
|
||||||
<div id="map" class="map"></div>
|
speed:
|
||||||
</div>
|
<input id="speed" type="range" min="10" max="999" step="10" value="60">
|
||||||
</div>
|
</label>
|
||||||
<div class="row-fluid">
|
<button id="start-animation">Start Animation</button>
|
||||||
<div class="span12">
|
|
||||||
<label for="speed">
|
|
||||||
speed:
|
|
||||||
<input id="speed" type="range" min="10" max="999" step="10" value="60">
|
|
||||||
</label>
|
|
||||||
<button id="start-animation">Start Animation</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Flight animation example
|
title: Flight Animation
|
||||||
shortdesc: Demonstrates how to animate flights with ´postcompose´.
|
shortdesc: Demonstrates how to animate flights with ´postcompose´.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
||||||
@@ -14,8 +14,4 @@ tags: "animation, vector, feature, flights, arc"
|
|||||||
resources:
|
resources:
|
||||||
- https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
|
- https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
|
||||||
---
|
---
|
||||||
<div class="row">
|
<div id="map" class="map"></div>
|
||||||
<div class="span8">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
// NOCOMPILE
|
// NOCOMPILE
|
||||||
// this example uses arc.js for which we don't have an externs file.
|
|
||||||
goog.require('ol.Attribution');
|
goog.require('ol.Attribution');
|
||||||
goog.require('ol.Feature');
|
goog.require('ol.Feature');
|
||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.control');
|
|
||||||
goog.require('ol.geom.LineString');
|
goog.require('ol.geom.LineString');
|
||||||
goog.require('ol.layer.Tile');
|
goog.require('ol.layer.Tile');
|
||||||
goog.require('ol.layer.Vector');
|
goog.require('ol.layer.Vector');
|
||||||
@@ -22,12 +20,6 @@ var map = new ol.Map({
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
controls: ol.control.defaults({
|
|
||||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
|
||||||
collapsible: false
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
renderer: 'canvas',
|
|
||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: [0, 0],
|
center: [0, 0],
|
||||||
@@ -89,8 +81,10 @@ var flightsSource = new ol.source.Vector({
|
|||||||
})],
|
})],
|
||||||
loader: function(extent, resolution, projection) {
|
loader: function(extent, resolution, projection) {
|
||||||
var url = 'data/openflights/flights.json';
|
var url = 'data/openflights/flights.json';
|
||||||
$.ajax({url: url, dataType: 'json', success: function(response) {
|
fetch(url).then(function(response) {
|
||||||
var flightsData = response.flights;
|
return response.json();
|
||||||
|
}).then(function(json) {
|
||||||
|
var flightsData = json.flights;
|
||||||
for (var i = 0; i < flightsData.length; i++) {
|
for (var i = 0; i < flightsData.length; i++) {
|
||||||
var flight = flightsData[i];
|
var flight = flightsData[i];
|
||||||
var from = flight[0];
|
var from = flight[0];
|
||||||
@@ -116,7 +110,7 @@ var flightsSource = new ol.source.Vector({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
map.on('postcompose', animateFlights);
|
map.on('postcompose', animateFlights);
|
||||||
}});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+8
-12
@@ -1,18 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Fractal Example
|
title: Fractal Rendering
|
||||||
shortdesc: Example of a fractal.
|
shortdesc: Example of a fractal.
|
||||||
docs: >
|
docs: >
|
||||||
Example of a fractal.
|
This example demonstrates how features with many vertices can be efficiently rendered.
|
||||||
tags: "fractal, vector"
|
tags: "fractal, vector"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<label for="depth">
|
||||||
<div id="map" class="map"></div>
|
depth:
|
||||||
<label for="depth">
|
<input id="depth" type="range" min="0" max="9" step="1" value="5">
|
||||||
depth:
|
(<span id="count">#</span> points)
|
||||||
<input id="depth" type="range" min="0" max="9" step="1" value="5">
|
</label>
|
||||||
(<span id="count">#</span> points)
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,16 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Full screen drag rotate and zoom example
|
title: Full Screen Drag, Rotate, and Zoom
|
||||||
shortdesc: Example of drag rotate and zoom control with full screen effect.
|
shortdesc: Example of drag rotate and zoom control with full screen effect.
|
||||||
docs: >
|
docs: >
|
||||||
<p>Hold down <code>Shift</code> + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift</code> + drag thing again.</p>
|
<p>Hold down <code>Shift+Drag</code> to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift+Drag</code> thing again.</p>
|
||||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||||
tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
|
tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
|
||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Full screen control example
|
title: Full Screen Control
|
||||||
shortdesc: Example of a full screen control.
|
shortdesc: Example of a full screen control.
|
||||||
docs: >
|
docs: >
|
||||||
<p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p>
|
<p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p>
|
||||||
@@ -9,8 +9,4 @@ tags: "full-screen, bing, bing-maps"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: GeoJSON example
|
title: GeoJSON
|
||||||
shortdesc: Example of GeoJSON features.
|
shortdesc: Example of GeoJSON features.
|
||||||
docs: >
|
docs: >
|
||||||
Example of GeoJSON features.
|
Example of GeoJSON features.
|
||||||
tags: "geojson, vector, openstreetmap"
|
tags: "geojson, vector, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+16
-19
@@ -1,24 +1,21 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Geolocation example
|
title: Geolocation
|
||||||
shortdesc: Example of a geolocation map.
|
shortdesc: Using geolocation to control a map view.
|
||||||
docs: >
|
docs: >
|
||||||
Example of a geolocation map.
|
This example uses the Geolocation API to control the view.
|
||||||
tags: "geolocation, openstreetmap"
|
tags: "geolocation, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info" style="display: none;"></div>
|
||||||
<div id="map" class="map"></div>
|
<label for="track">
|
||||||
<div class="span4 pull-right">
|
track position
|
||||||
<div id="info" class="alert alert-danger" style="display: none;"></div>
|
<input id="track" type="checkbox"/>
|
||||||
</div>
|
</label>
|
||||||
<label class="checkbox" for="track">
|
<p>
|
||||||
<input id="track" type="checkbox"/>track position
|
position accuracy : <code id="accuracy"></code>
|
||||||
</label>
|
altitude : <code id="altitude"></code>
|
||||||
<p>position accuracy : <code id="accuracy"></code></p>
|
altitude accuracy : <code id="altitudeAccuracy"></code>
|
||||||
<p>altitude : <code id="altitude"></code></p>
|
heading : <code id="heading"></code>
|
||||||
<p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
|
speed : <code id="speed"></code>
|
||||||
<p>heading : <code id="heading"></code></p>
|
</p>
|
||||||
<p>speed : <code id="speed"></code></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,20 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: GetFeatureInfo example (image layer)
|
title: WMS GetFeatureInfo (Image Layer)
|
||||||
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
|
shortdesc: Using an image WMS source with GetFeatureInfo requests
|
||||||
docs: >
|
docs: >
|
||||||
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
|
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
|
||||||
tags: "getfeatureinfo, forEachLayerAtPixel"
|
tags: "getfeatureinfo, forEachLayerAtPixel"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span4 offset4 iframe-info">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ var wmsSource = new ol.source.ImageWMS({
|
|||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||||
params: {'LAYERS': 'ne:ne'},
|
params: {'LAYERS': 'ne:ne'},
|
||||||
serverType: 'geoserver',
|
serverType: 'geoserver',
|
||||||
crossOrigin: ''
|
crossOrigin: 'anonymous'
|
||||||
});
|
});
|
||||||
|
|
||||||
var wmsLayer = new ol.layer.Image({
|
var wmsLayer = new ol.layer.Image({
|
||||||
|
|||||||
@@ -1,20 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: WMS GetFeatureInfo example (tile layer)
|
title: WMS GetFeatureInfo (Tile Layer)
|
||||||
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.
|
shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source
|
||||||
docs: >
|
docs: >
|
||||||
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
|
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
|
||||||
tags: "getfeatureinfo, forEachLayerAtPixel"
|
tags: "getfeatureinfo, forEachLayerAtPixel"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span4 offset4 iframe-info">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ var wmsSource = new ol.source.TileWMS({
|
|||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||||
params: {'LAYERS': 'ne:ne'},
|
params: {'LAYERS': 'ne:ne'},
|
||||||
serverType: 'geoserver',
|
serverType: 'geoserver',
|
||||||
crossOrigin: ''
|
crossOrigin: 'anonymous'
|
||||||
});
|
});
|
||||||
|
|
||||||
var wmsLayer = new ol.layer.Tile({
|
var wmsLayer = new ol.layer.Tile({
|
||||||
|
|||||||
+3
-11
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: GPX example
|
title: GPX Data
|
||||||
shortdesc: Example of using the GPX source.
|
shortdesc: Example of using the GPX source.
|
||||||
docs: >
|
docs: >
|
||||||
Example of using the GPX source.
|
Example of using the GPX source.
|
||||||
@@ -8,13 +8,5 @@ tags: "GPX"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="span4 offset4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Graticule example
|
title: Map Graticule
|
||||||
shortdesc: This example shows how to add a graticule overlay to a map.
|
shortdesc: This example shows how to add a graticule overlay to a map.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to add a graticule overlay to a map.
|
This example shows how to add a graticule overlay to a map.
|
||||||
tags: "graticule"
|
tags: "graticule"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,21 +1,15 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Earthquakes heatmap
|
title: Earthquakes Heatmap
|
||||||
shortdesc: Demonstrates the use of a heatmap layer.
|
shortdesc: Demonstrates the use of a heatmap layer.
|
||||||
docs: >
|
docs: >
|
||||||
This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
|
This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
|
||||||
tags: "heatmap, kml, vector, style"
|
tags: "heatmap, kml, vector, style"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<form>
|
||||||
<div id="map" class="map"></div>
|
<label>radius size</label>
|
||||||
</div>
|
<input id="radius" type="range" min="1" max="50" step="1" value="5"/>
|
||||||
<div class="span4">
|
<label>blur size</label>
|
||||||
<form>
|
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
|
||||||
<label>radius size</label>
|
</form>
|
||||||
<input id="radius" type="range" min="1" max="50" step="1" value="5"/>
|
|
||||||
<label>blur size</label>
|
|
||||||
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,18 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Icon sprites with WebGL example
|
title: Icon Sprites with WebGL
|
||||||
shortdesc: Icon sprite with WebGL
|
shortdesc: Icon sprite with WebGL
|
||||||
docs: >
|
docs: >
|
||||||
<p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
|
<p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
|
||||||
tags: "webgl, icon, sprite, vector, point"
|
tags: "webgl, icon, sprite, vector, point"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="span2 offset2 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+6
-6
@@ -1,13 +1,13 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Vector Icon Example
|
title: Icon Symbolizer
|
||||||
shortdesc: Example using an icon to symbolize a point.
|
shortdesc: Example using an icon to symbolize a point.
|
||||||
docs: >
|
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:
|
||||||
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"><div id="popup"></div></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"><div id="popup"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+4
-12
@@ -1,19 +1,11 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: IGC example
|
title: IGC Data
|
||||||
shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
|
shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
||||||
tags: "complex-geometry, closest-feature, igc, opencyclemap"
|
tags: "complex-geometry, closest-feature, igc, opencyclemap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<input id="time" type="range" value="0" steps="1" />
|
||||||
<div id="map" class="map"></div>
|
<div id="info"> </div>
|
||||||
<input id="time" type="range" value="0" steps="1" />
|
|
||||||
<div class="span4 offset4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Image Filter Example
|
title: Image Filters
|
||||||
shortdesc: Apply a filter to imagery
|
shortdesc: Apply a filter to imagery
|
||||||
docs: >
|
docs: >
|
||||||
<p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
<p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
||||||
@@ -10,11 +10,7 @@ tags: "filter, image manipulation"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<select id="kernel" name="kernel">
|
<select id="kernel" name="kernel">
|
||||||
<option>none</option>
|
<option>none</option>
|
||||||
<option selected>sharpen</option>
|
<option selected>sharpen</option>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Image load events example
|
title: Image Load Events
|
||||||
shortdesc: Example using image load events.
|
shortdesc: Example using image load events.
|
||||||
docs: >
|
docs: >
|
||||||
<p>Image sources fire events related to image loading. You can
|
<p>Image sources fire events related to image loading. You can
|
||||||
@@ -10,9 +10,7 @@ docs: >
|
|||||||
renders an image loading progress bar at the bottom of the map.</p>
|
renders an image loading progress bar at the bottom of the map.</p>
|
||||||
tags: "image, events, loading"
|
tags: "image, events, loading"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div class="wrapper">
|
||||||
<div class="span12 wrapper">
|
<div id="map" class="map"></div>
|
||||||
<div id="map" class="map"></div>
|
<div id="progress"></div>
|
||||||
<div id="progress"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Image vector layer example
|
title: Image Vector Layer
|
||||||
shortdesc: Example of an image vector layer.
|
shortdesc: Example of an image vector layer.
|
||||||
docs: >
|
docs: >
|
||||||
<p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
|
<p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
|
||||||
@@ -8,13 +8,5 @@ docs: >
|
|||||||
is then used as the image of an image layer.</p>
|
is then used as the image of an image layer.</p>
|
||||||
tags: "vector, image"
|
tags: "vector, image"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="span4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+2
-8
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: JSTS Example
|
title: JSTS Integration
|
||||||
shortdesc: Example on how to use JSTS with OpenLayers 3.
|
shortdesc: Example on how to use JSTS with OpenLayers 3.
|
||||||
docs: >
|
docs: >
|
||||||
Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
|
Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
|
||||||
@@ -9,11 +9,5 @@ tags: "vector, jsts, buffer"
|
|||||||
resources:
|
resources:
|
||||||
- https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js
|
- https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js
|
||||||
- https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js
|
- https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+4
-3
@@ -12,10 +12,11 @@ goog.require('ol.source.Vector');
|
|||||||
|
|
||||||
|
|
||||||
var source = new ol.source.Vector();
|
var source = new ol.source.Vector();
|
||||||
$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
|
fetch('data/geojson/roads-seoul.geojson').then(function(response) {
|
||||||
|
return response.json();
|
||||||
|
}).then(function(json) {
|
||||||
var format = new ol.format.GeoJSON();
|
var format = new ol.format.GeoJSON();
|
||||||
var features = format.readFeatures(response,
|
var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
|
||||||
{featureProjection: 'EPSG:3857'});
|
|
||||||
|
|
||||||
var parser = new jsts.io.olParser();
|
var parser = new jsts.io.olParser();
|
||||||
|
|
||||||
|
|||||||
@@ -5,9 +5,9 @@ shortdesc: Demonstrates the use of a Shape symbolizer to render earthquake locat
|
|||||||
docs: >
|
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:
|
||||||
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"><div id="info"></div></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"><div id="info"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -6,9 +6,9 @@ docs: >
|
|||||||
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that fills timezones
|
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that fills timezones
|
||||||
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:
|
||||||
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"><div id="info"></div></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"><div id="info"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+5
-13
@@ -1,20 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: KML example
|
title: KML
|
||||||
shortdesc: Example of using the KML source.
|
shortdesc: Rendering KML with a vector source.
|
||||||
docs: >
|
docs: >
|
||||||
Example of using the KML source.
|
This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
|
||||||
tags: "KML"
|
tags: "KML"
|
||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="info"> </div>
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="span4 offset4 pull-right">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,16 +1,12 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Layer WebGL clipping example
|
title: Layer Clipping with WebGL
|
||||||
shortdesc: Layer WebGL clipping example.
|
shortdesc: Layer WebGL clipping example.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.
|
This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.
|
||||||
tags: "clipping, webgl, openstreetmap"
|
tags: "clipping, webgl, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="no-webgl" class="alert alert-danger" style="display: none">
|
<div id="no-webgl" class="alert alert-danger" style="display: none">
|
||||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
#map {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Layer clipping example
|
title: Layer Clipping
|
||||||
shortdesc: Layer clipping example
|
shortdesc: Layer clipping example
|
||||||
docs: >
|
docs: >
|
||||||
Layer clipping example
|
Layer clipping example
|
||||||
tags: "clipping, openstreetmap"
|
tags: "clipping, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -8,15 +8,9 @@ docs: >
|
|||||||
to limit rendering based on an extent.
|
to limit rendering based on an extent.
|
||||||
tags: "extent, tilejson"
|
tags: "extent, tilejson"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<button type="button" class="btn btn-default" id="northwest">northwest</button>
|
||||||
<div id="map" class="map"></div>
|
<button type="button" class="btn btn-default" id="northeast">northeast</button>
|
||||||
</div>
|
<button type="button" class="btn btn-default" id="southeast">southeast</button>
|
||||||
</div>
|
<button type="button" class="btn btn-default" id="southwest">southwest</button>
|
||||||
<div class="btn-group">
|
<button type="button" class="btn btn-default" id="world">world</button>
|
||||||
<button type="button" class="btn btn-default" id="northwest">northwest</button>
|
|
||||||
<button type="button" class="btn btn-default" id="northeast">northeast</button>
|
|
||||||
<button type="button" class="btn btn-default" id="southeast">southeast</button>
|
|
||||||
<button type="button" class="btn btn-default" id="southwest">southwest</button>
|
|
||||||
<button type="button" class="btn btn-default" id="world">world</button>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+46
-48
@@ -1,56 +1,54 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Layer group example
|
title: Layer Groups
|
||||||
shortdesc: Example of a map with layer group.
|
shortdesc: Example of a map with layer group.
|
||||||
docs: >
|
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:
|
||||||
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span6">
|
<div id="layertree">
|
||||||
<div id="map" class="map"></div>
|
<h5>Click on layer nodes below to change their properties.</h5>
|
||||||
</div>
|
<ul>
|
||||||
<div id="layertree" class="span6">
|
<li><span>OpenAerial layer</span>
|
||||||
<h5>Click on layer nodes below to change their properties.</h5>
|
<fieldset id="layer0">
|
||||||
<ul>
|
<label class="checkbox" for="visible0">
|
||||||
<li><span>OpenAerial layer</span>
|
<input id="visible0" class="visible" type="checkbox"/>visibility
|
||||||
<fieldset id="layer0">
|
</label>
|
||||||
<label class="checkbox" for="visible0">
|
<label>opacity</label>
|
||||||
<input id="visible0" class="visible" type="checkbox"/>visibility
|
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||||
</label>
|
</fieldset>
|
||||||
<label>opacity</label>
|
</li>
|
||||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
<li><span>Layer group</span>
|
||||||
</fieldset>
|
<fieldset id="layer1">
|
||||||
</li>
|
<label class="checkbox" for="visible1">
|
||||||
<li><span>Layer group</span>
|
<input id="visible1" class="visible" type="checkbox"/>visibility
|
||||||
<fieldset id="layer1">
|
</label>
|
||||||
<label class="checkbox" for="visible1">
|
<label>opacity</label>
|
||||||
<input id="visible1" class="visible" type="checkbox"/>visibility
|
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||||
</label>
|
</fieldset>
|
||||||
<label>opacity</label>
|
<ul>
|
||||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
<li><span>Food insecurity layer</span>
|
||||||
</fieldset>
|
<fieldset id="layer10">
|
||||||
<ul>
|
<label class="checkbox" for="visible10">
|
||||||
<li><span>Food insecurity layer</span>
|
<input id="visible10" class="visible" type="checkbox"/>visibility
|
||||||
<fieldset id="layer10">
|
</label>
|
||||||
<label class="checkbox" for="visible10">
|
<label>opacity</label>
|
||||||
<input id="visible10" class="visible" type="checkbox"/>visibility
|
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||||
</label>
|
</fieldset>
|
||||||
<label>opacity</label>
|
</li>
|
||||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
<li><span>World borders layer</span>
|
||||||
</fieldset>
|
<fieldset id="layer11">
|
||||||
</li>
|
<label class="checkbox" for="visible11">
|
||||||
<li><span>World borders layer</span>
|
<input id="visible11" class="visible" type="checkbox"/>visibility
|
||||||
<fieldset id="layer11">
|
</label>
|
||||||
<label class="checkbox" for="visible11">
|
<label>opacity</label>
|
||||||
<input id="visible11" class="visible" type="checkbox"/>visibility
|
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||||
</label>
|
</fieldset>
|
||||||
<label>opacity</label>
|
</li>
|
||||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
</ul>
|
||||||
</fieldset>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Layer Spy Example
|
title: Layer Spy
|
||||||
shortdesc: View a portion of one layer over another
|
shortdesc: View a portion of one layer over another
|
||||||
docs: >
|
docs: >
|
||||||
<p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
<p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
||||||
@@ -12,8 +12,4 @@ tags: "spy, image manipulation"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+12
-5
@@ -14,9 +14,11 @@ var imagery = new ol.layer.Tile({
|
|||||||
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var container = document.getElementById('map');
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
layers: [roads, imagery],
|
layers: [roads, imagery],
|
||||||
target: 'map',
|
target: container,
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: ol.proj.fromLonLat([-109, 46.5]),
|
center: ol.proj.fromLonLat([-109, 46.5]),
|
||||||
zoom: 6
|
zoom: 6
|
||||||
@@ -24,22 +26,27 @@ var map = new ol.Map({
|
|||||||
});
|
});
|
||||||
|
|
||||||
var radius = 75;
|
var radius = 75;
|
||||||
$(document).keydown(function(evt) {
|
document.addEventListener('keydown', function(evt) {
|
||||||
if (evt.which === 38) {
|
if (evt.which === 38) {
|
||||||
radius = Math.min(radius + 5, 150);
|
radius = Math.min(radius + 5, 150);
|
||||||
map.render();
|
map.render();
|
||||||
|
evt.preventDefault();
|
||||||
} else if (evt.which === 40) {
|
} else if (evt.which === 40) {
|
||||||
radius = Math.max(radius - 5, 25);
|
radius = Math.max(radius - 5, 25);
|
||||||
map.render();
|
map.render();
|
||||||
|
evt.preventDefault();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// get the pixel position with every move
|
// get the pixel position with every move
|
||||||
var mousePosition = null;
|
var mousePosition = null;
|
||||||
$(map.getViewport()).on('mousemove', function(evt) {
|
|
||||||
mousePosition = map.getEventPixel(evt.originalEvent);
|
container.addEventListener('mousemove', function(event) {
|
||||||
|
mousePosition = map.getEventPixel(event);
|
||||||
map.render();
|
map.render();
|
||||||
}).on('mouseout', function() {
|
});
|
||||||
|
|
||||||
|
container.addEventListener('mouseout', function() {
|
||||||
mousePosition = null;
|
mousePosition = null;
|
||||||
map.render();
|
map.render();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Layer Swipe example
|
title: Layer Swipe
|
||||||
shortdesc: Example of a Layer swipe map.
|
shortdesc: Example of a Layer swipe map.
|
||||||
docs: >
|
docs: >
|
||||||
Example of a Layer swipe map.
|
Example of a Layer swipe map.
|
||||||
@@ -8,9 +8,5 @@ tags: "swipe, openstreetmap"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<input id="swipe" type="range" style="width: 100%">
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<input id="swipe" type="range" style="width: 100%">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,20 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Z-index layer ordering example
|
title: Layer Z-Index
|
||||||
shortdesc: Example of ordering layers using Z-index.
|
shortdesc: Example of ordering layers using Z-index.
|
||||||
docs: >
|
docs: >
|
||||||
|
There are are two managed layers (square and triangle) and one unmanaged layer (star).</br>
|
||||||
|
The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.
|
||||||
|
|
||||||
tags: "layer, ordering, z-index"
|
tags: "layer, ordering, z-index"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
There are are two managed layers (square and triangle) and one unmanaged layer (star).</br>
|
|
||||||
The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<label for="idx1">
|
<label for="idx1">
|
||||||
<input type="number" id="idx1"></input>
|
<input type="number" id="idx1"></input>
|
||||||
|
|||||||
@@ -82,11 +82,11 @@ layer0.setMap(map);
|
|||||||
|
|
||||||
|
|
||||||
function bindInputs(id, layer) {
|
function bindInputs(id, layer) {
|
||||||
var idxInput = $('#idx' + id);
|
var idxInput = document.getElementById('idx' + id);
|
||||||
idxInput.on('input change', function() {
|
idxInput.onchange = function() {
|
||||||
layer.setZIndex(parseInt(this.value, 10) || 0);
|
layer.setZIndex(parseInt(this.value, 10) || 0);
|
||||||
});
|
};
|
||||||
idxInput.val(String(layer.getZIndex()));
|
idxInput.value = String(layer.getZIndex());
|
||||||
}
|
}
|
||||||
bindInputs(1, layer1);
|
bindInputs(1, layer1);
|
||||||
bindInputs(2, layer2);
|
bindInputs(2, layer2);
|
||||||
|
|||||||
@@ -11,10 +11,6 @@ docs: >
|
|||||||
until its source is set.</p>
|
until its source is set.</p>
|
||||||
tags: "source"
|
tags: "source"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button id="set-source" class="code">layer.setSource(source)</button>
|
<button id="set-source" class="code">layer.setSource(source)</button>
|
||||||
<button id="unset-source" class="code">layer.setSource(null)</button>
|
<button id="unset-source" class="code">layer.setSource(null)</button>
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: LineString arrows example
|
title: LineString Arrows
|
||||||
shortdesc: Example of drawing arrows for each line string segment.
|
shortdesc: Example of drawing arrows for each line string segment.
|
||||||
docs: >
|
docs: >
|
||||||
Example of drawing arrows for each line string segment.
|
Example of drawing arrows for each line string segment.
|
||||||
tags: "draw, vector, arrow"
|
tags: "draw, vector, arrow"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,14 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Localized OpenStreetMap example
|
title: Localized OpenStreetMap
|
||||||
shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
|
shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server
|
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server
|
||||||
does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
|
does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
|
||||||
tags: "cors, localized-openstreetmap, openseamap, openstreetmap"
|
tags: "cors, localized-openstreetmap, openseamap, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -6,9 +6,6 @@ goog.require('ol.layer.Tile');
|
|||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
|
|
||||||
|
|
||||||
// tiles.openseamap.org does not set CORS headers, so we have to disable
|
|
||||||
// crossOrigin and we cannot use WebGL.
|
|
||||||
|
|
||||||
var openCycleMapLayer = new ol.layer.Tile({
|
var openCycleMapLayer = new ol.layer.Tile({
|
||||||
source: new ol.source.OSM({
|
source: new ol.source.OSM({
|
||||||
attributions: [
|
attributions: [
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Advanced Mapbox vector tiles example
|
title: Advanced Mapbox Vector Tiles
|
||||||
shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
|
shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
|
||||||
docs: >
|
docs: >
|
||||||
A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
|
A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
|
||||||
@@ -10,8 +10,4 @@ resources:
|
|||||||
cloak:
|
cloak:
|
||||||
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
|
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Mapbox vector tiles example
|
title: Mapbox Vector Tiles
|
||||||
shortdesc: Example of a Mapbox vector tiles map.
|
shortdesc: Example of a Mapbox vector tiles map.
|
||||||
docs: >
|
docs: >
|
||||||
A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
|
A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
|
||||||
@@ -10,8 +10,4 @@ resources:
|
|||||||
cloak:
|
cloak:
|
||||||
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
|
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: MapGuide untiled example
|
title: MapGuide Untiled
|
||||||
shortdesc: Example of a untiled MapGuide map.
|
shortdesc: Example of a untiled MapGuide map.
|
||||||
docs: >
|
docs: >
|
||||||
Example of a untiled MapGuide map.
|
Example of a untiled MapGuide map.
|
||||||
tags: "mapguide"
|
tags: "mapguide"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
+7
-11
@@ -1,18 +1,14 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: MapQuest example
|
title: MapQuest
|
||||||
shortdesc: Example of a MapQuest map.Shows how to create custom controls.
|
shortdesc: Example of a MapQuest map.Shows how to create custom controls.
|
||||||
docs: >
|
docs: >
|
||||||
Example of a MapQuest map.
|
Example of a MapQuest map.
|
||||||
tags: "mapquest"
|
tags: "mapquest"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<select id="layer-select">
|
||||||
<div id="map" class="map"></div>
|
<option value="Aerial">Aerial</option>
|
||||||
<select id="layer-select">
|
<option value="AerialWithLabels">Aerial with labels</option>
|
||||||
<option value="Aerial">Aerial</option>
|
<option value="Road" selected>Road</option>
|
||||||
<option value="AerialWithLabels">Aerial with labels</option>
|
</select>
|
||||||
<option value="Road" selected>Road</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -41,11 +41,16 @@ var map = new ol.Map({
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#layer-select').change(function() {
|
var select = document.getElementById('layer-select');
|
||||||
var style = $(this).find(':selected').val();
|
|
||||||
|
function onChange() {
|
||||||
|
var style = select.value;
|
||||||
var i, ii;
|
var i, ii;
|
||||||
for (i = 0, ii = layers.length; i < ii; ++i) {
|
for (i = 0, ii = layers.length; i < ii; ++i) {
|
||||||
layers[i].set('visible', (layers[i].get('style') == style));
|
layers[i].set('visible', (layers[i].get('style') == style));
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
$('#layer-select').trigger('change');
|
|
||||||
|
select.addEventListener('change', onChange);
|
||||||
|
|
||||||
|
onChange();
|
||||||
|
|||||||
@@ -1,21 +1,22 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Measure example
|
title: Measure
|
||||||
shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
|
shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
|
||||||
docs: >
|
docs: >
|
||||||
<p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account</i></p>
|
<p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account</i></p>
|
||||||
tags: "draw, edit, measure, vector"
|
tags: "draw, edit, measure, vector"
|
||||||
|
resources:
|
||||||
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
<label>Geometry type </label>
|
<label>Geometry type </label>
|
||||||
<select id="type">
|
<select id="type">
|
||||||
<option value="length">Length</option>
|
<option value="length">Length</option>
|
||||||
<option value="area">Area</option>
|
<option value="area">Area</option>
|
||||||
</select>
|
</select>
|
||||||
<label class="checkbox"><input type="checkbox" id="geodesic"/>use geodesic measures</label>
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" id="geodesic">
|
||||||
|
use geodesic measures
|
||||||
|
</label>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,15 +1,11 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Min/max resolution example
|
title: Layer Min/Max Resolution
|
||||||
shortdesc: Show/hide layers depending on current view resolution.
|
shortdesc: Show/hide layers depending on current view resolution.
|
||||||
docs: >
|
docs: >
|
||||||
<p>Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.</p>
|
<p>Zoom in twice: the MapBox layer should hide and the OSM layer should be shown.</p>
|
||||||
<p>If you continue to zoom in, you'll see the OSM layer also disappear.</p>
|
<p>If you continue to zoom in, you'll see the OSM layer also disappear.</p>
|
||||||
<p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
|
<p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
|
||||||
tags: "minResolution, maxResolution, resolution"
|
tags: "minResolution, maxResolution, resolution"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,14 +1,10 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Modify features example
|
title: Modify Features
|
||||||
shortdesc: Editing features with the modify interaction.
|
shortdesc: Editing features with the modify interaction.
|
||||||
docs: >
|
docs: >
|
||||||
<p>This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing.
|
<p>This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing.
|
||||||
Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (<code>Shift</code>+click to select multiple features).</p>
|
Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (<code>Shift+Click</code> to select multiple features).</p>
|
||||||
tags: "modify, edit, vector"
|
tags: "modify, edit, vector"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Modify features test
|
title: Modify Features Test
|
||||||
shortdesc: Example for testing feature modification.
|
shortdesc: Example for testing feature modification.
|
||||||
docs: >
|
docs: >
|
||||||
Example for testing feature modification.
|
Example for testing feature modification.
|
||||||
tags: "modify, edit, vector"
|
tags: "modify, edit, vector"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,25 +1,19 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Mouse position example
|
title: Mouse Position
|
||||||
shortdesc: Example of a mouse position control, outside the map.
|
shortdesc: Example of a mouse position control, outside the map.
|
||||||
docs: >
|
docs: >
|
||||||
Example of a mouse position control, outside the map.
|
Example of a mouse position control, outside the map.
|
||||||
tags: "mouse-position, openstreetmap"
|
tags: "mouse-position, openstreetmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="mouse-position"></div>
|
||||||
<div id="map" class="map"></div>
|
<form>
|
||||||
</div>
|
<label>Projection </label>
|
||||||
</div>
|
<select id="projection">
|
||||||
<div class="span6">
|
<option value="EPSG:4326">EPSG:4326</option>
|
||||||
<form>
|
<option value="EPSG:3857">EPSG:3857</option>
|
||||||
<label>Projection </label>
|
</select>
|
||||||
<select id="projection">
|
<label>Precision </label>
|
||||||
<option value="EPSG:4326">EPSG:4326</option>
|
<input id="precision" type="number" min="0" max="12" value="4"/>
|
||||||
<option value="EPSG:3857">EPSG:3857</option>
|
</form>
|
||||||
</select>
|
|
||||||
<label>Precision </label>
|
|
||||||
<input id="precision" type="number" min="0" max="12" value="4"/>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="span6" id="mouse-position"> </div>
|
|
||||||
|
|||||||
@@ -36,14 +36,13 @@ var map = new ol.Map({
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
var projectionSelect = $('#projection');
|
var projectionSelect = document.getElementById('projection');
|
||||||
projectionSelect.on('change', function() {
|
projectionSelect.addEventListener('change', function(event) {
|
||||||
mousePositionControl.setProjection(ol.proj.get(this.value));
|
mousePositionControl.setProjection(ol.proj.get(event.target.value));
|
||||||
});
|
});
|
||||||
projectionSelect.val(mousePositionControl.getProjection().getCode());
|
|
||||||
|
|
||||||
var precisionInput = $('#precision');
|
var precisionInput = document.getElementById('precision');
|
||||||
precisionInput.on('change', function() {
|
precisionInput.addEventListener('change', function(event) {
|
||||||
var format = ol.coordinate.createStringXY(this.valueAsNumber);
|
var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
|
||||||
mousePositionControl.setCoordinateFormat(format);
|
mousePositionControl.setCoordinateFormat(format);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,17 +1,13 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Moveend Example
|
title: Moveend Event
|
||||||
shortdesc: Use of the moveend event.
|
shortdesc: Use of the moveend event.
|
||||||
docs: >
|
docs: >
|
||||||
<p>In this example, a listener is registered for the map's <code>moveend</code> event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
|
<p>In this example, a listener is registered for the map's <code>moveend</code> event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
|
||||||
tags: "moveend, map, event"
|
tags: "moveend, map, event"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<label>top</label><input type="text" id="top">
|
<label>top</label><input type="text" id="top">
|
||||||
<label>right</label><input type="text" id="right">
|
<label>right</label><input type="text" id="right"><br>
|
||||||
<label>bottom</label><input type="text" id="bottom">
|
<label>bottom</label><input type="text" id="bottom">
|
||||||
<label>left</label><input type="text" id="left">
|
<label>left</label><input type="text" id="left">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Navigation controls example
|
title: Navigation Controls
|
||||||
shortdesc: Shows how to add navigation controls.
|
shortdesc: Shows how to add navigation controls.
|
||||||
docs: >
|
docs: >
|
||||||
<p>This example shows how to use the beforeRender function on the Map to run one
|
<p>This example shows how to use the beforeRender function on the Map to run one
|
||||||
@@ -12,8 +12,4 @@ docs: >
|
|||||||
</ul>
|
</ul>
|
||||||
tags: "control, navigation, extent"
|
tags: "control, navigation, extent"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,18 +1,16 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Overlay example
|
title: Overlay
|
||||||
shortdesc: Demonstrates overlays.
|
shortdesc: Demonstrates overlays.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The popups are created using <a href="http://getbootstrap.com/javascript/#popovers">Popovers</a> from Bootstrap.</p>
|
<p>The popups are created using <a href="http://getbootstrap.com/javascript/#popovers">Popovers</a> from Bootstrap.</p>
|
||||||
tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
|
tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
|
||||||
resources:
|
resources:
|
||||||
- overlay.css
|
- https://code.jquery.com/jquery-1.11.2.min.js
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
|
||||||
|
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: none;">
|
<div style="display: none;">
|
||||||
<!-- Clickable label for Vienna -->
|
<!-- Clickable label for Vienna -->
|
||||||
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
||||||
|
|||||||
@@ -1,15 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: OverviewMap control example advanced
|
title: Custom Overview Map
|
||||||
shortdesc: Example of OverviewMap control with advanced customization.
|
shortdesc: Example of OverviewMap control with advanced customization.
|
||||||
docs: >
|
docs: >
|
||||||
<p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p>
|
<p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p>
|
||||||
tags: "overview, overviewmap"
|
tags: "overview, overviewmap"
|
||||||
resources:
|
|
||||||
- overviewmap-custom.css
|
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: OverviewMap control example
|
title: Overview Map Control
|
||||||
shortdesc: Example of OverviewMap control.
|
shortdesc: Example of OverviewMap control.
|
||||||
docs: >
|
docs: >
|
||||||
This example demonstrates the use of the OverviewMap control.
|
This example demonstrates the use of the OverviewMap control.
|
||||||
tags: "overview, overviewmap"
|
tags: "overview, overviewmap"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Permalink example
|
title: Permalink
|
||||||
shortdesc: Example on how to create permalinks.
|
shortdesc: Example on how to create permalinks.
|
||||||
docs: >
|
docs: >
|
||||||
In this example the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history"
|
In this example the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history"
|
||||||
@@ -12,8 +12,4 @@ docs: >
|
|||||||
target="_blank">a polyfill</a>.
|
target="_blank">a polyfill</a>.
|
||||||
tags: "permalink, openstreetmap, history"
|
tags: "permalink, openstreetmap, history"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,17 +1,11 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Custom styles for polygons
|
title: Custom Polygon Styles
|
||||||
shortdesc: Showing the vertices of a polygon with a custom style geometry.
|
shortdesc: Showing the vertices of a polygon with a custom style geometry.
|
||||||
docs: >
|
docs: >
|
||||||
In this example two different styles are created for the polygons:
|
In this example two different styles are created for the polygons:
|
||||||
* The first style is for the polygons themselves.
|
* The first style is for the polygons themselves.
|
||||||
* The second style is to draw the vertices of the polygons.
|
* The second style is to draw the vertices of the polygons.
|
||||||
tags: "polygon, vector, style, GeometryFunction"
|
tags: "polygon, vector, style, GeometryFunction"
|
||||||
resources:
|
|
||||||
- polygon-styles.css
|
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ var map = new ol.Map({
|
|||||||
layers: [layer],
|
layers: [layer],
|
||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: [0, 1000000],
|
center: [0, 3000000],
|
||||||
zoom: 2
|
zoom: 2
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|||||||
+5
-11
@@ -1,21 +1,15 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Popup example
|
title: Popup
|
||||||
shortdesc: Uses an overlay to create a popup.
|
shortdesc: Uses an overlay to create a popup.
|
||||||
docs: >
|
docs: >
|
||||||
<p>
|
<p>
|
||||||
Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
|
Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
|
||||||
</p>
|
</p>
|
||||||
tags: "overlay, popup, mapquest, openaerial"
|
tags: "overlay, popup, mapquest, openaerial"
|
||||||
resources:
|
|
||||||
- popup.css
|
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<div id="popup" class="ol-popup">
|
||||||
<div id="map" class="map"></div>
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||||
<div id="popup" class="ol-popup">
|
<div id="popup-content"></div>
|
||||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|
||||||
<div id="popup-content"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Preload example
|
title: Preload Tiles
|
||||||
shortdesc: Example of tile preloading.
|
shortdesc: Example of tile preloading.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.</p>
|
<p>The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.</p>
|
||||||
@@ -8,11 +8,5 @@ tags: "preload, bing"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map1" class="map"></div>
|
||||||
<div class="span6">
|
<div id="map2" class="map"></div>
|
||||||
<div id="map1" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div id="map2" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -21,13 +21,10 @@ docs: >
|
|||||||
tags: "raster, pixel"
|
tags: "raster, pixel"
|
||||||
resources:
|
resources:
|
||||||
- http://d3js.org/d3.v3.min.js
|
- http://d3js.org/d3.v3.min.js
|
||||||
- raster.css
|
|
||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div class="rel">
|
||||||
<div class="span12 rel">
|
<div id="map" class="map"></div>
|
||||||
<div id="map" class="map"></div>
|
<div id="plot"></div>
|
||||||
<div id="plot"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -27,14 +27,10 @@ tags: "raster, region growing"
|
|||||||
cloak:
|
cloak:
|
||||||
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map" style="cursor: pointer"></div>
|
||||||
<div class="span12">
|
<table class="controls">
|
||||||
<div id="map" class="map" style="cursor: pointer"></div>
|
<tr>
|
||||||
<table class="controls">
|
<td>Threshold: <span id="threshold-value"></span></td>
|
||||||
<tr>
|
<td><input id="threshold" type="range" min="1" max="50" value="20"></td>
|
||||||
<td>Threshold: <span id="threshold-value"></span></td>
|
</tr>
|
||||||
<td><input id="threshold" type="range" min="1" max="50" value="20"></td>
|
</table>
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Regular Shape example
|
title: Regular Shapes
|
||||||
shortdesc: Example of some Regular Shape styles.
|
shortdesc: Example of some Regular Shape styles.
|
||||||
docs: >
|
docs: >
|
||||||
|
|
||||||
tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
|
tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Reprojection with EPSG.io database search
|
title: Reprojection with EPSG.io Search
|
||||||
shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
|
shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
|
||||||
docs: >
|
docs: >
|
||||||
This example shows client-side raster reprojection capabilities from
|
This example shows client-side raster reprojection capabilities from
|
||||||
@@ -10,17 +10,16 @@ tags: "reprojection, projection, proj4js, mapquest, epsg.io"
|
|||||||
resources:
|
resources:
|
||||||
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
<form class="form-inline">
|
||||||
<div id="map" class="map"></div>
|
<label for="epsg-query">Search projection:</label>
|
||||||
|
<input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
|
||||||
|
<button id="epsg-search" class="btn">Search</button>
|
||||||
|
<span id="epsg-result"></span>
|
||||||
|
<div>
|
||||||
|
<label for="render-edges">
|
||||||
|
Render reprojection edges
|
||||||
|
<input type="checkbox" id="render-edges">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<form class="form-inline">
|
</form>
|
||||||
<label for="epsg-query">Search projection:</label>
|
|
||||||
<input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
|
|
||||||
<button id="epsg-search" class="btn">Search</button>
|
|
||||||
<span id="epsg-result"></span>
|
|
||||||
<div>
|
|
||||||
<label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -64,30 +64,26 @@ function setProjection(code, name, proj4def, bbox) {
|
|||||||
|
|
||||||
|
|
||||||
function search(query) {
|
function search(query) {
|
||||||
resultSpan.innerHTML = 'Searching...';
|
resultSpan.innerHTML = 'Searching ...';
|
||||||
$.ajax({
|
fetch('http://epsg.io/?format=json&q=' + query).then(function(response) {
|
||||||
url: 'http://epsg.io/?format=json&q=' + query,
|
return response.json();
|
||||||
dataType: 'jsonp',
|
}).then(function(json) {
|
||||||
success: function(response) {
|
var results = json['results'];
|
||||||
if (response) {
|
if (results && results.length > 0) {
|
||||||
var results = response['results'];
|
for (var i = 0, ii = results.length; i < ii; i++) {
|
||||||
if (results && results.length > 0) {
|
var result = results[i];
|
||||||
for (var i = 0, ii = results.length; i < ii; i++) {
|
if (result) {
|
||||||
var result = results[i];
|
var code = result['code'], name = result['name'],
|
||||||
if (result) {
|
proj4def = result['proj4'], bbox = result['bbox'];
|
||||||
var code = result['code'], name = result['name'],
|
if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
|
||||||
proj4def = result['proj4'], bbox = result['bbox'];
|
bbox && bbox.length == 4) {
|
||||||
if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
|
setProjection(code, name, proj4def, bbox);
|
||||||
bbox && bbox.length == 4) {
|
return;
|
||||||
setProjection(code, name, proj4def, bbox);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setProjection(null, null, null, null);
|
|
||||||
}
|
}
|
||||||
|
setProjection(null, null, null, null);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Image reprojection example
|
title: Image Reprojection
|
||||||
shortdesc: Demonstrates client-side reprojection of single image source.
|
shortdesc: Demonstrates client-side reprojection of single image source.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows client-side reprojection of single image source.
|
This example shows client-side reprojection of single image source.
|
||||||
@@ -8,8 +8,4 @@ tags: "reprojection, projection, proj4js, mapquest, image, imagestatic"
|
|||||||
resources:
|
resources:
|
||||||
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
|
||||||
---
|
---
|
||||||
<div class="row-fluid">
|
<div id="map" class="map"></div>
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -32,8 +32,8 @@ var map = new ol.Map({
|
|||||||
renderer: common.getRendererFromQueryString(),
|
renderer: common.getRendererFromQueryString(),
|
||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: ol.proj.transform(ol.extent.getCenter(imageExtent),
|
center: ol.proj.transform(
|
||||||
'EPSG:27700', 'EPSG:3857'),
|
ol.extent.getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'),
|
||||||
zoom: 4
|
zoom: 4
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user