From f098b90a10283b31694b037670cb6cbbc6613c85 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 15 Sep 2022 15:43:48 -0700
Subject: map styles

---
 src/components/LocationsMap.svelte | 38 ++++++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 2cff3449..063b4681 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -9,28 +9,54 @@
 		if (browser) {
 			const leaflet = await import('leaflet');
 
-			// this sets the inital view of the map on page load
 			map = leaflet.map(mapElement).setView([49.267265, -123.1491965], 13);
 
+			const myCustomColour = 'orange';
+
+			const markerHtmlStyles = `
+  background-color: ${myCustomColour};
+  width: 3rem;
+  height: 3rem;
+  display: block;
+  left: -1.5rem;
+  top: -1.5rem;
+  position: relative;
+  border-radius: 3rem 3rem 0;
+  transform: rotate(45deg);
+  border: 1px solid #FFFFFF`;
+
+			const icon = L.divIcon({
+				className: 'my-custom-pin',
+				iconAnchor: [0, 24],
+				labelAnchor: [-6, 0],
+				popupAnchor: [0, -36],
+				html: `<span style="${markerHtmlStyles}" />`
+			});
+
 			leaflet
-				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				.tileLayer('http://{s}tile.stamen.com/toner/{z}/{x}/{y}.png', {
+					// leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 					maxZoom: 19,
-					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+					subdomains: ['', 'a.', 'b.', 'c.', 'd.'],
 				})
 				.addTo(map);
 
-			// business locations
+			// let tonerLayer = new L.StamenTileLayer("toner");
+			// map.addLayer(tonerLayer);
+
+
+
 			leaflet
 				.marker([49.27034, -123.141373])
 				.addTo(map)
 				.bindPopup(
 					'Rolf Vancouver <br> 1628 W 1st Ave #231, Vancouver <br> <a href="https://www.rolfbodywork.com" target="_blank" rel="noreferrer">www.rolfbodywork.com</a>'
-				);
+				)._icon.classList.add("huechange");
 
 			leaflet
 				.marker([49.26419, -123.15702])
 				.addTo(map)
-				.bindPopup('Tacos Jorge <br> 2287 W Broadway, Vancouver');
+				.bindPopup('Tacos Jorge <br> 2287 W Broadway, Vancouver')._icon.classList.add("huechange");
 		}
 	});
 
-- 
cgit v1.2.3