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 layout: strapless.html
title: Advanced Mapbox vector tiles example title: Advanced Mapbox Vector Tiles
shortdesc: Example of a Mapbox vector tiles map with custom tile grid. shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
docs: > docs: >
A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired. A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
@@ -10,8 +10,4 @@ resources:
cloak: cloak:
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

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

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Mapbox vector tiles example title: Mapbox Vector Tiles
shortdesc: Example of a Mapbox vector tiles map. shortdesc: Example of a Mapbox vector tiles map.
docs: > docs: >
A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired. A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
@@ -10,8 +10,4 @@ resources:
cloak: cloak:
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/mapguide-untiled.html
View File

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

20
examples/mapquest.html
View File

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

13
examples/mapquest.js
View File

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

17
examples/measure.html
View File

@@ -1,21 +1,22 @@
--- ---
layout: example.html layout: strapless.html
title: Measure example title: Measure
shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application. shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
docs: > docs: >
<p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account</i></p> <p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account</i></p>
tags: "draw, edit, measure, vector" tags: "draw, edit, measure, vector"
resources:
- https://code.jquery.com/jquery-1.11.2.min.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<form class="form-inline"> <form class="form-inline">
<label>Geometry type &nbsp;</label> <label>Geometry type &nbsp;</label>
<select id="type"> <select id="type">
<option value="length">Length</option> <option value="length">Length</option>
<option value="area">Area</option> <option value="area">Area</option>
</select> </select>
<label class="checkbox"><input type="checkbox" id="geodesic"/>use geodesic measures</label> <label class="checkbox">
<input type="checkbox" id="geodesic">
use geodesic measures
</label>
</form> </form>

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

@@ -1,15 +1,11 @@
--- ---
layout: example.html layout: strapless.html
title: Min/max resolution example title: Layer Min/Max Resolution
shortdesc: Show/hide layers depending on current view resolution. shortdesc: Show/hide layers depending on current view resolution.
docs: > docs: >
<p>Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.</p> <p>Zoom in twice: the MapBox layer should hide and the OSM layer should be shown.</p>
<p>If you continue to zoom in, you'll see the OSM layer also disappear.</p> <p>If you continue to zoom in, you'll see the OSM layer also disappear.</p>
<p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p> <p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
tags: "minResolution, maxResolution, resolution" tags: "minResolution, maxResolution, resolution"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

12
examples/modify-features.html
View File

@@ -1,14 +1,10 @@
--- ---
layout: example.html layout: strapless.html
title: Modify features example title: Modify Features
shortdesc: Editing features with the modify interaction. shortdesc: Editing features with the modify interaction.
docs: > docs: >
<p>This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. <p>This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing.
Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (<code>Shift</code>+click to select multiple features).</p> Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (<code>Shift+Click</code> to select multiple features).</p>
tags: "modify, edit, vector" tags: "modify, edit, vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/modify-test.html
View File

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

32
examples/mouse-position.html
View File

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

13
examples/mouse-position.js
View File

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

12
examples/moveend.html
View File

@@ -1,17 +1,13 @@
--- ---
layout: example.html layout: strapless.html
title: Moveend Example title: Moveend Event
shortdesc: Use of the moveend event. shortdesc: Use of the moveend event.
docs: > docs: >
<p>In this example, a listener is registered for the map's <code>moveend</code> event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p> <p>In this example, a listener is registered for the map's <code>moveend</code> event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
tags: "moveend, map, event" tags: "moveend, map, event"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<label>top</label><input type="text" id="top"> <label>top</label><input type="text" id="top">
<label>right</label><input type="text" id="right"> <label>right</label><input type="text" id="right"><br>
<label>bottom</label><input type="text" id="bottom"> <label>bottom</label><input type="text" id="bottom">
<label>left</label><input type="text" id="left"> <label>left</label><input type="text" id="left">

10
examples/navigation-controls.html
View File

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

14
examples/overlay.html
View File

@@ -1,18 +1,16 @@
--- ---
layout: example.html layout: strapless.html
title: Overlay example title: Overlay
shortdesc: Demonstrates overlays. shortdesc: Demonstrates overlays.
docs: > docs: >
<p>The popups are created using <a href="http://getbootstrap.com/javascript/#popovers">Popovers</a> from Bootstrap.</p> <p>The popups are created using <a href="http://getbootstrap.com/javascript/#popovers">Popovers</a> from Bootstrap.</p>
tags: "overlay, popup, bootstrap, popover, mapquest, openaerial" tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
resources: resources:
- overlay.css - https://code.jquery.com/jquery-1.11.2.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div style="display: none;"> <div style="display: none;">
<!-- Clickable label for Vienna --> <!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a> <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>

12
examples/overviewmap-custom.html
View File

@@ -1,15 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: OverviewMap control example advanced title: Custom Overview Map
shortdesc: Example of OverviewMap control with advanced customization. shortdesc: Example of OverviewMap control with advanced customization.
docs: > docs: >
<p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p> <p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p>
tags: "overview, overviewmap" tags: "overview, overviewmap"
resources:
- overviewmap-custom.css
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/overviewmap.html
View File

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

10
examples/permalink.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Permalink example title: Permalink
shortdesc: Example on how to create permalinks. shortdesc: Example on how to create permalinks.
docs: > docs: >
In this example the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history" In this example the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history"
@@ -12,8 +12,4 @@ docs: >
target="_blank">a polyfill</a>. target="_blank">a polyfill</a>.
tags: "permalink, openstreetmap, history" tags: "permalink, openstreetmap, history"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

12
examples/polygon-styles.html
View File

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

2
examples/polygon-styles.js
View File

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

18
examples/popup.html
View File

@@ -1,21 +1,15 @@
--- ---
layout: example.html layout: strapless.html
title: Popup example title: Popup
shortdesc: Uses an overlay to create a popup. shortdesc: Uses an overlay to create a popup.
docs: > docs: >
<p> <p>
Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup. Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
</p> </p>
tags: "overlay, popup, mapquest, openaerial" tags: "overlay, popup, mapquest, openaerial"
resources:
- popup.css
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <div id="popup" class="ol-popup">
<div id="map" class="map"></div> <a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup" class="ol-popup"> <div id="popup-content"></div>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
</div> </div>

14
examples/preload.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Preload example title: Preload Tiles
shortdesc: Example of tile preloading. shortdesc: Example of tile preloading.
docs: > docs: >
<p>The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.</p> <p>The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.</p>
@@ -8,11 +8,5 @@ tags: "preload, bing"
cloak: cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
--- ---
<div class="row-fluid"> <div id="map1" class="map"></div>
<div class="span6"> <div id="map2" class="map"></div>
<div id="map1" class="map"></div>
</div>
<div class="span6">
<div id="map2" class="map"></div>
</div>
</div>