blob: 14f65367b267e93ea47c8f761a11cfff18f36cac (
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
|
import L from 'leaflet';
import { useEffect } from 'react';
import { useLeafletContext } from '@react-leaflet/core';
/* Legend adapted from https://codesandbox.io/s/how-to-add-a-legend-to-the-map-using-react-leaflet-6yqs5 */
export const Legend = () => {
const context = useLeafletContext();
useEffect(() => {
const legend = L.control({ position: 'topright' });
legend.onAdd = () => {
const div = L.DomUtil.create('div', 'info legend');
let labels = [];
labels.push('<i style="background:black"></i><span>Current position</span>');
labels.push('<i style="background:red"></i><span>Unjoinable</span>');
labels.push('<i style="background:green"></i><span>Joinable</span>');
labels.push('<i style="background:blue"></i><span>Editable & Joinable</span>');
div.innerHTML = labels.join('<br>');
return div;
};
const { map } = context;
legend.addTo(map);
}, [context]);
return null;
};
|
