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

10
examples/d3.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: d3 integration example title: d3 Integration
shortdesc: Example of using ol3 and d3 together. shortdesc: Example of using ol3 and d3 together.
docs: > 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> <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/d3.v3.min.js
- http://d3js.org/topojson.v1.min.js - http://d3js.org/topojson.v1.min.js
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

1
examples/d3.js vendored
View File

@@ -1,5 +1,4 @@
// NOCOMPILE // NOCOMPILE
// this example uses d3 for which we don't have an externs file.
goog.require('ol'); goog.require('ol');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');

30
examples/device-orientation.html
View File

@@ -1,23 +1,19 @@
--- ---
layout: example.html layout: strapless.html
title: Device-Orientation example title: Device Orientation
shortdesc: Listen to DeviceOrientation events. shortdesc: Listen to DeviceOrientation events.
docs: > docs: >
This example shows how to track changes in device orientation. This example shows how to track changes in device orientation.
tags: "orientation, openstreetmap" tags: "orientation, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <label>
<div id="map" class="map"></div> track changes
<div class="span12"> <input id="track" type="checkbox"/>
<h4 id="title">Device orientation example</h4> </label>
<label class="checkbox" for="track"> <p>
<input id="track" type="checkbox"/>track changes α : <code id="alpha"></code>&nbsp;&nbsp;
</label> β : <code id="beta"></code>&nbsp;&nbsp;
<p>&alpha; : <code id="alpha"></code></p> γ : <code id="gamma"></code>&nbsp;&nbsp;
<p>&beta; : <code id="beta"></code></p> heading : <code id="heading"></code>
<p>&gamma; : <code id="gamma"></code></p> </p>
<p>heading : <code id="heading"></code></p>
</div>
</div>
</div>

21
examples/drag-and-drop-image-vector.html
View File

@@ -1,21 +1,12 @@
--- ---
layout: example.html layout: strapless.html
title: Drag-and-Drop image vector example title: Drag-and-Drop Image Vector
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. shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector.
docs: > 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 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.
an image on the client.
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image" tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
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="map" class="map"></div>
<div class="span12"> <div id="info">&nbsp;</div>
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>

21
examples/drag-and-drop.html
View File

@@ -1,21 +1,12 @@
--- ---
layout: example.html layout: strapless.html
title: Drag-and-Drop example title: Drag-and-Drop
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. shortdesc: Example of using the drag-and-drop interaction.
docs: > 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 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.
only work with data in EPSG:4326 and EPSG:3857.
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson" tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
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="map" class="map"></div>
<div class="span12"> <div id="info">&nbsp;</div>
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>

12
examples/drag-rotate-and-zoom.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Drag rotate and zoom example title: Drag, Rotate, and Zoom
shortdesc: A single interaction to drag, rotate, and zoom. shortdesc: A single interaction to drag, rotate, and zoom.
docs: > 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" tags: "drag, rotate, zoom, interaction"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

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

@@ -1,21 +1,17 @@
--- ---
layout: example.html layout: strapless.html
title: Draw and modify features example title: Draw and Modify Features
shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction. shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
docs: > docs: >
Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction. Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
tags: "draw, edit, modify, vector, featureoverlay" tags: "draw, edit, modify, vector, featureoverlay"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <form class="form-inline">
<div id="map" class="map"></div> <label>Geometry type &nbsp;</label>
</div> <select id="type">
<form class="form-inline"> <option value="Point">Point</option>
<label>Geometry type &nbsp;</label> <option value="LineString">LineString</option>
<select id="type"> <option value="Polygon">Polygon</option>
<option value="Point">Point</option> </select>
<option value="LineString">LineString</option> </form>
<option value="Polygon">Polygon</option>
</select>
</form>
</div>

34
examples/draw-features.html
View File

@@ -1,6 +1,6 @@
--- ---
layout: example.html layout: strapless.html
title: Draw features example title: Draw Features
shortdesc: Example of using the ol.interaction.Draw interaction. shortdesc: Example of using the ol.interaction.Draw interaction.
docs: > docs: >
Example of using the Draw interaction. Select a geometry type from the Example of using the Draw interaction. Select a geometry type from the
@@ -12,20 +12,16 @@ docs: >
points and creates a rectangular box. points and creates a rectangular box.
tags: "draw, edit, freehand, vector" tags: "draw, edit, freehand, 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>Geometry type &nbsp;</label>
<form class="form-inline"> <select id="type">
<label>Geometry type &nbsp;</label> <option value="Point">Point</option>
<select id="type"> <option value="LineString">LineString</option>
<option value="None">None</option> <option value="Polygon">Polygon</option>
<option value="Point">Point</option> <option value="Circle">Circle</option>
<option value="LineString">LineString</option> <option value="Square">Square</option>
<option value="Polygon">Polygon</option> <option value="Box">Box</option>
<option value="Circle">Circle</option> <option value="None">None</option>
<option value="Square">Square</option> </select>
<option value="Box">Box</option> </form>
</select>
</form>
</div>
</div>

10
examples/dynamic-data.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: Dynamic data example title: Dynamic Data
shortdesc: Example of dynamic data. shortdesc: Example of dynamic data.
docs: > docs: >
Example of dynamic data. Example of dynamic data.
tags: "dynamic-data" tags: "dynamic-data"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

8
examples/earthquake-clusters.html
View File

@@ -1,5 +1,5 @@
--- ---
layout: example.html layout: strapless.html
title: Earthquake Clusters title: Earthquake Clusters
shortdesc: Demonstrates the use of style geometries to render source features of a cluster. shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
docs: > 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> <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" tags: "KML, vector, style, geometry, cluster"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

10
examples/epsg-4326.html
View File

@@ -1,13 +1,9 @@
--- ---
layout: example.html layout: strapless.html
title: EPSG:4326 example title: EPSG:4326
shortdesc: Example of a map in EPSG:4326. shortdesc: Example of a map in EPSG:4326.
docs: > docs: >
This example shows how to create a map in EPSG:4326. This example shows how to create a map in EPSG:4326.
tags: "epsg4326" tags: "epsg4326"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

18
examples/export-map.html
View File

@@ -1,18 +1,14 @@
--- ---
layout: example.html layout: strapless.html
title: Export map example title: Map Export
shortdesc: Example of exporting a map as a PNG image. shortdesc: Example of exporting a map as a PNG image.
docs: > docs: >
Example of exporting a map as a PNG image. Example of exporting a map as a PNG image.
tags: "export, png, openstreetmap" tags: "export, png, openstreetmap"
--- ---
<div class="row-fluid"> <div id="map" class="map"></div>
<div class="span12"> <div id="no-download" class="alert alert-danger" style="display: none">
<div id="map" class="map"></div> This example requires a browser that supports the
<div id="no-download" class="alert alert-danger" style="display: none"> <a href="http://caniuse.com/#feat=download">link download</a> attribute.
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> </div>
<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>