diff options
| author | Adam Soltys <[email protected]> | 2022-09-15 15:43:48 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-09-15 15:43:48 -0700 |
| commit | f098b90a10283b31694b037670cb6cbbc6613c85 (patch) | |
| tree | 48529e05c1a04f350bd8b07b49e08cd8ae01d131 | |
| parent | 908e6e26a9b64e92bcb65461babab992c1bcc8f5 (diff) | |
| download | coinos-ui-f098b90a10283b31694b037670cb6cbbc6613c85.tar.gz coinos-ui-f098b90a10283b31694b037670cb6cbbc6613c85.zip | |
map styles
| -rw-r--r-- | src/app.html | 4 | ||||
| -rw-r--r-- | src/components/LocationsMap.svelte | 38 |
2 files changed, 36 insertions, 6 deletions
diff --git a/src/app.html b/src/app.html index ade9fa4b..4e3b66bd 100644 --- a/src/app.html +++ b/src/app.html @@ -8,6 +8,10 @@ <meta property="og:image" content="/icons/logo.svg" /> <title>coinos</title> %sveltekit.head% + <script src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script> + <style> + img.huechange { filter: hue-rotate(170deg); } + </style> </head> <body> <div>%sveltekit.body%</div> 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"); } }); |