Add OpenLayers map

2026-03-10 08:21:17 +00:00 · 2016-03-14 00:03:33 +01:00
parent a191b40391
commit 279880eb31
2 changed files with 82 additions and 0 deletions
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Localized OpenStreetMap</title>
+        <link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
+        <script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
+    </head>
+    <body>
+        <div id="map" class="map"></div>
+        <div id="info" style="display: none;"></div>
+        <p>
+            position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
+            altitude : <code id="altitude"></code>&nbsp;&nbsp;
+            altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
+            heading : <code id="heading"></code>&nbsp;&nbsp;
+            speed : <code id="speed"></code>
+        </p>
+        <span id="status">&nbsp;0 selected features</span>
+        <script src="map.js"></script>
+    </body>
+</html>
--- a/src/main/resources/static/map.js
+++ b/src/main/resources/static/map.js
@@ -0,0 +1,61 @@
+function el(id) {
+    return document.getElementById(id);
+}
+
+var view = new ol.View({
+    zoom: 8
+});
+
+var geolocation = new ol.Geolocation({
+    projection: view.getProjection()
+});
+
+var map = new ol.Map({
+    layers: [new ol.layer.Tile({
+        source: new ol.source.OSM()
+    })], target: 'map', controls: ol.control.defaults({
+        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+            collapsible: false
+        })
+    }), view: view
+});
+
+geolocation.on('change', function () {
+    el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
+    el('altitude').innerText = geolocation.getAltitude() + ' [m]';
+    el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
+    el('heading').innerText = geolocation.getHeading() + ' [rad]';
+    el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
+});
+
+// handle geolocation error.
+geolocation.on('error', function (error) {
+    var info = document.getElementById('info');
+    info.innerHTML = error.message;
+    info.style.display = '';
+});
+
+var positionFeature = new ol.Feature();
+
+geolocation.on('change:position', function () {
+    var coordinates = geolocation.getPosition();
+    positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
+    view.setCenter(coordinates);
+});
+
+new ol.layer.Vector({
+    map: map, source: new ol.source.Vector({
+        features: [positionFeature]
+    })
+});
+
+geolocation.setTracking(true);
+
+var select = new ol.interaction.Select();
+map.addInteraction(select);
+select.on('select', function (e) {
+    el('status').innerHTML = '&nbsp;' + e.target.getFeatures().getLength() + ' selected features';
+
+});
+
+