aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/Map.js
blob: 2617b98dd4f52dc0e441d0efc444bfc9a7f09d53 (plain)
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
import 'mapbox-gl/dist/mapbox-gl.css';
import './switcher/switcher.css';
import mapboxgl from 'mapbox-gl';
import { SwitcherControl } from './switcher/switcher';
import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import { deviceCategories } from '../common/deviceCategories';
import { loadIcon, loadImage } from './mapUtil';
import { styleCarto, styleOsm } from './mapStyles';

const element = document.createElement('div');
element.style.width = '100%';
element.style.height = '100%';

export const map = new mapboxgl.Map({
  container: element,
  style: styleOsm(),
});

let ready = false;
const readyListeners = new Set();

const addReadyListener = listener => readyListeners.add(listener);

const removeReadyListener = listener => readyListeners.delete(listener);

const updateReadyValue = value => {
  ready = value;
  readyListeners.forEach(listener => listener(value));
}

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 });
  }));
  updateReadyValue(true);
});

map.addControl(new mapboxgl.NavigationControl({
  showCompass: false,
}));

map.addControl(new SwitcherControl(
  [{
    title: "styleOsm",
    uri: styleOsm(),
  }, {
    title: "styleCarto",
    uri: styleCarto(),
  }],
  'styleOsm',
  () => updateReadyValue(false),
  () => updateReadyValue(true),
));

const Map = ({ children }) => {
  const containerEl = useRef(null);

  const [mapReady, setMapReady] = useState(false);
  
  useEffect(() => {
    const listener = ready => setMapReady(ready);
    addReadyListener(listener);
    return () => {
      removeReadyListener(listener);
    };
  }, []);

  useLayoutEffect(() => {
    const currentEl = containerEl.current;
    currentEl.appendChild(element);
    if (map) {
      map.resize();
    }
    return () => {
      currentEl.removeChild(element);
    };
  }, [containerEl]);

  return (
    <div style={{ width: '100%', height: '100%' }} ref={containerEl}>
      {mapReady && children}
    </div>
  );
};

export default Map;