diff options
| author | secondl1ght <[email protected]> | 2022-09-15 18:10:35 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-09-15 18:10:35 -0600 |
| commit | f8de16cd01251d608853a83a2ba7877462833d69 (patch) | |
| tree | 4feceb87b516f0d701911f0eafcb6b87eed8882e /src/components | |
| parent | a8dc18c9c83c6712800082904c20e095b73647d4 (diff) | |
| parent | 870df929c781649438948e546f19cb0402523ec2 (diff) | |
| download | coinos-ui-f8de16cd01251d608853a83a2ba7877462833d69.tar.gz coinos-ui-f8de16cd01251d608853a83a2ba7877462833d69.zip | |
Merge branch 'master' of github.com:coinos/coinos-ui-v2
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/LocationsMap.svelte | 38 |
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: '© <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"); } }); |
