From ae7ce20788a0812ef2ab2bdcac9ac3ebc63a19d2 Mon Sep 17 00:00:00 2001
From: Andy Emond <emondmeister@gmail.com>
Date: Thu, 4 May 2023 22:52:27 -0400
Subject: [PATCH 1/2] =?UTF-8?q?Ajoute=20une=20icone=20repr=C3=A9sentant=20?=
 =?UTF-8?q?le=20service=20sur=20la=20carte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MapView.vue    | 17 ++++++++++++++---
 src/components/TypeFilter.vue | 15 +--------------
 src/models/amenity_type.ts    | 13 +++++++++++++
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index 5f4c6db..ff3b8a8 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -51,11 +51,11 @@
 import 'leaflet/dist/leaflet.css';
 import { defineComponent, PropType, ref, watch } from 'vue';
 import { LMap, LTileLayer, LGeoJson, LLayerGroup, LControlAttribution, LControl } from '@vue-leaflet/vue-leaflet';
-import L from 'leaflet';
+import L, { icon } from 'leaflet';
 import { useMapStore } from '../stores/map';
 import { Feature } from 'geojson';
 import { AreaProperties } from '../models/area_properties';
-import { AmenityType } from '../models/amenity_type';
+import { AmenityType, amenityIconClasses } from '../models/amenity_type';
 import { useI18n } from 'vue-i18n';
 
 const areaStyle: L.PathOptions = {
@@ -147,7 +147,11 @@ export default defineComponent({
                         const marker = L.marker({
                             lng: distances.pt.coordinates[0],
                             lat: distances.pt.coordinates[1]
-                        }).bindPopup('<a href="https://docs.google.com/forms/d/e/1FAIpQLSdAW14AmmplUH8iNPzhTJZ4UY-DW9OY9TR78C6_OIPYy2L7_g/viewform?usp=pp_url&entry.919457431=' + distances.pt.coordinates[1] + ','  + distances.pt.coordinates[0] + '">' + i18n.t('correction') + '</a>');
+                        },
+                        {icon: L.divIcon({
+                            html: '<div><i class="fa-solid fa-'+ amenityIconClasses[type] +' mapicon"></i></div>',
+                            iconSize: [20, 20],
+                        })}).bindPopup('<a href="https://docs.google.com/forms/d/e/1FAIpQLSdAW14AmmplUH8iNPzhTJZ4UY-DW9OY9TR78C6_OIPYy2L7_g/viewform?usp=pp_url&entry.919457431=' + distances.pt.coordinates[1] + ','  + distances.pt.coordinates[0] + '">' + i18n.t('correction') + '</a>');
                         markers.value.leafletObject.addLayer(marker);
                     }
                 }
@@ -264,4 +268,11 @@ path.leaflet-interactive:focus {
     text-decoration: none;
 }
 
+.mapicon {
+  text-align: center;
+  line-height: 20px;
+  display: block;
+  font-size: 1.3em;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/TypeFilter.vue b/src/components/TypeFilter.vue
index 742d256..2c0287b 100644
--- a/src/components/TypeFilter.vue
+++ b/src/components/TypeFilter.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { AmenityType, defaultAmenityType } from '../models/amenity_type';
+import { AmenityType, defaultAmenityType, amenityIconClasses } from '../models/amenity_type';
 import vSelect from 'vue-select';
 import { useI18n } from 'vue-i18n';
 
@@ -70,19 +70,6 @@ export default defineComponent({
     }
 });
 
-const amenityIconClasses: { [type in AmenityType]: string } = {
-    [AmenityType.Clinic]: 'house-medical',
-    [AmenityType.Daycare]: 'child-reaching',
-    [AmenityType.FoodStore]: 'carrot',
-    [AmenityType.Library]: 'book',
-    [AmenityType.MetroStation]: 'train-subway',
-    [AmenityType.Park]: 'tree',
-    [AmenityType.Pharmacy]: 'pills',
-    [AmenityType.Restaurant]: 'mug-saucer',
-    [AmenityType.PrimarySchool]: 'school',
-    [AmenityType.SecondarySchool]: 'graduation-cap'
-};
-
 </script>
 
 <style scoped>
diff --git a/src/models/amenity_type.ts b/src/models/amenity_type.ts
index 97ea79f..ccabb41 100644
--- a/src/models/amenity_type.ts
+++ b/src/models/amenity_type.ts
@@ -11,4 +11,17 @@ export enum AmenityType {
     SecondarySchool= 'secondary_school'
 }
 
+export const amenityIconClasses: { [type in AmenityType]: string } = {
+    [AmenityType.Clinic]: 'house-medical',
+    [AmenityType.Daycare]: 'child-reaching',
+    [AmenityType.FoodStore]: 'carrot',
+    [AmenityType.Library]: 'book',
+    [AmenityType.MetroStation]: 'train-subway',
+    [AmenityType.Park]: 'tree',
+    [AmenityType.Pharmacy]: 'pills',
+    [AmenityType.Restaurant]: 'mug-saucer',
+    [AmenityType.PrimarySchool]: 'school',
+    [AmenityType.SecondarySchool]: 'graduation-cap'
+};
+
 export const defaultAmenityType = AmenityType.FoodStore;
\ No newline at end of file

From 282fba3ba75b0520f971f041d2df99c7fec940a8 Mon Sep 17 00:00:00 2001
From: Etienne de Martel <edemartel@gmail.com>
Date: Sat, 6 May 2023 20:47:07 -0400
Subject: [PATCH 2/2] Tweaked icons.

---
 src/components/MapView.vue | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index ff3b8a8..5395f3e 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -51,7 +51,7 @@
 import 'leaflet/dist/leaflet.css';
 import { defineComponent, PropType, ref, watch } from 'vue';
 import { LMap, LTileLayer, LGeoJson, LLayerGroup, LControlAttribution, LControl } from '@vue-leaflet/vue-leaflet';
-import L, { icon } from 'leaflet';
+import L from 'leaflet';
 import { useMapStore } from '../stores/map';
 import { Feature } from 'geojson';
 import { AreaProperties } from '../models/area_properties';
@@ -73,7 +73,6 @@ const travelTimeToColour = {
     10: '#abedab', //Light green
     5: '#5aabac', //Teal
     0: '#0868ac', //Blue
-
 };
 
 export default defineComponent({
@@ -144,14 +143,18 @@ export default defineComponent({
                     const properties = feature.properties as AreaProperties;
                     const distances = properties.distances[type];
                     if(distances) {
-                        const marker = L.marker({
+                        const pos: L.LatLngLiteral = {
                             lng: distances.pt.coordinates[0],
                             lat: distances.pt.coordinates[1]
-                        },
-                        {icon: L.divIcon({
-                            html: '<div><i class="fa-solid fa-'+ amenityIconClasses[type] +' mapicon"></i></div>',
-                            iconSize: [20, 20],
-                        })}).bindPopup('<a href="https://docs.google.com/forms/d/e/1FAIpQLSdAW14AmmplUH8iNPzhTJZ4UY-DW9OY9TR78C6_OIPYy2L7_g/viewform?usp=pp_url&entry.919457431=' + distances.pt.coordinates[1] + ','  + distances.pt.coordinates[0] + '">' + i18n.t('correction') + '</a>');
+                        };
+                        const options: L.MarkerOptions = {
+                            icon: L.divIcon({
+                                html: `<i class="fa-solid fa-${amenityIconClasses[type]} mapicon"></i>`,
+                                iconSize: [36, 36],
+                            })
+                        };
+                        const marker = L.marker(pos, options);
+                        marker.bindPopup(`<a href="https://docs.google.com/forms/d/e/1FAIpQLSdAW14AmmplUH8iNPzhTJZ4UY-DW9OY9TR78C6_OIPYy2L7_g/viewform?usp=pp_url&entry.919457431=${distances.pt.coordinates[1]},${distances.pt.coordinates[0]}">${i18n.t('correction')}</a>`);
                         markers.value.leafletObject.addLayer(marker);
                     }
                 }
@@ -268,11 +271,19 @@ path.leaflet-interactive:focus {
     text-decoration: none;
 }
 
+.leaflet-marker-icon {
+    background-color: rgba(0, 0, 0, 0.4);
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 18px;
+}
+
 .mapicon {
-  text-align: center;
-  line-height: 20px;
-  display: block;
-  font-size: 1.3em;
+    color: white;
+    display: block;
+    font-size: 20px;
 }
 
 </style>
\ No newline at end of file