ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4420 from openlayers/strapless

Browse Source 
Remove Bootstrap and jQuery from example snippets.
This commit is contained in:
Tim Schaub
2015-11-18 11:20:39 -07:00
parent b69e453061 cbfd533d49
commit 9ffed70ffd
173 changed files with 955 additions and 1586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
config/examples/example.html
View File

@@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<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/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">
{{{ extraHead.local }}}
{{{ css.tag }}}
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>{{ title }}</title>
</head>
@@ -24,14 +25,17 @@
<div class="container-fluid">
{{{ contents }}}
<div class="row-fluid">
<div class="span12">
<h4 id="title">{{ title }}</h4>
{{{ contents }}}
</div>
</div>
<div class="row-fluid">
<div class="span12">
<p id="shortdesc">{{ shortdesc }}</p>
<div id="docs">{{ md docs }}</div>
<div id="tags">{{ tags }}</div>
<div id="api-links">Related API documentation: {{{ js.apiHtml }}}</div>
</div>
</div>
@@ -41,47 +45,33 @@
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
</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="css">{{ css.source }}</textarea>
<textarea class="hidden" name="html">{{ contents }}</textarea>
<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>
<pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;{{ title }}&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
&lt;script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"&gt;&lt;/script&gt;
{{ extraHead.remote }}
{{#if css.source}}
&lt;style&gt;
{{ css.source }}
&lt;/style&gt;
{{/if}}
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container-fluid"&gt;
{{ contents }}
&lt;/div&gt;
&lt;script&gt;
{{ js.source }}
&lt;/script&gt;
&lt;/body&gt;
&lt;head&gt;
&lt;title&gt;{{ title }}&lt;/title&gt;
&lt;link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
&lt;script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"&gt;&lt;/script&gt;{{#if extraHead.remote}}
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
&lt;style&gt;
{{ indent css.source spaces=6 }} &lt;/style&gt;{{/if}}
&lt;/head&gt;
&lt;body&gt;
{{ indent contents spaces=4 }} &lt;script&gt;
{{ indent js.source spaces=6 }} &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</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/prism/prism.min.js"></script>
{{{ js.tag }}}
</body>
</html>

2
config/examples/readme.md
View File

@@ -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
* 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.

14
examples/accessible.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Accessibility example
title: Accessible Map
shortdesc: Example of an accessible map.
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.
@@ -10,11 +10,7 @@ docs: >
tags: "accessibility, tabindex"
---
<div class="row-fluid">
<div class="span12">
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
</div>
</div>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>

30
examples/animation.html
View File

@@ -1,27 +1,19 @@
---
layout: example.html
title: Animation example
title: View Animation
shortdesc: Demonstrates animated pan, zoom, and rotation.
docs: >
This example shows how to use the beforeRender function on the Map to run one
or more animations.
tags: "animation"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<button id="rotate-left" title="Rotate clockwise">↻</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
<button id="rotate-around-rome">Rotate around Rome</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>
<div id="map" class="map"></div>
<button id="rotate-left" title="Rotate clockwise">↻</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
<button id="rotate-around-rome">Rotate around Rome</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>

8
examples/arcgis-tiled.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Tiled ArcGIS MapServer example
title: Tiled ArcGIS MapServer
shortdesc: Example of a tiled ArcGIS layer.
docs: >
This example shows how to use an ArcGIS REST MapService as tiles.
@@ -9,8 +9,4 @@ docs: >
<code>ol.source.XYZ</code> instead.
tags: arcgis, tile, tilelayer"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/attributions.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Attributions example
title: Attributions
shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
docs: >
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.
tags: "attributions, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

22
examples/bing-maps.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Bing Maps example
title: Bing Maps
shortdesc: Example of a Bing Maps layer.
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>
@@ -8,15 +8,11 @@ tags: "bing, bing-maps"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road</option>
<option value="collinsBart">Collins Bart</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
</div>
</div>
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road</option>
<option value="collinsBart">Collins Bart</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>

102
examples/blend-modes.html
View File

@@ -1,6 +1,6 @@
---
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.
docs: >
<p>This example shows how to change the canvas compositing / blending mode in
@@ -20,57 +20,49 @@ docs: >
checkboxes.</p>
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal">
<label>
<select id="blend-mode" class="form-control">
<option value="source-over">source-over (default)</option>
<option>source-in</option>
<option>source-out</option>
<option>source-atop</option>
<option>destination-over</option>
<option>destination-in</option>
<option>destination-out</option>
<option>destination-atop</option>
<option>lighter</option>
<option>copy</option>
<option>xor</option>
<option>multiply</option>
<option>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option selected>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
Canvas compositing / blending mode
</label>
<label>
<input type="checkbox" id="affect-red" checked>
Red circle affected
</label>
<label>
<input type="checkbox" id="affect-green" checked>
Green circle affected
</label>
<label>
<input type="checkbox" id="affect-blue" checked>
Blue circle affected
</label>
</form>
</div>
</div>
<div id="map" class="map"></div>
<form class="form-horizontal">
<label>
<select id="blend-mode" class="form-control">
<option value="source-over">source-over (default)</option>
<option>source-in</option>
<option>source-out</option>
<option>source-atop</option>
<option>destination-over</option>
<option>destination-in</option>
<option>destination-out</option>
<option>destination-atop</option>
<option>lighter</option>
<option>copy</option>
<option>xor</option>
<option>multiply</option>
<option>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option selected>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
Canvas compositing / blending mode
</label>
<label>
<input type="checkbox" id="affect-red" checked>
Red circle affected
</label>
<label>
<input type="checkbox" id="affect-green" checked>
Green circle affected
</label>
<label>
<input type="checkbox" id="affect-blue" checked>
Blue circle affected
</label>
</form>

16
examples/box-selection.html
View File

@@ -1,20 +1,12 @@
---
layout: example.html
title: Box selection example
title: Box Selection
shortdesc: Using a DragBox interaction to select features.
docs: >
<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>
<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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">No countries selected</div>

1
examples/button-title.css
View File

@@ -1,4 +1,3 @@
.tooltip-inner {
white-space: nowrap;
}

12
examples/button-title.html
View File

@@ -1,13 +1,13 @@
---
layout: example.html
title: Custom tooltips example
title: Custom Tooltips
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
docs: >
This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
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 class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/canvas-tiles.html
View File

@@ -1,17 +1,13 @@
---
layout: example.html
title: Canvas tiles example
title: Canvas Tiles
shortdesc: Renders tiles with coordinates for debugging.
docs: >
The black grid tiles are generated on the client with an HTML5 canvas. The
displayed tile coordinates are OpenLayers tile coordinates. These increase
from bottom to top, but standard XYZ tiling scheme coordinates increase from
top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use
`-y - 1`.
`-y - 1`.
tags: "layers, openstreetmap, canvas"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

34
examples/center.html
View File

@@ -1,6 +1,6 @@
---
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.
docs: >
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
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
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"
---
<div class="row-fluid">
<div class="span12 mapcontainer">
<div id="map" class="map"></div>
<div class="padding-top"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-bottom"></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 class="mapcontainer">
<div id="map" class="map"></div>
<div class="padding-top"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-bottom"></div>
<div class="center"></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>

8
examples/cluster.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Clustering example
title: Clustered Features
shortdesc: Example of using <code>ol.source.Cluster</code>.
docs: >
This example shows how to do clustering on point features.
tags: "cluster, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

42
examples/color-manipulation.html
View File

@@ -1,30 +1,26 @@
---
layout: example.html
title: Manipulating colors with a raster source
title: Color Manipulation
shortdesc: Demonstrates color manipulation with a raster source.
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.
tags: "color, hue, lightness, chroma"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>hue</td>
<td><span id="hueOut"></span>°</td>
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
</tr>
<tr>
<td>chroma</td>
<td><span id="chromaOut"></span> %</td>
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
</tr>
<tr>
<td>lightness</td>
<td><span id="lightnessOut"></span> %</td>
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
</tr>
</table>
</div>
</div>
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>hue</td>
<td><span id="hueOut"></span>°</td>
<td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
</tr>
<tr>
<td>chroma</td>
<td><span id="chromaOut"></span> %</td>
<td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
</tr>
<tr>
<td>lightness</td>
<td><span id="lightnessOut"></span> %</td>
<td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
</tr>
</table>

8
examples/custom-controls.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Custom control example
title: Custom Controls
shortdesc: Shows how to create custom controls.
docs: >
This example creates a "rotate to north" button.
tags: "custom, control"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

2
examples/custom-controls.js
View File

@@ -75,7 +75,7 @@ var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
zoom: 3,
rotation: 1
})
});

8
examples/custom-interactions.html
View File

@@ -1,14 +1,10 @@
---
layout: example.html
title: Custom interaction example
title: Custom Interactions
shortdesc: Example of a custom interaction.
docs: >
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.
tags: "drag, feature, vector, editing, custom, interaction"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

3
examples/custom-interactions.js
View File

@@ -19,8 +19,7 @@ goog.require('ol.style.Style');
/**
* Define a namespace for the application.
*/
window.app = {};
var app = window.app;
var app = {};

8
examples/d3.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: d3 integration example
title: d3 Integration
shortdesc: Example of using ol3 and d3 together.
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>
@@ -9,8 +9,4 @@ resources:
- http://d3js.org/d3.v3.min.js
- http://d3js.org/topojson.v1.min.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

1
examples/d3.js vendored
View File

@@ -1,5 +1,4 @@
// NOCOMPILE
// this example uses d3 for which we don't have an externs file.
goog.require('ol');
goog.require('ol.Map');
goog.require('ol.View');

28
examples/device-orientation.html
View File

@@ -1,23 +1,19 @@
---
layout: example.html
title: Device-Orientation example
title: Device Orientation
shortdesc: Listen to DeviceOrientation events.
docs: >
This example shows how to track changes in device orientation.
tags: "orientation, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span12">
<h4 id="title">Device orientation example</h4>
<label class="checkbox" for="track">
<input id="track" type="checkbox"/>track changes
</label>
<p>&alpha; : <code id="alpha"></code></p>
<p>&beta; : <code id="beta"></code></p>
<p>&gamma; : <code id="gamma"></code></p>
<p>heading : <code id="heading"></code></p>
</div>
</div>
</div>
<div id="map" class="map"></div>
<label>
track changes
<input id="track" type="checkbox"/>
</label>
<p>
α : <code id="alpha"></code>&nbsp;&nbsp;
β : <code id="beta"></code>&nbsp;&nbsp;
γ : <code id="gamma"></code>&nbsp;&nbsp;
heading : <code id="heading"></code>
</p>

19
examples/drag-and-drop-image-vector.html
View File

@@ -1,21 +1,12 @@
---
layout: example.html
title: Drag-and-Drop image vector example
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.
title: Drag-and-Drop Image Vector
shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector.
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
an image on the client.
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.
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

19
examples/drag-and-drop.html
View File

@@ -1,21 +1,12 @@
---
layout: example.html
title: Drag-and-Drop example
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.
title: Drag-and-Drop
shortdesc: Example of using the drag-and-drop interaction.
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
only work with data in EPSG:4326 and EPSG:3857.
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.
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

10
examples/drag-rotate-and-zoom.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Drag rotate and zoom example
title: Drag, Rotate, and Zoom
shortdesc: A single interaction to drag, rotate, and zoom.
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

24
examples/draw-and-modify-features.html
View File

@@ -1,21 +1,17 @@
---
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.
docs: >
Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
tags: "draw, edit, modify, vector, featureoverlay"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
</div>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>

32
examples/draw-features.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Draw features example
title: Draw Features
shortdesc: Example of using the ol.interaction.Draw interaction.
docs: >
Example of using the Draw interaction. Select a geometry type from the
@@ -12,20 +12,16 @@ docs: >
points and creates a rectangular box.
tags: "draw, edit, freehand, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="None">None</option>
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="Square">Square</option>
<option value="Box">Box</option>
</select>
</form>
</div>
</div>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="Square">Square</option>
<option value="Box">Box</option>
<option value="None">None</option>
</select>
</form>

8
examples/dynamic-data.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Dynamic data example
title: Dynamic Data
shortdesc: Example of dynamic data.
docs: >
Example of dynamic data.
tags: "dynamic-data"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

6
examples/earthquake-clusters.html
View File

@@ -9,8 +9,4 @@ docs: >
<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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/epsg-4326.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: EPSG:4326 example
title: EPSG:4326
shortdesc: Example of a map in EPSG:4326.
docs: >
This example shows how to create a map in EPSG:4326.
tags: "epsg4326"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

16
examples/export-map.html
View File

@@ -1,18 +1,14 @@
---
layout: example.html
title: Export map example
title: Map Export
shortdesc: Example of exporting a map as a PNG image.
docs: >
Example of exporting a map as a PNG image.
tags: "export, png, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="no-download" class="alert alert-danger" style="display: none">
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 id="map" class="map"></div>
<div id="no-download" class="alert alert-danger" style="display: none">
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> Download PNG</a>

8
examples/feature-animation.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Feature animation example
title: Custom Animation
shortdesc: Demonstrates how to animate features.
docs: >
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
@@ -8,8 +8,4 @@ docs: >
is added to the layer.
tags: "animation, vector, feature, flash"
---
<div class="row">
<div class="span8">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

22
examples/feature-move-animation.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Animate a feature movement
title: Marker Animation
shortdesc: Demonstrates how to move a feature along a line.
docs: >
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
@@ -8,17 +8,9 @@ docs: >
is being used.
tags: "animation, feature, postcompose, polyline"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label for="speed">
speed:&nbsp;
<input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>
</div>
</div>
<div id="map" class="map"></div>
<label for="speed">
speed:&nbsp;
<input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>

8
examples/flight-animation.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Flight animation example
title: Flight Animation
shortdesc: Demonstrates how to animate flights with ´postcompose´.
docs: >
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:
- https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
---
<div class="row">
<div class="span8">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

16
examples/flight-animation.js
View File

@@ -1,10 +1,8 @@
// NOCOMPILE
// this example uses arc.js for which we don't have an externs file.
goog.require('ol.Attribution');
goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.geom.LineString');
goog.require('ol.layer.Tile');
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',
view: new ol.View({
center: [0, 0],
@@ -89,8 +81,10 @@ var flightsSource = new ol.source.Vector({
})],
loader: function(extent, resolution, projection) {
var url = 'data/openflights/flights.json';
$.ajax({url: url, dataType: 'json', success: function(response) {
var flightsData = response.flights;
fetch(url).then(function(response) {
return response.json();
}).then(function(json) {
var flightsData = json.flights;
for (var i = 0; i < flightsData.length; i++) {
var flight = flightsData[i];
var from = flight[0];
@@ -116,7 +110,7 @@ var flightsSource = new ol.source.Vector({
}
}
map.on('postcompose', animateFlights);
}});
});
}
});

20
examples/fractal.html
View File

@@ -1,18 +1,14 @@
---
layout: example.html
title: Fractal Example
title: Fractal Rendering
shortdesc: Example of a fractal.
docs: >
Example of a fractal.
This example demonstrates how features with many vertices can be efficiently rendered.
tags: "fractal, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<label for="depth">
depth:&nbsp;
<input id="depth" type="range" min="0" max="9" step="1" value="5">
&nbsp;(<span id="count">#</span> points)
</label>
</div>
</div>
<div id="map" class="map"></div>
<label for="depth">
depth:&nbsp;
<input id="depth" type="range" min="0" max="9" step="1" value="5">
&nbsp;(<span id="count">#</span> points)
</label>

10
examples/full-screen-drag-rotate-and-zoom.html
View File

@@ -1,16 +1,12 @@
---
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.
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>
tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/full-screen.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Full screen control example
title: Full Screen Control
shortdesc: Example of a full screen control.
docs: >
<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:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/geojson.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: GeoJSON example
title: GeoJSON
shortdesc: Example of GeoJSON features.
docs: >
Example of GeoJSON features.
tags: "geojson, vector, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

35
examples/geolocation.html
View File

@@ -1,24 +1,21 @@
---
layout: example.html
title: Geolocation example
shortdesc: Example of a geolocation map.
title: Geolocation
shortdesc: Using geolocation to control a map view.
docs: >
Example of a geolocation map.
This example uses the Geolocation API to control the view.
tags: "geolocation, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 pull-right">
<div id="info" class="alert alert-danger" style="display: none;"></div>
</div>
<label class="checkbox" for="track">
<input id="track" type="checkbox"/>track position
</label>
<p>position accuracy : <code id="accuracy"></code></p>
<p>altitude : <code id="altitude"></code></p>
<p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
<p>heading : <code id="heading"></code></p>
<p>speed : <code id="speed"></code></p>
</div>
</div>
<div id="map" class="map"></div>
<div id="info" style="display: none;"></div>
<label for="track">
track position
<input id="track" type="checkbox"/>
</label>
<p>
position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
altitude : <code id="altitude"></code>&nbsp;&nbsp;
altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
heading : <code id="heading"></code>&nbsp;&nbsp;
speed : <code id="speed"></code>
</p>

20
examples/getfeatureinfo-image.html
View File

@@ -1,20 +1,10 @@
---
layout: example.html
title: GetFeatureInfo example (image layer)
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
title: WMS GetFeatureInfo (Image Layer)
shortdesc: Using an image WMS source with GetFeatureInfo requests
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"
---
<div class="row-fluid">
<div class="span12">
<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">
&nbsp;
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

2
examples/getfeatureinfo-image.js
View File

@@ -8,7 +8,7 @@ var wmsSource = new ol.source.ImageWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver',
crossOrigin: ''
crossOrigin: 'anonymous'
});
var wmsLayer = new ol.layer.Image({

20
examples/getfeatureinfo-tile.html
View File

@@ -1,20 +1,10 @@
---
layout: example.html
title: WMS GetFeatureInfo example (tile layer)
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.
title: WMS GetFeatureInfo (Tile Layer)
shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source
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"
---
<div class="row-fluid">
<div class="span12">
<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">
&nbsp;
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

2
examples/getfeatureinfo-tile.js
View File

@@ -8,7 +8,7 @@ var wmsSource = new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver',
crossOrigin: ''
crossOrigin: 'anonymous'
});
var wmsLayer = new ol.layer.Tile({

14
examples/gpx.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: GPX example
title: GPX Data
shortdesc: Example of using the GPX source.
docs: >
Example of using the GPX source.
@@ -8,13 +8,5 @@ tags: "GPX"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

8
examples/graticule.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Graticule example
title: Map Graticule
shortdesc: This example shows how to add a graticule overlay to a map.
docs: >
This example shows how to add a graticule overlay to a map.
tags: "graticule"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

22
examples/heatmap-earthquakes.html
View File

@@ -1,21 +1,15 @@
---
layout: example.html
title: Earthquakes heatmap
title: Earthquakes Heatmap
shortdesc: Demonstrates the use of a heatmap layer.
docs: >
This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
tags: "heatmap, kml, vector, style"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<div class="span4">
<form>
<label>radius size</label>
<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>
<div id="map" class="map"></div>
<form>
<label>radius size</label>
<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>

14
examples/icon-sprite-webgl.html
View File

@@ -1,18 +1,10 @@
---
layout: example.html
title: Icon sprites with WebGL example
title: Icon Sprites with WebGL
shortdesc: Icon sprite with WebGL
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>
tags: "webgl, icon, sprite, vector, point"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span2 offset2 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

12
examples/icon.html
View File

@@ -1,13 +1,13 @@
---
layout: example.html
title: Vector Icon Example
title: Icon Symbolizer
shortdesc: Example using an icon to symbolize a point.
docs: >
Example using an icon to symbolize a point.
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 class="span12">
<div id="map" class="map"><div id="popup"></div></div>
</div>
</div>
<div id="map" class="map"><div id="popup"></div></div>

16
examples/igc.html
View File

@@ -1,19 +1,11 @@
---
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.
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>
tags: "complex-geometry, closest-feature, igc, opencyclemap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<input id="time" type="range" value="0" steps="1" />
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<input id="time" type="range" value="0" steps="1" />
<div id="info">&nbsp;</div>

8
examples/image-filter.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Image Filter Example
title: Image Filters
shortdesc: Apply a filter to imagery
docs: >
<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:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<select id="kernel" name="kernel">
<option>none</option>
<option selected>sharpen</option>

10
examples/image-load-events.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Image load events example
title: Image Load Events
shortdesc: Example using image load events.
docs: >
<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>
tags: "image, events, loading"
---
<div class="row-fluid">
<div class="span12 wrapper">
<div id="map" class="map"></div>
<div id="progress"></div>
</div>
<div class="wrapper">
<div id="map" class="map"></div>
<div id="progress"></div>
</div>

14
examples/image-vector-layer.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Image vector layer example
title: Image Vector Layer
shortdesc: Example of an image vector layer.
docs: >
<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>
tags: "vector, image"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

10
examples/jsts.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: JSTS Example
title: JSTS Integration
shortdesc: Example on how to use JSTS with OpenLayers 3.
docs: >
Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
@@ -9,11 +9,5 @@ tags: "vector, jsts, buffer"
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/jsts.min.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

7
examples/jsts.js
View File

@@ -12,10 +12,11 @@ goog.require('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 features = format.readFeatures(response,
{featureProjection: 'EPSG:3857'});
var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
var parser = new jsts.io.olParser();

10
examples/kml-earthquakes.html
View File

@@ -5,9 +5,9 @@ shortdesc: Demonstrates the use of a Shape symbolizer to render earthquake locat
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.
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 class="span12">
<div id="map" class="map"><div id="info"></div></div>
</div>
</div>
<div id="map" class="map"><div id="info"></div></div>

10
examples/kml-timezones.html
View File

@@ -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
yellow with an opacity calculated based on the current offset to local noon.
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 class="span12">
<div id="map" class="map"><div id="info"></div></div>
</div>
</div>
<div id="map" class="map"><div id="info"></div></div>

18
examples/kml.html
View File

@@ -1,20 +1,12 @@
---
layout: example.html
title: KML example
shortdesc: Example of using the KML source.
title: KML
shortdesc: Rendering KML with a vector source.
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"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

8
examples/layer-clipping-webgl.html
View File

@@ -1,16 +1,12 @@
---
layout: example.html
title: Layer WebGL clipping example
title: Layer Clipping with WebGL
shortdesc: Layer WebGL clipping example.
docs: >
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<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>.
</div>

3
examples/layer-clipping.css Normal file
View File

@@ -0,0 +1,3 @@
#map {
background: transparent;
}

8
examples/layer-clipping.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Layer clipping example
title: Layer Clipping
shortdesc: Layer clipping example
docs: >
Layer clipping example
tags: "clipping, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

18
examples/layer-extent.html
View File

@@ -8,15 +8,9 @@ docs: >
to limit rendering based on an extent.
tags: "extent, tilejson"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="btn-group">
<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>
<div id="map" class="map"></div>
<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>

94
examples/layer-group.html
View File

@@ -1,56 +1,54 @@
---
layout: example.html
title: Layer group example
title: Layer Groups
shortdesc: Example of a map with layer group.
docs: >
Example of a map with layer group.
tags: "tilejson, input, bind, group, layergroup"
resources:
- https://code.jquery.com/jquery-1.11.2.min.js
---
<div class="row-fluid">
<div class="span6">
<div id="map" class="map"></div>
</div>
<div id="layertree" class="span6">
<h5>Click on layer nodes below to change their properties.</h5>
<ul>
<li><span>OpenAerial layer</span>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>Layer group</span>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
<ul>
<li><span>Food insecurity layer</span>
<fieldset id="layer10">
<label class="checkbox" for="visible10">
<input id="visible10" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>World borders layer</span>
<fieldset id="layer11">
<label class="checkbox" for="visible11">
<input id="visible11" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
</ul>
</li>
</ul>
</div>
<div id="map" class="map"></div>
<div id="layertree">
<h5>Click on layer nodes below to change their properties.</h5>
<ul>
<li><span>OpenAerial layer</span>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>Layer group</span>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
<ul>
<li><span>Food insecurity layer</span>
<fieldset id="layer10">
<label class="checkbox" for="visible10">
<input id="visible10" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>World borders layer</span>
<fieldset id="layer11">
<label class="checkbox" for="visible11">
<input id="visible11" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
</ul>
</li>
</ul>
</div>

8
examples/layer-spy.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Layer Spy Example
title: Layer Spy
shortdesc: View a portion of one layer over another
docs: >
<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:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

17
examples/layer-spy.js
View File

@@ -14,9 +14,11 @@ var imagery = new ol.layer.Tile({
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
});
var container = document.getElementById('map');
var map = new ol.Map({
layers: [roads, imagery],
target: 'map',
target: container,
view: new ol.View({
center: ol.proj.fromLonLat([-109, 46.5]),
zoom: 6
@@ -24,22 +26,27 @@ var map = new ol.Map({
});
var radius = 75;
$(document).keydown(function(evt) {
document.addEventListener('keydown', function(evt) {
if (evt.which === 38) {
radius = Math.min(radius + 5, 150);
map.render();
evt.preventDefault();
} else if (evt.which === 40) {
radius = Math.max(radius - 5, 25);
map.render();
evt.preventDefault();
}
});
// get the pixel position with every move
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();
}).on('mouseout', function() {
});
container.addEventListener('mouseout', function() {
mousePosition = null;
map.render();
});

10
examples/layer-swipe.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Layer Swipe example
title: Layer Swipe
shortdesc: Example of a Layer swipe map.
docs: >
Example of a Layer swipe map.
@@ -8,9 +8,5 @@ tags: "swipe, openstreetmap"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<input id="swipe" type="range" style="width: 100%">
</div>
</div>
<div id="map" class="map"></div>
<input id="swipe" type="range" style="width: 100%">

14
examples/layer-z-index.html
View File

@@ -1,20 +1,14 @@
---
layout: example.html
title: Z-index layer ordering example
title: Layer Z-Index
shortdesc: Example of ordering layers using Z-index.
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"
---
<div class="row-fluid">
<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 id="map" class="map"></div>
<div>
<label for="idx1">
<input type="number" id="idx1"></input>

8
examples/layer-z-index.js
View File

@@ -82,11 +82,11 @@ layer0.setMap(map);
function bindInputs(id, layer) {
var idxInput = $('#idx' + id);
idxInput.on('input change', function() {
var idxInput = document.getElementById('idx' + id);
idxInput.onchange = function() {
layer.setZIndex(parseInt(this.value, 10) || 0);
});
idxInput.val(String(layer.getZIndex()));
};
idxInput.value = String(layer.getZIndex());
}
bindInputs(1, layer1);
bindInputs(2, layer2);

6
examples/lazy-source.html
View File

@@ -11,10 +11,6 @@ docs: >
until its source is set.</p>
tags: "source"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<button id="set-source" class="code">layer.setSource(source)</button>
<button id="unset-source" class="code">layer.setSource(null)</button>

8
examples/line-arrows.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: LineString arrows example
title: LineString Arrows
shortdesc: Example of drawing arrows for each line string segment.
docs: >
Example of drawing arrows for each line string segment.
tags: "draw, vector, arrow"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/localized-openstreetmap.html
View File

@@ -1,14 +1,10 @@
---
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.
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
does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
tags: "cors, localized-openstreetmap, openseamap, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

3
examples/localized-openstreetmap.js
View File

@@ -6,9 +6,6 @@ goog.require('ol.layer.Tile');
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({
source: new ol.source.OSM({
attributions: [

8
examples/mapbox-vector-tiles-advanced.html
View File

@@ -1,6 +1,6 @@
---
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.
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.
@@ -10,8 +10,4 @@ resources:
cloak:
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/mapbox-vector-tiles.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Mapbox vector tiles example
title: Mapbox Vector Tiles
shortdesc: Example of a Mapbox vector tiles map.
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.
@@ -10,8 +10,4 @@ resources:
cloak:
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/mapguide-untiled.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: MapGuide untiled example
title: MapGuide Untiled
shortdesc: Example of a untiled MapGuide map.
docs: >
Example of a untiled MapGuide map.
tags: "mapguide"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

18
examples/mapquest.html
View File

@@ -1,18 +1,14 @@
---
layout: example.html
title: MapQuest example
title: MapQuest
shortdesc: Example of a MapQuest map.Shows how to create custom controls.
docs: >
Example of a MapQuest map.
tags: "mapquest"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels">Aerial with labels</option>
<option value="Road" selected>Road</option>
</select>
</div>
</div>
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels">Aerial with labels</option>
<option value="Road" selected>Road</option>
</select>

13
examples/mapquest.js
View File

@@ -41,11 +41,16 @@ var map = new ol.Map({
})
});
$('#layer-select').change(function() {
var style = $(this).find(':selected').val();
var select = document.getElementById('layer-select');
function onChange() {
var style = select.value;
var i, ii;
for (i = 0, ii = layers.length; i < ii; ++i) {
layers[i].set('visible', (layers[i].get('style') == style));
}
});
$('#layer-select').trigger('change');
}
select.addEventListener('change', onChange);
onChange();

15
examples/measure.html
View File

@@ -1,21 +1,22 @@
---
layout: example.html
title: Measure example
title: Measure
shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
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>
tags: "draw, edit, measure, vector"
resources:
- https://code.jquery.com/jquery-1.11.2.min.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="length">Length</option>
<option value="area">Area</option>
</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>

10
examples/min-max-resolution.html
View File

@@ -1,15 +1,11 @@
---
layout: example.html
title: Min/max resolution example
title: Layer Min/Max Resolution
shortdesc: Show/hide layers depending on current view resolution.
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>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
tags: "minResolution, maxResolution, resolution"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/modify-features.html
View File

@@ -1,14 +1,10 @@
---
layout: example.html
title: Modify features example
title: Modify Features
shortdesc: Editing features with the modify interaction.
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.
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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/modify-test.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Modify features test
title: Modify Features Test
shortdesc: Example for testing feature modification.
docs: >
Example for testing feature modification.
tags: "modify, edit, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

30
examples/mouse-position.html
View File

@@ -1,25 +1,19 @@
---
layout: example.html
title: Mouse position example
title: Mouse Position
shortdesc: Example of a mouse position control, outside the map.
docs: >
Example of a mouse position control, outside the map.
tags: "mouse-position, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="span6">
<form>
<label>Projection </label>
<select id="projection">
<option value="EPSG:4326">EPSG:4326</option>
<option value="EPSG:3857">EPSG:3857</option>
</select>
<label>Precision </label>
<input id="precision" type="number" min="0" max="12" value="4"/>
</form>
</div>
<div class="span6" id="mouse-position">&nbsp;</div>
<div id="map" class="map"></div>
<div id="mouse-position"></div>
<form>
<label>Projection </label>
<select id="projection">
<option value="EPSG:4326">EPSG:4326</option>
<option value="EPSG:3857">EPSG:3857</option>
</select>
<label>Precision </label>
<input id="precision" type="number" min="0" max="12" value="4"/>
</form>

13
examples/mouse-position.js
View File

@@ -36,14 +36,13 @@ var map = new ol.Map({
})
});
var projectionSelect = $('#projection');
projectionSelect.on('change', function() {
mousePositionControl.setProjection(ol.proj.get(this.value));
var projectionSelect = document.getElementById('projection');
projectionSelect.addEventListener('change', function(event) {
mousePositionControl.setProjection(ol.proj.get(event.target.value));
});
projectionSelect.val(mousePositionControl.getProjection().getCode());
var precisionInput = $('#precision');
precisionInput.on('change', function() {
var format = ol.coordinate.createStringXY(this.valueAsNumber);
var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function(event) {
var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
mousePositionControl.setCoordinateFormat(format);
});

10
examples/moveend.html
View File

@@ -1,17 +1,13 @@
---
layout: example.html
title: Moveend Example
title: Moveend Event
shortdesc: Use of the moveend event.
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>
tags: "moveend, map, event"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<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>left</label><input type="text" id="left">

8
examples/navigation-controls.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Navigation controls example
title: Navigation Controls
shortdesc: Shows how to add navigation controls.
docs: >
<p>This example shows how to use the beforeRender function on the Map to run one
@@ -12,8 +12,4 @@ docs: >
</ul>
tags: "control, navigation, extent"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

12
examples/overlay.html
View File

@@ -1,18 +1,16 @@
---
layout: example.html
title: Overlay example
title: Overlay
shortdesc: Demonstrates overlays.
docs: >
<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"
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 class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<div style="display: none;">
<!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>

10
examples/overviewmap-custom.html
View File

@@ -1,15 +1,9 @@
---
layout: example.html
title: OverviewMap control example advanced
title: Custom Overview Map
shortdesc: Example of OverviewMap control with advanced customization.
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>
tags: "overview, overviewmap"
resources:
- overviewmap-custom.css
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/overviewmap.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: OverviewMap control example
title: Overview Map Control
shortdesc: Example of OverviewMap control.
docs: >
This example demonstrates the use of the OverviewMap control.
tags: "overview, overviewmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

8
examples/permalink.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Permalink example
title: Permalink
shortdesc: Example on how to create permalinks.
docs: >
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>.
tags: "permalink, openstreetmap, history"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/polygon-styles.html
View File

@@ -1,17 +1,11 @@
---
layout: example.html
title: Custom styles for polygons
title: Custom Polygon Styles
shortdesc: Showing the vertices of a polygon with a custom style geometry.
docs: >
In this example two different styles are created for the polygons:
* The first style is for the polygons themselves.
* The second style is to draw the vertices of the polygons.
tags: "polygon, vector, style, GeometryFunction"
resources:
- polygon-styles.css
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

2
examples/polygon-styles.js
View File

@@ -98,7 +98,7 @@ var map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: [0, 1000000],
center: [0, 3000000],
zoom: 2
})
});

16
examples/popup.html
View File

@@ -1,21 +1,15 @@
---
layout: example.html
title: Popup example
title: Popup
shortdesc: Uses an overlay to create a popup.
docs: >
<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.
</p>
tags: "overlay, popup, mapquest, openaerial"
resources:
- popup.css
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>

12
examples/preload.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Preload example
title: Preload Tiles
shortdesc: Example of tile preloading.
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>
@@ -8,11 +8,5 @@ tags: "preload, bing"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span6">
<div id="map1" class="map"></div>
</div>
<div class="span6">
<div id="map2" class="map"></div>
</div>
</div>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>

9
examples/raster.html
View File

@@ -21,13 +21,10 @@ docs: >
tags: "raster, pixel"
resources:
- http://d3js.org/d3.v3.min.js
- raster.css
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12 rel">
<div id="map" class="map"></div>
<div id="plot"></div>
</div>
<div class="rel">
<div id="map" class="map"></div>
<div id="plot"></div>
</div>

18
examples/region-growing.html
View File

@@ -27,14 +27,10 @@ tags: "raster, region growing"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map" style="cursor: pointer"></div>
<table class="controls">
<tr>
<td>Threshold: <span id="threshold-value"></span></td>
<td><input id="threshold" type="range" min="1" max="50" value="20"></td>
</tr>
</table>
</div>
</div>
<div id="map" class="map" style="cursor: pointer"></div>
<table class="controls">
<tr>
<td>Threshold: <span id="threshold-value"></span></td>
<td><input id="threshold" type="range" min="1" max="50" value="20"></td>
</tr>
</table>

8
examples/regularshape.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Regular Shape example
title: Regular Shapes
shortdesc: Example of some Regular Shape styles.
docs: >
tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

27
examples/reprojection-by-code.html
View File

@@ -1,6 +1,6 @@
---
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
docs: >
This example shows client-side raster reprojection capabilities from
@@ -10,17 +10,16 @@ tags: "reprojection, projection, proj4js, mapquest, epsg.io"
resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="map" class="map"></div>
<form class="form-inline">
<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>
<form class="form-inline">
<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>
</form>

36
examples/reprojection-by-code.js
View File

@@ -64,30 +64,26 @@ function setProjection(code, name, proj4def, bbox) {
function search(query) {
resultSpan.innerHTML = 'Searching...';
$.ajax({
url: 'http://epsg.io/?format=json&q=' + query,
dataType: 'jsonp',
success: function(response) {
if (response) {
var results = response['results'];
if (results && results.length > 0) {
for (var i = 0, ii = results.length; i < ii; i++) {
var result = results[i];
if (result) {
var code = result['code'], name = result['name'],
proj4def = result['proj4'], bbox = result['bbox'];
if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
bbox && bbox.length == 4) {
setProjection(code, name, proj4def, bbox);
return;
}
}
resultSpan.innerHTML = 'Searching ...';
fetch('http://epsg.io/?format=json&q=' + query).then(function(response) {
return response.json();
}).then(function(json) {
var results = json['results'];
if (results && results.length > 0) {
for (var i = 0, ii = results.length; i < ii; i++) {
var result = results[i];
if (result) {
var code = result['code'], name = result['name'],
proj4def = result['proj4'], bbox = result['bbox'];
if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
bbox && bbox.length == 4) {
setProjection(code, name, proj4def, bbox);
return;
}
}
}
setProjection(null, null, null, null);
}
setProjection(null, null, null, null);
});
}

8
examples/reprojection-image.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Image reprojection example
title: Image Reprojection
shortdesc: Demonstrates client-side reprojection of single image source.
docs: >
This example shows client-side reprojection of single image source.
@@ -8,8 +8,4 @@ tags: "reprojection, projection, proj4js, mapquest, image, imagestatic"
resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

4
examples/reprojection-image.js
View File

@@ -32,8 +32,8 @@ var map = new ol.Map({
renderer: common.getRendererFromQueryString(),
target: 'map',
view: new ol.View({
center: ol.proj.transform(ol.extent.getCenter(imageExtent),
'EPSG:27700', 'EPSG:3857'),
center: ol.proj.transform(
ol.extent.getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'),
zoom: 4
})
});

Some files were not shown because too many files have changed in this diff Show More