From cade4f39b630c5825ccefab45147e606d3125817 Mon Sep 17 00:00:00 2001 From: SongWei Date: Sun, 16 Feb 2020 20:16:51 +1100 Subject: [PATCH] marker --- front/marker.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 front/marker.js diff --git a/front/marker.js b/front/marker.js new file mode 100644 index 0000000..ba3b131 --- /dev/null +++ b/front/marker.js @@ -0,0 +1,40 @@ +import L from 'leaflet'; + +const icon_types = { + "blue": "blue.png", + "red": "red.png", + "green": "green.png", + "purple": "purple.png", + "loc_blue": "loc_blue.png", + "loc_red": "loc_red.png", + "loc_yellow": "loc_yellow.png" +}; + +function makeMarker(coord=[0, 0], icon='loc_blue', text='') { + let markerIcon = L.icon({ + iconSize: [30, 30], + iconAnchor: [15, 15], + iconUrl: './marker/' + icon_types[icon] + }); + + let [x, y] = coord; + let marker = L.marker(L.latLng(y, x), {icon: markerIcon}); + // https://gis.stackexchange.com/questions/59571/how-to-add-text-only-labels-on-leaflet-map-with-no-icon + marker.bindTooltip(text, {permanent: true, offset: [15, 0]}); + return marker; +} + +function makeUnitPos(coord=[0, 0], icon='purple') { + let markerIcon = L.icon({ + iconSize: [16, 16], + iconAnchor: [8, 8], + iconUrl: './marker/' + icon_types[icon] + }); + + let [x, y] = coord; + let marker = L.marker(L.latLng(y, x), {icon: markerIcon}); + return marker; +} + +export {icon_types, makeMarker, makeUnitPos}; +