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

Convert D-E examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-14 16:00:35 -07:00
parent c3165252f8
commit 3035bbdfd3
12 changed files with 73 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/d3.html
View File

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

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');

26
examples/device-orientation.html
View File

@@ -1,23 +1,19 @@
---
layout: example.html
title: Device-Orientation example
layout: strapless.html
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>
track changes
<input id="track" type="checkbox"/>
</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>
<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.
layout: strapless.html
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="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.
layout: strapless.html
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="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
layout: strapless.html
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>

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

@@ -1,15 +1,12 @@
---
layout: example.html
title: Draw and modify features example
layout: strapless.html
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">
@@ -18,4 +15,3 @@ tags: "draw, edit, modify, vector, featureoverlay"
<option value="Polygon">Polygon</option>
</select>
</form>
</div>

10
examples/draw-features.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: Draw features example
layout: strapless.html
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>
<option value="None">None</option>
</select>
</form>
</div>
</div>

8
examples/dynamic-data.html
View File

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

6
examples/earthquake-clusters.html
View File

@@ -1,5 +1,5 @@
---
layout: example.html
layout: strapless.html
title: Earthquake Clusters
shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
docs: >
@@ -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>

8
examples/epsg-4326.html
View File

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

10
examples/export-map.html
View File

@@ -1,18 +1,14 @@
---
layout: example.html
title: Export map example
layout: strapless.html
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>
<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>