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

Convert M-P examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-15 22:13:38 -07:00
parent f88681951a
commit e6343ca272
21 changed files with 101 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
---
layout: example.html
title: Advanced Mapbox vector tiles example
layout: strapless.html
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>

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

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

10
examples/mapguide-untiled.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: MapGuide untiled example
layout: strapless.html
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>

20
examples/mapquest.html
View File

@@ -1,18 +1,14 @@
---
layout: example.html
title: MapQuest example
layout: strapless.html
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();

17
examples/measure.html
View File

@@ -1,21 +1,22 @@
---
layout: example.html
title: Measure example
layout: strapless.html
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>

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

@@ -1,15 +1,11 @@
---
layout: example.html
title: Min/max resolution example
layout: strapless.html
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>

12
examples/modify-features.html
View File

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

10
examples/modify-test.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: Modify features test
layout: strapless.html
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>

32
examples/mouse-position.html
View File

@@ -1,25 +1,19 @@
---
layout: example.html
title: Mouse position example
layout: strapless.html
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);
});

12
examples/moveend.html
View File

@@ -1,17 +1,13 @@
---
layout: example.html
title: Moveend Example
layout: strapless.html
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">

10
examples/navigation-controls.html
View File

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

14
examples/overlay.html
View File

@@ -1,18 +1,16 @@
---
layout: example.html
title: Overlay example
layout: strapless.html
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>

12
examples/overviewmap-custom.html
View File

@@ -1,15 +1,9 @@
---
layout: example.html
title: OverviewMap control example advanced
layout: strapless.html
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>

10
examples/overviewmap.html
View File

@@ -1,13 +1,9 @@
---
layout: example.html
title: OverviewMap control example
layout: strapless.html
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>

10
examples/permalink.html
View File

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

12
examples/polygon-styles.html
View File

@@ -1,17 +1,11 @@
---
layout: example.html
title: Custom styles for polygons
layout: strapless.html
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
})
});

18
examples/popup.html
View File

@@ -1,21 +1,15 @@
---
layout: example.html
title: Popup example
layout: strapless.html
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>

14
examples/preload.html
View File

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