Completed
Pull Request — develop (#235)
by Xaver
31s
created

map.js ➔ ... ➔ setTimeout   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 9

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
c 0
b 0
f 0
nc 1
dl 0
loc 9
rs 9.6666
nop 0
1
define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet', 'map/activearea'],
2
  function (ClientLayer, LabelLayer, Button, L) {
3
    'use strict';
4
5
    var options = {
6
      worldCopyJump: true,
7
      zoomControl: true,
8
      minZoom: 0
9
    };
10
11
    return function (linkScale, sidebar, buttons) {
12
      var self = this;
13
      var savedView;
14
15
      var map;
16
      var layerControl;
17
      var baseLayers = {};
18
19
      function saveView() {
20
        savedView = {
21
          center: map.getCenter(),
22
          zoom: map.getZoom()
23
        };
24
      }
25
26
      function contextMenuOpenLayerMenu() {
27
        document.querySelector('.leaflet-control-layers').classList.add('leaflet-control-layers-expanded');
28
      }
29
30
      function setActiveArea() {
31
        setTimeout(function () {
32
          map.setActiveArea({
33
            position: 'absolute',
34
            left: sidebar.getWidth() + 'px',
35
            right: 0,
36
            top: 0,
37
            bottom: 0
38
          });
39
        }, 300);
40
      }
41
42
      var el = document.createElement('div');
43
      el.classList.add('map');
44
45
      map = L.map(el, options);
46
      map.setActiveArea({
47
        position: 'absolute',
48
        left: sidebar.getWidth() + 'px',
49
        right: 0,
50
        top: 0,
51
        bottom: 0
52
      });
53
54
      var now = new Date();
55
      config.mapLayers.forEach(function (item, i) {
56
        if ((typeof item.config.start === 'number' && item.config.start <= now.getHours()) || (typeof item.config.end === 'number' && item.config.end > now.getHours())) {
57
          item.config.order = item.config.start * -1;
58
        } else {
59
          item.config.order = i;
60
        }
61
      });
62
63
      config.mapLayers = config.mapLayers.sort(function (a, b) {
64
        return a.config.order - b.config.order;
65
      });
66
67
      var layers = config.mapLayers.map(function (d) {
68
        return {
69
          'name': d.name,
70
          'layer': L.tileLayer(d.url.replace('{retina}', L.Browser.retina ? '@2x' : ''), d.config)
71
        };
72
      });
73
74
      map.addLayer(layers[0].layer);
75
76
      layers.forEach(function (d) {
77
        baseLayers[d.name] = d.layer;
78
      });
79
80
      var button = new Button(map, buttons);
81
82
      map.on('locationfound', button.locationFound);
83
      map.on('locationerror', button.locationError);
84
      map.on('dragend', saveView);
85
      map.on('contextmenu', contextMenuOpenLayerMenu);
86
87
      button.init();
88
89
      layerControl = L.control.layers(baseLayers, [], { position: 'bottomright' });
90
      layerControl.addTo(map);
91
92
      map.zoomControl.setPosition('topright');
93
94
      var clientLayer = new ClientLayer({ minZoom: config.clientZoom });
95
      clientLayer.addTo(map);
96
      clientLayer.setZIndex(5);
97
98
      var labelLayer = new LabelLayer({ minZoom: config.labelZoom });
99
      labelLayer.addTo(map);
100
      labelLayer.setZIndex(6);
101
102
      sidebar.button.addEventListener('visibility', setActiveArea);
103
104
      map.on('zoom', function () {
105
        clientLayer.redraw();
106
        labelLayer.redraw();
107
      });
108
109
      map.on('baselayerchange', function (e) {
110
        map.options.maxZoom = e.layer.options.maxZoom;
111
        clientLayer.options.maxZoom = map.options.maxZoom;
112
        labelLayer.options.maxZoom = map.options.maxZoom;
113
        if (map.getZoom() > map.options.maxZoom) {
114
          map.setZoom(map.options.maxZoom);
115
        }
116
117
        var style = document.querySelector('.css-mode:not([media="not"])');
118
        if (style && e.layer.options.mode !== '' && !style.classList.contains(e.layer.options.mode)) {
119
          style.media = 'not';
120
          labelLayer.updateLayer();
121
        }
122
        if (e.layer.options.mode) {
123
          var newStyle = document.querySelector('.css-mode.' + e.layer.options.mode);
124
          newStyle.media = '';
125
          newStyle.appendChild(document.createTextNode(''));
126
          labelLayer.updateLayer();
127
        }
128
      });
129
130
      map.on('load', function () {
131
        var inputs = document.querySelectorAll('.leaflet-control-layers-selector');
132
        [].forEach.call(inputs, function (input) {
133
          input.setAttribute('role', 'radiogroup');
134
          input.setAttribute('aria-label', input.nextSibling.innerHTML.trim());
135
        });
136
      });
137
138
      var nodeDict = {};
139
      var linkDict = {};
140
      var highlight;
141
142
      function resetMarkerStyles(nodes, links) {
143
        Object.keys(nodes).forEach(function (d) {
144
          nodes[d].resetStyle();
145
        });
146
147
        Object.keys(links).forEach(function (d) {
148
          links[d].resetStyle();
149
        });
150
      }
151
152
      function setView(bounds, zoom) {
153
        map.fitBounds(bounds, { maxZoom: (zoom ? zoom : config.nodeZoom) });
154
      }
155
156
      function goto(m) {
157
        var bounds;
158
159
        if ('getBounds' in m) {
160
          bounds = m.getBounds();
161
        } else {
162
          bounds = L.latLngBounds([m.getLatLng()]);
163
        }
164
165
        setView(bounds);
166
167
        return m;
168
      }
169
170
      function updateView(nopanzoom) {
171
        resetMarkerStyles(nodeDict, linkDict);
172
        var m;
173
174
        if (highlight !== undefined) {
175
          if (highlight.type === 'node' && nodeDict[highlight.o.node_id]) {
176
            m = nodeDict[highlight.o.node_id];
177
            m.setStyle(config.map.highlightNode);
178
          } else if (highlight.type === 'link' && linkDict[highlight.o.id]) {
179
            m = linkDict[highlight.o.id];
180
            m.setStyle(config.map.highlightLink);
181
          }
182
        }
183
184
        if (!nopanzoom) {
185
          if (m) {
186
            goto(m);
187
          } else if (savedView) {
188
            map.setView(savedView.center, savedView.zoom);
189
          } else {
190
            setView(config.fixedCenter);
191
          }
192
        }
193
      }
194
195
      self.setData = function setData(data) {
196
        nodeDict = {};
197
        linkDict = {};
198
199
        clientLayer.setData(data);
200
        labelLayer.setData(data, map, nodeDict, linkDict, linkScale);
201
202
        updateView(true);
203
      };
204
205
      self.resetView = function resetView() {
206
        button.disableTracking();
207
        highlight = undefined;
208
        updateView();
209
      };
210
211
      self.gotoNode = function gotoNode(d) {
212
        button.disableTracking();
213
        highlight = { type: 'node', o: d };
214
        updateView();
215
      };
216
217
      self.gotoLink = function gotoLink(d) {
218
        button.disableTracking();
219
        highlight = { type: 'link', o: d[0] };
220
        updateView();
221
      };
222
223
      self.gotoLocation = function gotoLocation(d) {
224
        button.disableTracking();
225
        map.setView([d.lat, d.lng], d.zoom);
226
      };
227
228
      self.destroy = function destroy() {
229
        button.clearButtons();
230
        sidebar.button.removeEventListener('visibility', setActiveArea);
231
        map.remove();
232
233
        if (el.parentNode) {
234
          el.parentNode.removeChild(el);
235
        }
236
      };
237
238
      self.render = function render(d) {
239
        d.appendChild(el);
240
        map.invalidateSize();
241
      };
242
243
      return self;
244
    };
245
  });
246