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;