From a457cbbaa2745a9de3b5ac32d9822eee7482ce77 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 21 Oct 2020 14:30:24 +0200
Subject: [PATCH] fix(map) : replace img with pure css
---
src/app/map/services/map.service.ts | 15 ++++++++-------
src/assets/scss/_icons.scss | 22 ++++++++++++++++++++++
src/styles.scss | 1 +
3 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index eb5eb8d4f..f13895072 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -1,4 +1,5 @@
import { Injectable } from '@angular/core';
+import { divIcon } from 'leaflet';
import { icon, Marker, Map } from 'leaflet';
@Injectable({
@@ -9,13 +10,13 @@ export class MapService {
constructor() {}
public createMarker(lat: number, lon: number, id: number, tooltip?: string): Marker {
- const marker = new Marker([lat, lon]).setIcon(
- icon({
- iconSize: [35, 41],
- iconAnchor: [13, 41],
- iconUrl: '../../../assets/img/ic_marker.png',
- })
- );
+ const icone = divIcon({
+ className: null,
+ html: "<div class='ico-marker-pin'></div>",
+ iconSize: [35, 41],
+ iconAnchor: [13, 41],
+ });
+ const marker = new Marker([lat, lon], { icon: icone });
if (tooltip) {
marker.bindTooltip(tooltip);
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index de969d5b3..f907cb4d0 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -78,3 +78,25 @@
border-radius: 50%;
display: inline-block;
}
+
+.ico-marker-pin {
+ width: 30px;
+ height: 30px;
+ border-radius: 50% 50% 50% 0;
+ background: $purple;
+ position: absolute;
+ transform: rotate(-45deg);
+ left: 50%;
+ top: 50%;
+ margin: -15px 0 0 -15px;
+}
+
+.ico-marker-pin::after {
+ content: '';
+ width: 10px;
+ height: 10px;
+ margin: 10px 0 0 10px;
+ background: #fff;
+ position: absolute;
+ border-radius: 50%;
+}
diff --git a/src/styles.scss b/src/styles.scss
index d62180f39..0a1dafb13 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,7 @@
@import 'assets/scss/typography';
@import 'assets/scss/color';
@import 'assets/scss/breakpoint';
+@import 'assets/scss/icons';
@import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
html,
--
GitLab