Port over canvas-tiles, center, cluster, d3, device-orientation, drag-and-drop-image-vector, drag-and-drop and drag-features example
This commit is contained in:
Bart van den Eijnden
committed by
Andreas Hocevar
Andreas Hocevar
parent
4ebceab51a
commit
b1e35f7fdd
@@ -1,52 +1,14 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Canvas tiles example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Renders tiles with coordinates for debugging."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
OSM tile coordinates (origin top left).</p>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
tags: "layers, openstreetmap, canvas"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<title>Canvas tiles example</title>
|
<div class="span12">
|
||||||
</head>
|
<div id="map" class="map"></div>
|
||||||
<body>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Canvas tiles example</h4>
|
|
||||||
<p id="shortdesc">Renders tiles with coordinates for debugging.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
|
|
||||||
<p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">layers, openstreetmap, canvas</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
.mapcontainer {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 1000px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
div.ol-zoom {
|
||||||
|
top: 178px;
|
||||||
|
left: 158px;
|
||||||
|
}
|
||||||
|
div.ol-attribution {
|
||||||
|
bottom: 30px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
.padding-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0px;
|
||||||
|
width: 1000px;
|
||||||
|
height: 170px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.padding-left {
|
||||||
|
position: absolute;
|
||||||
|
top: 170px;
|
||||||
|
left: 0;
|
||||||
|
width: 150px;
|
||||||
|
height: 400px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.padding-right {
|
||||||
|
position: absolute;
|
||||||
|
top: 170px;
|
||||||
|
left: 950px;
|
||||||
|
width: 50px;
|
||||||
|
height: 400px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.padding-bottom {
|
||||||
|
position: absolute;
|
||||||
|
top: 570px;
|
||||||
|
left: 0px;
|
||||||
|
width: 1000px;
|
||||||
|
height: 30px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
border: solid 1px black;
|
||||||
|
top: 490px;
|
||||||
|
left: 560px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
+34
-131
@@ -1,131 +1,34 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Advanced View Positioning example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
This example demonstrates how a map's view can be
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
adjusted so a geometry or coordinate is positioned at a specific
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
pixel location. The map above has top, right, bottom, and left
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
padding applied inside the viewport. The view's <code>fitGeometry</code> method
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
is used to fit a geometry in the view with the same padding. The
|
||||||
<style>
|
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
||||||
.mapcontainer {
|
at a specific pixel location (the center of the black box).
|
||||||
position: relative;
|
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||||
margin-bottom: 20px;
|
tags: "center, rotation, openstreetmap"
|
||||||
}
|
---
|
||||||
.map {
|
<div class="row-fluid">
|
||||||
width: 1000px;
|
<div class="span12 mapcontainer">
|
||||||
height: 600px;
|
<div id="map" class="map"></div>
|
||||||
}
|
<div class="padding-top"></div>
|
||||||
div.ol-zoom {
|
<div class="padding-left"></div>
|
||||||
top: 178px;
|
<div class="padding-right"></div>
|
||||||
left: 158px;
|
<div class="padding-bottom"></div>
|
||||||
}
|
<div class="center"></div>
|
||||||
div.ol-attribution {
|
</div>
|
||||||
bottom: 30px;
|
</div>
|
||||||
right: 50px;
|
<div class="row-fluid">
|
||||||
}
|
<div class="span12">
|
||||||
.padding-top {
|
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
||||||
position: absolute;
|
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
||||||
top: 0;
|
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
||||||
left: 0px;
|
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
||||||
width: 1000px;
|
<button id="centerlausanne">Center on Lausanne</button>
|
||||||
height: 170px;
|
</div>
|
||||||
background: rgba(255, 255, 255, 0.5);
|
</div>
|
||||||
}
|
|
||||||
.padding-left {
|
|
||||||
position: absolute;
|
|
||||||
top: 170px;
|
|
||||||
left: 0;
|
|
||||||
width: 150px;
|
|
||||||
height: 400px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
.padding-right {
|
|
||||||
position: absolute;
|
|
||||||
top: 170px;
|
|
||||||
left: 950px;
|
|
||||||
width: 50px;
|
|
||||||
height: 400px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
.padding-bottom {
|
|
||||||
position: absolute;
|
|
||||||
top: 570px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1000px;
|
|
||||||
height: 30px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
.center {
|
|
||||||
position: absolute;
|
|
||||||
border: solid 1px black;
|
|
||||||
top: 490px;
|
|
||||||
left: 560px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<title>Advanced View Positioning example</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png">OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12 mapcontainer">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<div class="padding-top"></div>
|
|
||||||
<div class="padding-left"></div>
|
|
||||||
<div class="padding-right"></div>
|
|
||||||
<div class="padding-bottom"></div>
|
|
||||||
<div class="center"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
|
||||||
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
|
||||||
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
|
||||||
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
|
||||||
<button id="centerlausanne">Center on Lausanne</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Advanced View Positioning example</h4>
|
|
||||||
<p id="shortdesc">This example demonstrates how a map's view can be
|
|
||||||
adjusted so a geometry or coordinate is positioned at a specific
|
|
||||||
pixel location. The map above has top, right, bottom, and left
|
|
||||||
padding applied inside the viewport. The view's <code>fitGeometry</code> method
|
|
||||||
is used to fit a geometry in the view with the same padding. The
|
|
||||||
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
|
||||||
at a specific pixel location (the center of the black box).</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
|
||||||
<p>See the <a href="center.js" target="_blank">center.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">center, rotation, openstreetmap</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=center" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
+13
-51
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Clustering example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of using <code>ol.source.Cluster</code>."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
This example shows how to do clustering on point features.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "cluster, vector"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="span12">
|
||||||
<title>Clustering example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
</div>
|
||||||
<body>
|
</div>
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Clustering example</h4>
|
|
||||||
<p id="shortdesc">Example of using <code>ol.Cluster</code>.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="cluster.js" target="_blank">cluster.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">cluster vector</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=cluster" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
+14
-54
@@ -1,54 +1,14 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "d3 integration example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of using ol3 and d3 together."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<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>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "d3"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
resources: "http://d3js.org/d3.v3.min.js,http://d3js.org/topojson.v1.min.js"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<title>d3 integration example</title>
|
<div class="span12">
|
||||||
</head>
|
<div id="map" class="map"></div>
|
||||||
<body>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">d3 integration example</h4>
|
|
||||||
<p id="shortdesc">Example of using ol3 and d3 together.</p>
|
|
||||||
<div id="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>See the <a href="d3.js" target="_blank">d3.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">d3</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="http://d3js.org/d3.v3.min.js"></script>
|
|
||||||
<script src="http://d3js.org/topojson.v1.min.js"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=d3" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,58 +1,23 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Device-Orientation example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Listen to DeviceOrientation events."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
This example shows how to track changes in device orientation.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "orientation, openstreetmap"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="span12">
|
||||||
<title>Device-Orientation example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
<div class="span12">
|
||||||
<body>
|
<h4 id="title">Device orientation example</h4>
|
||||||
|
<label class="checkbox" for="track">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<input id="track" type="checkbox"/>track changes
|
||||||
<div class="navbar-inner">
|
</label>
|
||||||
<div class="container">
|
<p>α : <code id="alpha"></code></p>
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
<p>β : <code id="beta"></code></p>
|
||||||
</div>
|
<p>γ : <code id="gamma"></code></p>
|
||||||
</div>
|
<p>heading : <code id="heading"></code></p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container-fluid">
|
</div>
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Device orientation example</h4>
|
|
||||||
<label class="checkbox" for="track">
|
|
||||||
<input id="track" type="checkbox"/>track changes
|
|
||||||
</label>
|
|
||||||
<p>α : <code id="alpha"></code></p>
|
|
||||||
<p>β : <code id="beta"></code></p>
|
|
||||||
<p>γ : <code id="gamma"></code></p>
|
|
||||||
<p>heading : <code id="heading"></code></p>
|
|
||||||
<p id="shortdesc">Listen to DeviceOrientation events</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">orientation, openstreetmap</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=device-orientation" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,56 +1,19 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Drag-and-Drop image vector example"
|
||||||
<meta charset="utf-8">
|
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."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
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
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
an image on the client.
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<title>Drag-and-Drop image vector example</title>
|
<div class="span12">
|
||||||
</head>
|
<div id="map" class="map"></div>
|
||||||
<body>
|
<div class="span4 offset4 pull-right">
|
||||||
|
<div id="info" class="alert alert-success">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container-fluid">
|
</div>
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span4">
|
|
||||||
<h4 id="title">Drag-and-Drop image vector example</h4>
|
|
||||||
<p id="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.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4 offset4">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,56 +1,19 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Drag-and-Drop example"
|
||||||
<meta charset="utf-8">
|
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."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
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
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
only work with data in EPSG:4326 and EPSG:3857.
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<title>Drag-and-Drop example</title>
|
<div class="span12">
|
||||||
</head>
|
<div id="map" class="map"></div>
|
||||||
<body>
|
<div class="span4 offset4 pull-right">
|
||||||
|
<div id="info" class="alert alert-success">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container-fluid">
|
</div>
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span4">
|
|
||||||
<h4 id="title">Drag-and-Drop example</h4>
|
|
||||||
<p id="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.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4 offset4">
|
|
||||||
<div id="info" class="alert alert-success">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Drag features example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a drag features interaction."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
The drag features interaction can be used to drag features to a new position.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "drag, feature, vector, editing"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="span12">
|
||||||
<title>Drag features example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
</div>
|
||||||
<body>
|
</div>
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Drag features example</h4>
|
|
||||||
<p id="shortdesc">Example of a drag features interaction.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="drag-features.js" target="_blank">drag-features.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">drag, feature, vector, editing</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=drag-features" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user