Port over graticule, heatmap-earthquakes, hue-saturation, icon-sprite-webgl, icon, igc examples
This commit is contained in:
Bart van den Eijnden
committed by
Andreas Hocevar
Andreas Hocevar
parent
2ccdd87942
commit
5cfb4910df
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Graticule example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "This example shows how to add a graticule overlay to a map."
|
||||||
<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 add a graticule overlay to a map.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "graticule"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>Graticule 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="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Graticule example</h4>
|
|
||||||
<p id="shortdesc">This example shows how to add a graticule overlay to a map.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="graticule.js" target="_blank">graticule.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">graticule</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=graticule" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,46 +1,15 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Earthquakes heatmap"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Demonstrates the use of a heatmap layer."
|
||||||
<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 parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
tags: "heatmap, kml, vector, style"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>Earthquakes heatmap</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="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<div id="map" class="map"><div id="info"></div></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span8">
|
|
||||||
<h4 id="title">Earthquakes heatmap</h4>
|
|
||||||
<p id="shortdesc">Demonstrates the use of a heatmap layer.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>
|
|
||||||
This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
|
|
||||||
</p>
|
|
||||||
<p>See the <a href="heatmap-earthquakes.js" target="_blank">heatmap-earthquakes.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">heatmap, kml, vector, style</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<form>
|
<form>
|
||||||
<label>radius size</label>
|
<label>radius size</label>
|
||||||
@@ -49,13 +18,4 @@
|
|||||||
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
|
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=heatmap-earthquakes" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
6
examples_src/hue-saturation.css
Normal file
6
examples_src/hue-saturation.css
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
#reset-hue {
|
||||||
|
min-width: 90px;
|
||||||
|
}
|
||||||
|
#reset-saturation {
|
||||||
|
min-width: 124px;
|
||||||
|
}
|
||||||
@@ -1,43 +1,17 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Hue/saturation example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of hue/saturation control on the client (WebGL only)."
|
||||||
<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 hue/saturation control on the client (WebGL only).
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "custom, control"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>Hue/saturation example</title>
|
|
||||||
<style>
|
|
||||||
#reset-hue {
|
|
||||||
min-width: 90px;
|
|
||||||
}
|
|
||||||
#reset-saturation {
|
|
||||||
min-width: 124px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</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="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|
||||||
<div id="no-webgl" class="alert alert-error" style="display: none">
|
<div id="no-webgl" class="alert alert-error" style="display: none">
|
||||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button id="increase-hue"><i class="icon-plus"></i></button>
|
<button id="increase-hue"><i class="icon-plus"></i></button>
|
||||||
<button id="reset-hue">Hue</button>
|
<button id="reset-hue">Hue</button>
|
||||||
@@ -50,25 +24,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Hue/saturation example</h4>
|
|
||||||
<p id="shortdesc">Example of hue/saturation control on the client (WebGL only).</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="hue-saturation.js" target="_blank">hue-saturation.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">hue, saturation, webgl</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=hue-saturation" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,58 +1,18 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Icon sprites with WebGL example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Icon sprite with WebGL"
|
||||||
<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>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "webgl, icon, sprite, vector, point"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>Icon sprites with WebGL 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="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
<div class="span2 offset2 pull-right">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span8">
|
|
||||||
<h4 id="title">Icon sprite with WebGL example</h4>
|
|
||||||
<p id="shortdesc">Icon sprite with WebGL.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="icon-sprite-webgl.js" target="_blank">icon-sprite-webgl.js source</a> to see how this is done.</p>
|
|
||||||
<p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">webgl, icon, sprite, vector, point</div>
|
|
||||||
</div>
|
|
||||||
<div class="span2 offset2">
|
|
||||||
<div id="info" class="alert alert-success">
|
<div id="info" class="alert alert-success">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=icon-sprite-webgl" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
6
examples_src/icon.css
Normal file
6
examples_src/icon.css
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
#map {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#popup {
|
||||||
|
padding-bottom: 45px;
|
||||||
|
}
|
||||||
@@ -1,62 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Vector Icon Example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example using an icon to symbolize a point."
|
||||||
<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 using an icon to symbolize a point.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "vector, style, icon, marker, popup"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>Vector Icon Example</title>
|
|
||||||
<style>
|
|
||||||
#map {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#popup {
|
|
||||||
padding-bottom: 45px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</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="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<div id="map" class="map">
|
<div id="map" class="map"><div id="popup"></div></div>
|
||||||
<div id="popup"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Icon example</h4>
|
|
||||||
<p id="shortdesc">Example using an icon to symbolize a point.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">vector, style, icon, marker, popup</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=icon" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,58 +1,19 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "IGC example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file."
|
||||||
<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 five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "complex-geometry, closest-feature, igc, opencyclemap"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
||||||
<title>IGC 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="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span4">
|
|
||||||
<h4 id="title">IGC example</h4>
|
|
||||||
<p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
|
||||||
<p>See the <a href="igc.js" target="_blank">igc.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<input id="time" type="range" value="0" steps="1" />
|
<input id="time" type="range" value="0" steps="1" />
|
||||||
<div id="tags">complex-geometry, closest-feature, igc, opencyclemap</div>
|
<div class="span4 offset4 pull-right">
|
||||||
</div>
|
|
||||||
<div class="span4 offset4">
|
|
||||||
<div id="info" class="alert alert-success">
|
<div id="info" class="alert alert-success">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</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=igc" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user