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

Convert S-T examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-16 15:20:20 -07:00
parent c984bedd09
commit baed03d50d
26 changed files with 204 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
examples/scale-line.html
View File

@@ -1,20 +1,16 @@
--- ---
layout: example.html layout: strapless.html
title: Scale line example title: Scale Line
shortdesc: Example of a scale line. shortdesc: Example of a scale line.
docs: > docs: >
tags: "scale-line, openstreetmap" tags: "scale-line, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <select id="units">
<div id="map" class="map"></div> <option value="degrees">degrees</option>
<select id="units"> <option value="imperial">imperial inch</option>
<option value="degrees">degrees</option> <option value="us">us inch</option>
<option value="imperial">imperial inch</option> <option value="nautical">nautical mile</option>
<option value="us">us inch</option> <option value="metric" selected>metric</option>
<option value="nautical">nautical mile</option> </select>
<option value="metric">metric</option>
</select>
</div>
</div>

11
examples/scale-line.js
View File

@@ -30,8 +30,9 @@ var map = new ol.Map({
}); });
var unitsSelect = $('#units'); var unitsSelect = document.getElementById('units');
unitsSelect.on('change', function() { function onChange() {
scaleLineControl.setUnits(this.value); scaleLineControl.setUnits(unitsSelect.value);
}); }
unitsSelect.val(scaleLineControl.getUnits()); unitsSelect.addEventListener('change', onChange);
onChange();

36
examples/select-features.html
View File

@@ -1,26 +1,22 @@
--- ---
layout: example.html layout: strapless.html
title: Select features example title: Select Features
shortdesc: Example of using the Select interaction. shortdesc: Example of using the Select interaction.
docs: > docs: >
Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p> Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p> <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below. <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
<form class="form-inline">
<label>Action type &nbsp;</label>
<select id="type" class="form-control">
<option value="none" selected>None</option>
<option value="singleclick">Single-click</option>
<option value="click">Click</option>
<option value="pointermove">Hover</option>
<option value="altclick">Alt+Click</option>
</select>
<span id="status">&nbsp;0 selected features</span>
</form>
tags: "select, vector" tags: "select, vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <form class="form-inline">
<div id="map" class="map"></div> <label>Action type &nbsp;</label>
</div> <select id="type" class="form-control">
</div> <option value="click" selected>Click</option>
<option value="singleclick">Single-click</option>
<option value="pointermove">Hover</option>
<option value="altclick">Alt+Click</option>
<option value="none">None</option>
</select>
<span id="status">&nbsp;0 selected features</span>
</form>

5
examples/select-features.js
View File

@@ -71,9 +71,10 @@ var changeInteraction = function() {
if (select !== null) { if (select !== null) {
map.addInteraction(select); map.addInteraction(select);
select.on('select', function(e) { select.on('select', function(e) {
$('#status').html('&nbsp;' + e.target.getFeatures().getLength() + document.getElementById('status').innerText = '&nbsp;' +
e.target.getFeatures().getLength() +
' selected features (last operation selected ' + e.selected.length + ' selected features (last operation selected ' + e.selected.length +
' and deselected ' + e.deselected.length + ' features)'); ' and deselected ' + e.deselected.length + ' features)';
}); });
} }
}; };

10
examples/semi-transparent-layer.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Semi-transparent layer example title: Semi-Transparent Layer
shortdesc: Example of a map with a semi-transparent layer. shortdesc: Example of a map with a semi-transparent layer.
docs: > docs: >
This example will display a tiled MaxBox layer semi-transparently over a MapQuest background. This example will display a tiled MaxBox layer semi-transparently over a MapQuest background.
tags: "transparent, mapquest, tilejson" tags: "transparent, mapquest, tilejson"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

2
examples/semi-transparent-layer.js
View File

@@ -22,6 +22,6 @@ var map = new ol.Map({
target: 'map', target: 'map',
view: new ol.View({ view: new ol.View({
center: ol.proj.fromLonLat([-77.93255, 37.9555]), center: ol.proj.fromLonLat([-77.93255, 37.9555]),
zoom: 5 zoom: 7
}) })
}); });

36
examples/shaded-relief.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Shaded Relief title: Shaded Relief
shortdesc: Calculate shaded relief from elevation data shortdesc: Calculate shaded relief from elevation data
docs: > docs: >
@@ -25,22 +25,18 @@ docs: >
</p> </p>
tags: "raster, shaded relief" tags: "raster, shaded relief"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <table class="controls">
<div id="map" class="map"></div> <tr>
<table class="controls"> <td>vertical exaggeration: <span id="vertOut"></span>x</td>
<tr> <td><input id="vert" type="range" min="1" max="5" value="1"/></td>
<td>vertical exaggeration: <span id="vertOut"></span>x</td> </tr>
<td><input id="vert" type="range" min="1" max="5" value="1"/></td> <tr>
</tr> <td>sun elevation: <span id="sunElOut"></span>°</td>
<tr> <td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
<td>sun elevation: <span id="sunElOut"></span>°</td> </tr>
<td><input id="sunEl" type="range" min="0" max="90" value="45"/></td> <tr>
</tr> <td>sun azimuth: <span id="sunAzOut"></span>°</td>
<tr> <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
<td>sun azimuth: <span id="sunAzOut"></span>°</td> </tr>
<td><input id="sunAz" type="range" min="0" max="360" value="45"/></td> </table>
</tr>
</table>
</div>
</div>

6
examples/shaded-relief.js
View File

@@ -3,8 +3,8 @@ goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.layer.Image'); goog.require('ol.layer.Image');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
goog.require('ol.source.Raster'); goog.require('ol.source.Raster');
goog.require('ol.source.TileJSON');
goog.require('ol.source.XYZ'); goog.require('ol.source.XYZ');
@@ -117,9 +117,7 @@ var map = new ol.Map({
target: 'map', target: 'map',
layers: [ layers: [
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.TileJSON({ source: new ol.source.OSM()
url: 'http://api.tiles.mapbox.com/v3/tschaub.miapgppd.jsonp'
})
}), }),
new ol.layer.Image({ new ol.layer.Image({
opacity: 0.3, opacity: 0.3,

28
examples/side-by-side.html
View File

@@ -1,25 +1,17 @@
--- ---
layout: example.html layout: strapless.html
title: Side-by-side example title: Shared Views
shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
docs: > docs: >
The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers. The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
tags: "side-by-side, canvas, webgl, dom, canvas, sync, object" tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
--- ---
<div class="row-fluid"> <h4>Canvas</h4>
<div class="span4"> <div id="canvasMap" class="map"></div>
<h4>Canvas</h4> <h4>WebGL</h4>
<div id="canvasMap" class="map"></div> <div id="webglMap" class="map"></div>
</div> <div id="no-webgl" class="alert alert-danger" style="display: none">
<div class="span4"> This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>
</div>
<div class="span4">
<h4>DOM</h4>
<div id="domMap" class="map"></div>
</div>
</div> </div>
<h4>DOM</h4>
<div id="domMap" class="map"></div>

52
examples/snap.html
View File

@@ -1,38 +1,34 @@
--- ---
layout: example.html layout: strapless.html
title: Snap interaction example title: Snap Interaction
shortdesc: Example of using the snap interaction together with draw and modify interactions. shortdesc: Example of using the snap interaction together with draw and modify interactions.
docs: > docs: >
Example of using the snap interaction together with Example of using the snap interaction together with
draw and modify interactions. The snap interaction must be added draw and modify interactions. The snap interaction must be added
last, as it needs to be the first to handle the last, as it needs to be the first to handle the
<code>pointermove</code> event.</p> <code>pointermove</code> event.</p>
<form id="options-form" automplete="off">
<div class="radio">
<label>
<input type="radio" name="interaction" value="draw" id="draw" checked>
Draw &nbsp;
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="interaction" value="modify">
Modify &nbsp;
</label>
</div>
<div class="form-group">
<label>Draw type &nbsp;</label>
<select name="draw-type" id="draw-type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</div>
</form>
tags: "draw, edit, modify, vector, snap" tags: "draw, edit, modify, vector, snap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <form id="options-form" automplete="off">
<div id="map" class="map"></div> <div class="radio">
<label>
<input type="radio" name="interaction" value="draw" id="draw" checked>
Draw &nbsp;
</label>
</div> </div>
</div> <div class="radio">
<label>
<input type="radio" name="interaction" value="modify">
Modify &nbsp;
</label>
</div>
<div class="form-group">
<label>Draw type &nbsp;</label>
<select name="draw-type" id="draw-type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</div>
</form>

10
examples/sphere-mollweide.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Sphere Mollweide example title: Sphere Mollweide
shortdesc: Example of a Sphere Mollweide map with a Graticule component. shortdesc: Example of a Sphere Mollweide map with a Graticule component.
docs: > docs: >
Example of a Sphere Mollweide map with a Graticule component. Example of a Sphere Mollweide map with a Graticule component.
@@ -8,8 +8,4 @@ tags: "graticule, Mollweide, projection, proj4js"
resources: resources:
- http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/stamen.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Stamen example title: Stamen Tiles
shortdesc: Example of a Stamen tile source. shortdesc: Example of a Stamen tile source.
docs: > docs: >
Two layers are composed: the watercolor base layer with the terrain labels. Two layers are composed: the watercolor base layer with the terrain labels.
tags: "stamen, watercolor, terrain-labels, two-layers" tags: "stamen, watercolor, terrain-labels, two-layers"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/static-image.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Static image example title: Static Image
shortdesc: Example of a static image layer. shortdesc: Example of a static image layer.
docs: > docs: >
<p> <p>
@@ -11,8 +11,4 @@ docs: >
</p> </p>
tags: "static image, xkcd" tags: "static image, xkcd"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/symbol-atlas-webgl.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Symbols with WebGL example title: Symbols with WebGL
shortdesc: Using symbols in an atlas with WebGL. shortdesc: Using symbols in an atlas with WebGL.
docs: > docs: >
<p>When using symbol styles with WebGL, OpenLayers would render the symbol <p>When using symbol styles with WebGL, OpenLayers would render the symbol
@@ -11,8 +11,4 @@ docs: >
of a symbol style, will create atlases for the symbols.</p> of a symbol style, will create atlases for the symbols.</p>
tags: "webgl, symbol, atlas, vector, point" tags: "webgl, symbol, atlas, vector, point"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

125
examples/synthetic-lines.html
View File

@@ -1,69 +1,66 @@
--- ---
layout: example.html layout: strapless.html
title: Synthetic lines example title: Synthetic Lines
shortdesc: Synthetic lines example. shortdesc: Synthetic lines example.
docs: > docs: >
<p>Performance results:</p>
<table border="1">
<thead>
<tr>
<th>Device/Browser</th>
<th>200 lines</th>
<th>500 lines</th>
<th>1000 lines</th>
<th>2000 lines</th>
<th>5000 lines</th>
<th>10000 lines</th>
<th>20000 lines</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mac Book Air / Chrome 33 canary</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
</tr>
<tr>
<td>Mac Book Air / FireFox 25</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>22 fps</td>
<td>6 fps</td>
</tr>
<tr>
<td>Mac Book Air / Safari 7</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>40 fps</td>
<td>10 fps</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>iPhone 4S / iOS 7 / Safari</td>
<td>60 fps</td>
<td>33 fps</td>
<td>15 fps</td>
<td>5 fps</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
tags: "vector" tags: "vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <p>Performance results:</p>
<div id="map" class="map"></div> <table border="1">
</div> <thead>
</div> <tr>
<th>Device/Browser</th>
<th>200 lines</th>
<th>500 lines</th>
<th>1000 lines</th>
<th>2000 lines</th>
<th>5000 lines</th>
<th>10000 lines</th>
<th>20000 lines</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mac Book Air / Chrome 33 canary</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
</tr>
<tr>
<td>Mac Book Air / FireFox 25</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>22 fps</td>
<td>6 fps</td>
</tr>
<tr>
<td>Mac Book Air / Safari 7</td>
<td>60 fps</td>
<td>60 fps</td>
<td>60 fps</td>
<td>40 fps</td>
<td>10 fps</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>iPhone 4S / iOS 7 / Safari</td>
<td>60 fps</td>
<td>33 fps</td>
<td>15 fps</td>
<td>5 fps</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>

10
examples/synthetic-points.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Synthetic points example title: Synthetic Points
shortdesc: Synthetic points example. shortdesc: Synthetic points example.
docs: > docs: >
tags: "vector" tags: "vector"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

22
examples/teleport.html
View File

@@ -1,21 +1,11 @@
--- ---
layout: example.html layout: strapless.html
title: Teleport example title: Teleporting Maps
shortdesc: Example of moving a map from one target to another. shortdesc: Example of moving a map from one target to another.
docs: > docs: >
<p>Click on the Teleport button below the map to move the map from one target to another.</p> <p>Click on the teleport button the map to move the map from one target to another.</p>
tags: "teleport, openstreetmap" tags: "teleport, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map1" class="map"></div>
<div class="span8"> <div id="map2" class="map"></div>
<div id="map1" class="map"></div> <button id="teleport">Teleport</button>
</div>
<div class="span4">
<div id="map2" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<a id="teleport" href="#" class="btn">Teleport</a>
</div>
</div>

12
examples/tile-load-events.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Tile load events example title: Tile Load Events
shortdesc: Example using tile load events. shortdesc: Example using tile load events.
docs: > docs: >
Image tile sources fire events related to tile loading. You can Image tile sources fire events related to tile loading. You can
@@ -11,9 +11,7 @@ docs: >
This example creates a "rotate to north" button. This example creates a "rotate to north" button.
tags: "tile, events, loading" tags: "tile, events, loading"
--- ---
<div class="row-fluid"> <div class="wrapper">
<div class="span12 wrapper"> <div id="map" class="map"></div>
<div id="map" class="map"></div> <div id="progress"></div>
<div id="progress"></div>
</div>
</div> </div>

10
examples/tilejson.html
View File

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

11
examples/tileutfgrid.html
View File

@@ -1,18 +1,13 @@
--- ---
layout: example.html layout: strapless.html
title: TileUTFGrid example title: Tiled UTFGrid
shortdesc: This example shows how to read data from a TileUTFGrid layer. shortdesc: This example shows how to read data from a TileUTFGrid layer.
docs: > docs: >
<p>Point to a country to see its name and flag.</p> <p>Point to a country to see its name and flag.</p>
Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/). Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
tags: "utfgrid, tileutfgrid, tilejson" tags: "utfgrid, tileutfgrid, tilejson"
--- ---
<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;">
<!-- Overlay with the country info --> <!-- Overlay with the country info -->
<div id="country-info"> <div id="country-info">

18
examples/tissot.html
View File

@@ -1,18 +1,12 @@
--- ---
layout: example.html layout: strapless.html
title: Tissot indicatrix example title: Tissot Indicatrix
shortdesc: Draw Tissot's indicatrices on maps. shortdesc: Draw Tissot's indicatrices on maps.
docs: > docs: >
Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857. Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
tags: "tissot, circle" tags: "tissot, circle"
--- ---
<div class="row-fluid"> <h4>EPSG:4326</h4>
<div class="span6"> <div id="map4326" class="map"></div>
<h4>EPSG:4326</h4> <h4>EPSG:3857</h4>
<div id="map4326" class="map"></div> <div id="map3857" class="map"></div>
</div>
<div class="span6">
<h4>EPSG:3857</h4>
<div id="map3857" class="map"></div>
</div>
</div>

10
examples/topojson.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: TopoJSON example title: TopoJSON
shortdesc: Demonstrates rendering of features from a TopoJSON topology. shortdesc: Demonstrates rendering of features from a TopoJSON topology.
docs: > docs: >
This example uses a vector layer with `ol.format.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki). This example uses a vector layer with `ol.format.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
tags: "topojson, vector, style" tags: "topojson, vector, style"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/translate-features.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Translate features example title: Translate Features
shortdesc: Example of a translate features interaction. shortdesc: Example of a translate features interaction.
docs: > docs: >
This example demonstrates how the translate and select interactions can be used together. Zoom in to an area of interest and click to select a feature. Then drag the feature around to move it elsewhere on the map. This example demonstrates how the translate and select interactions can be used together. Zoom in to an area of interest and click to select a feature. Then drag the feature around to move it elsewhere on the map.
tags: "drag, translate, feature, vector, editing" tags: "drag, translate, feature, vector, editing"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

15
examples/translate-features.js
View File

@@ -2,8 +2,6 @@ goog.require('ol.Feature');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.format.GeoJSON'); goog.require('ol.format.GeoJSON');
goog.require('ol.geom.LineString');
goog.require('ol.geom.Point');
goog.require('ol.interaction'); goog.require('ol.interaction');
goog.require('ol.interaction.Select'); goog.require('ol.interaction.Select');
goog.require('ol.interaction.Translate'); goog.require('ol.interaction.Translate');
@@ -24,17 +22,6 @@ var vector = new ol.layer.Vector({
}) })
}); });
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
var vector2 = new ol.layer.Vector({
source: new ol.source.Vector({
features: [pointFeature, lineFeature]
})
});
var select = new ol.interaction.Select(); var select = new ol.interaction.Select();
var translate = new ol.interaction.Translate({ var translate = new ol.interaction.Translate({
@@ -43,7 +30,7 @@ var translate = new ol.interaction.Translate({
var map = new ol.Map({ var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, translate]), interactions: ol.interaction.defaults().extend([select, translate]),
layers: [raster, vector, vector2], layers: [raster, vector],
target: 'map', target: 'map',
view: new ol.View({ view: new ol.View({
center: [0, 0], center: [0, 0],

12
examples/turf.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: turf.js Example title: turf.js
shortdesc: Example on how to use turf.js with OpenLayers 3. shortdesc: Example on how to use turf.js with OpenLayers 3.
docs: > docs: >
Example showing the integration of <a href="http://turfjs.org">turf.js</a> Example showing the integration of <a href="http://turfjs.org">turf.js</a>
@@ -9,11 +9,5 @@ docs: >
tags: "vector, turfjs, along, distance" tags: "vector, turfjs, along, distance"
resources: resources:
- https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js - https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

6
examples/turf.js
View File

@@ -12,9 +12,11 @@ goog.require('ol.source.Vector');
var source = new ol.source.Vector(); var source = new ol.source.Vector();
$.ajax('data/geojson/roads-seoul.geojson').then(function(response) { fetch('data/geojson/roads-seoul.geojson').then(function(response) {
return response.json();
}).then(function(json) {
var format = new ol.format.GeoJSON(); var format = new ol.format.GeoJSON();
var features = format.readFeatures(response); var features = format.readFeatures(json);
var street = features[0]; var street = features[0];
// convert to a turf.js feature // convert to a turf.js feature