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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
import { deviceCategories } from '../common/deviceCategories';
import { loadIcon, loadImage } from './mapUtil';
let readyListeners = [];
const onMapReady = listener => {
if (!readyListeners) {
listener();
} else {
readyListeners.push(listener);
}
};
const layerClickCallbacks = {};
const layerMouseEnterCallbacks = {};
const layerMauseLeaveCallbacks = {};
const addLayer = (id, source, icon, text, onClick) => {
const layer = {
'id': id,
'type': 'symbol',
'source': source,
'layout': {
'icon-image': icon,
'icon-allow-overlap': true,
},
};
if (text) {
layer.layout = {
...layer.layout,
'text-field': text,
'text-allow-overlap': true,
'text-anchor': 'bottom',
'text-offset': [0, -2],
'text-font': ['Roboto Regular'],
'text-size': 12,
}
layer.paint = {
'text-halo-color': 'white',
'text-halo-width': 1,
}
}
map.addLayer(layer);
layerClickCallbacks[id] = onClick;
map.on('click', id, onClick);
layerMouseEnterCallbacks[id] = () => {
map.getCanvas().style.cursor = 'pointer';
};
map.on('mouseenter', id, layerMouseEnterCallbacks[id]);
layerMauseLeaveCallbacks[id] = () => {
map.getCanvas().style.cursor = '';
};
map.on('mouseleave', id, layerMauseLeaveCallbacks[id]);
}
const removeLayer = (id, source) => {
const popups = element.getElementsByClassName('mapboxgl-popup');
if (popups.length) {
popups[0].remove();
}
map.off('click', id, layerClickCallbacks[id]);
delete layerClickCallbacks[id];
map.off('mouseenter', id, layerMouseEnterCallbacks[id]);
delete layerMouseEnterCallbacks[id];
map.off('mouseleave', id, layerMauseLeaveCallbacks[id]);
delete layerMauseLeaveCallbacks[id];
map.removeLayer(id);
map.removeSource(source);
}
const element = document.createElement('div');
element.style.width = '100%';
element.style.height = '100%';
const map = new mapboxgl.Map({
container: element,
style: {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
tileSize: 256,
attribution: '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
},
},
glyphs: 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
layers: [{
id: 'osm',
type: 'raster',
source: 'osm',
}],
},
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', async () => {
const background = await loadImage('images/background.svg');
await Promise.all(deviceCategories.map(async category => {
const imageData = await loadIcon(category, background, `images/icon/${category}.svg`);
map.addImage(category, imageData, { pixelRatio: window.devicePixelRatio });
}));
if (readyListeners) {
readyListeners.forEach(listener => listener());
readyListeners = null;
}
});
export default {
element,
map,
onMapReady,
addLayer,
removeLayer,
};
|
