1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.control');
|
4 | goog.require('ol.layer.Tile');
|
5 | goog.require('ol.source.OSM');
|
6 |
|
7 |
|
8 | var zoom = 2;
|
9 | var center = [0, 0];
|
10 | var rotation = 0;
|
11 |
|
12 | if (window.location.hash !== '') {
|
13 |
|
14 | var hash = window.location.hash.replace('#map=', '');
|
15 | var parts = hash.split('/');
|
16 | if (parts.length === 4) {
|
17 | zoom = parseInt(parts[0], 10);
|
18 | center = [
|
19 | parseFloat(parts[1]),
|
20 | parseFloat(parts[2])
|
21 | ];
|
22 | rotation = parseFloat(parts[3]);
|
23 | }
|
24 | }
|
25 |
|
26 | var map = new ol.Map({
|
27 | layers: [
|
28 | new ol.layer.Tile({
|
29 | source: new ol.source.OSM()
|
30 | })
|
31 | ],
|
32 | controls: ol.control.defaults({
|
33 | attributionOptions: ({
|
34 | collapsible: false
|
35 | })
|
36 | }),
|
37 | target: 'map',
|
38 | view: new ol.View({
|
39 | center: center,
|
40 | zoom: zoom,
|
41 | rotation: rotation
|
42 | })
|
43 | });
|
44 |
|
45 | var shouldUpdate = true;
|
46 | var view = map.getView();
|
47 | var updatePermalink = function() {
|
48 | if (!shouldUpdate) {
|
49 |
|
50 | shouldUpdate = true;
|
51 | return;
|
52 | }
|
53 |
|
54 | var center = view.getCenter();
|
55 | var hash = '#map=' +
|
56 | view.getZoom() + '/' +
|
57 | Math.round(center[0] * 100) / 100 + '/' +
|
58 | Math.round(center[1] * 100) / 100 + '/' +
|
59 | view.getRotation();
|
60 | var state = {
|
61 | zoom: view.getZoom(),
|
62 | center: view.getCenter(),
|
63 | rotation: view.getRotation()
|
64 | };
|
65 | window.history.pushState(state, 'map', hash);
|
66 | };
|
67 |
|
68 | map.on('moveend', updatePermalink);
|
69 |
|
70 |
|
71 |
|
72 | window.addEventListener('popstate', function(event) {
|
73 | if (event.state === null) {
|
74 | return;
|
75 | }
|
76 | map.getView().setCenter(event.state.center);
|
77 | map.getView().setZoom(event.state.zoom);
|
78 | map.getView().setRotation(event.state.rotation);
|
79 | shouldUpdate = false;
|
80 | });
|