main.js - gpx-map

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
import 'ol/ol.css';
import Map from 'ol/Map';

import SourceOSM from 'ol/source/OSM';
import SourceXYZ from 'ol/source/XYZ';
import SourceVector from 'ol/source/Vector';

import LayerVector from 'ol/layer/Vector';
import LayerTile from 'ol/layer/Tile';

import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

import { transform, fromLonLat } from 'ol/proj';
import { circular } from 'ol/geom/Polygon';
import { Control, FullScreen, defaults as defaultControls } from 'ol/control';

fetch('lastUpdated.json').then(res => res.json()).then(json => {
		document.title = "Bike-Map (Stand: " + json.lastUpdated + ")"
});

const source           = new SourceVector();
const ownLocationLayer = new LayerVector({ source: source });

const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function() {
	let buttonPressed = true;

	navigator.geolocation.watchPosition(
		function(pos) {
			const coords = [pos.coords.longitude, pos.coords.latitude];
			const accuracy = circular(coords, pos.coords.accuracy);

			source.clear(true);
			source.addFeatures([
				new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
				new Feature(new Point(fromLonLat(coords)))
			]);

			if(buttonPressed) {
				buttonPressed = false;
				map.getView().fit(source.getExtent(), {
					maxZoom: 18,
					duration: 500
				});
			}
		},

		function(error) {
			alert(`ERROR: ${error.message}`);
		},

		{
			enableHighAccuracy: true
		}
	);
});

var map = new Map({
	target:   'map',
	maxTilesLoading: 512,
	controls: defaultControls().extend([ new FullScreen(), new Control({ element: locate }) ]),

	layers: [
		new LayerTile({
			className: 'grayscale',
			source: new SourceOSM()
		}),

		new LayerTile({
			source: new SourceXYZ({
				url: './tiles/{z}/{x}/{y}.png',
				minZoom: 6,
				maxZoom: 16
			}),
		}),

		ownLocationLayer
	],

	view: new View({
		center: transform([10.1227652, 54.3232927], 'EPSG:4326', 'EPSG:3857'),
		zoom: 12,
		minZoom: 6,
		maxZoom: 16
	}),
});