aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/LocationsMap.svelte
diff options
context:
space:
mode:
authorsecondl1ght <[email protected]>2022-09-15 18:10:35 -0600
committersecondl1ght <[email protected]>2022-09-15 18:10:35 -0600
commitf8de16cd01251d608853a83a2ba7877462833d69 (patch)
tree4feceb87b516f0d701911f0eafcb6b87eed8882e /src/components/LocationsMap.svelte
parenta8dc18c9c83c6712800082904c20e095b73647d4 (diff)
parent870df929c781649438948e546f19cb0402523ec2 (diff)
downloadcoinos-ui-f8de16cd01251d608853a83a2ba7877462833d69.tar.gz
coinos-ui-f8de16cd01251d608853a83a2ba7877462833d69.zip
Merge branch 'master' of github.com:coinos/coinos-ui-v2
Diffstat (limited to 'src/components/LocationsMap.svelte')
-rw-r--r--src/components/LocationsMap.svelte38
1 files changed, 32 insertions, 6 deletions
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");
}
});