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

Convert L examples to use strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-15 16:07:32 -07:00
parent 87fcca91bd
commit f88681951a
14 changed files with 99 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,12 @@
---
layout: example.html
title: Layer WebGL clipping example
layout: strapless.html
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="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
layout: strapless.html
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>

8
examples/layer-extent.html
View File

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
title: Limited Layer Extent
shortdesc: Restricting layer rendering to a limited extent.
docs: >
@@ -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>

12
examples/layer-group.html
View File

@@ -1,16 +1,15 @@
---
layout: example.html
title: Layer group example
layout: strapless.html
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">
<div id="layertree">
<h5>Click on layer nodes below to change their properties.</h5>
<ul>
<li><span>OpenAerial layer</span>
@@ -53,4 +52,3 @@ tags: "tilejson, input, bind, group, layergroup"
</li>
</ul>
</div>
</div>

8
examples/layer-spy.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Layer Spy Example
layout: strapless.html
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>

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();
});

8
examples/layer-swipe.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Layer Swipe example
layout: strapless.html
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>

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

@@ -1,20 +1,14 @@
---
layout: example.html
title: Z-index layer ordering example
layout: strapless.html
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>
<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

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
title: Lazy Source
shortdesc: Example of setting a layer source after construction.
docs: >
@@ -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>
<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
layout: strapless.html
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>

8
examples/localized-openstreetmap.html
View File

@@ -1,14 +1,10 @@
---
layout: example.html
title: Localized OpenStreetMap example
layout: strapless.html
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>

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: [