From 0e63c794d335f173f6f6b9990f78fbad8d380b4a Mon Sep 17 00:00:00 2001 From: Anton Date: Wed, 20 Dec 2023 20:36:57 +0100 Subject: [PATCH] added tree and fire icon --- src/Components/Map/UtopiaMap.css | 14 +++++++ src/Utils/MarkerIconFactory.ts | 67 +++++++++++++++++--------------- 2 files changed, 49 insertions(+), 32 deletions(-) diff --git a/src/Components/Map/UtopiaMap.css b/src/Components/Map/UtopiaMap.css index 2dafb368..c481a126 100644 --- a/src/Components/Map/UtopiaMap.css +++ b/src/Components/Map/UtopiaMap.css @@ -50,6 +50,20 @@ left: 10px; width: 13px; } + + .fire-icon { + position: relative; + top: -36px; + left: 10px; + width: 13px; + } + + .tree-icon { + position: relative; + top: -38px; + left: 4px; + width: 24px; + } .leaflet-popup-scrolled { overflow-x: hidden; diff --git a/src/Utils/MarkerIconFactory.ts b/src/Utils/MarkerIconFactory.ts index f75df3fe..8bc91637 100644 --- a/src/Utils/MarkerIconFactory.ts +++ b/src/Utils/MarkerIconFactory.ts @@ -1,40 +1,43 @@ import * as L from 'leaflet'; -const createSvg = (shape:string, markerColor:string, borderColor:string) => { - const svgMap = { - circle: '', - square: '', - star: '', - penta: '' - }; - return svgMap[shape]; +const createSvg = (shape: string, markerColor: string, borderColor: string) => { + const svgMap = { + circle: '', + square: '', + star: '', + penta: '' + }; + return svgMap[shape]; } -const addIcon = (icon:string) => { - switch(icon) { - case "circle-solid": - return ''; - break; - case "calendar-days-solid": - return ''; - break; - case "user": - return '' - default: - return ""; - } +const addIcon = (icon: string) => { + switch (icon) { + case "circle-solid": + return ''; + break; + case "calendar-days-solid": + return ''; + break; + case "user": + return '' + case "fire": + return '' + case "tree": + return '' + default: + return ""; + } } -const MarkerIconFactory = (shape:string, color1:string, color2:string, icon:string) => -{ - return L.divIcon({ - html: `${createSvg(shape, color1, color2)}${addIcon(icon)}`, - iconAnchor: [17,40], - popupAnchor: [0,-40], - iconSize: new L.Point(40, 46), - className: "leaflet-data-marker", - shadowAnchor: [0, 0] - }); +const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: string) => { + return L.divIcon({ + html: `${createSvg(shape, color1, color2)}${addIcon(icon)}`, + iconAnchor: [17, 40], + popupAnchor: [0, -40], + iconSize: new L.Point(40, 46), + className: "leaflet-data-marker", + shadowAnchor: [0, 0] + }); } -export default MarkerIconFactory ; +export default MarkerIconFactory;