diff --git a/website/assets/berlin.png b/website/assets/berlin.png deleted file mode 100644 index e01876f..0000000 Binary files a/website/assets/berlin.png and /dev/null differ diff --git a/website/assets/berlin.webp b/website/assets/berlin.webp deleted file mode 100644 index 397ff5e..0000000 Binary files a/website/assets/berlin.webp and /dev/null differ diff --git a/website/assets/favicon.ico b/website_astro/public/favicon.ico similarity index 100% rename from website/assets/favicon.ico rename to website_astro/public/favicon.ico diff --git a/website_astro/public/favicon.svg b/website_astro/public/favicon.svg deleted file mode 100644 index f157bd1..0000000 --- a/website_astro/public/favicon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - diff --git a/website/assets/map_howto.js b/website_astro/public/scripts/map.js similarity index 73% rename from website/assets/map_howto.js rename to website_astro/public/scripts/map.js index 90a6531..4c60107 100644 --- a/website/assets/map_howto.js +++ b/website_astro/public/scripts/map.js @@ -15,7 +15,7 @@ const berlin = { function initMap() { if (window.map) return - document.getElementById('mapbg-image').style.opacity = '0.2' + document.getElementById('mapbg-image').style.opacity = '0.5' const map = new maplibregl.Map({ style: 'https://tiles.openfreemap.org/styles/liberty', @@ -49,19 +49,7 @@ function initMap() { new maplibregl.Marker().setLngLat([-0.119, 51.507]).addTo(map) } -const mapDiv = document.getElementById('map-container') -mapDiv.onclick = function () { - initMap() -} - -// initMap() - -// let movedTo2d = false - -function selectStyle(event, style) { - initMap() - toggleButtonSelection(event.target) - +function selectStyle(style) { const styleUrl = 'https://tiles.openfreemap.org/styles/' + style.split('-')[0] map.setStyle(styleUrl) @@ -77,13 +65,22 @@ function selectStyle(event, style) { map.setZoom(berlin.zoom) } - document.getElementById('style-url-code').innerText = styleUrl + // document.getElementById('style-url-code').innerText = styleUrl } -function toggleButtonSelection(clickedButton) { - clickedButton.classList.add('selected') +// --- start - Array.from(clickedButton.parentElement.children) - .filter(child => child !== clickedButton) - .forEach(button => button.classList.remove('selected')) -} +const mapDiv = document.getElementById('map-container') +initMap() + +const buttons = document.querySelectorAll('.button-container .btn') + +buttons.forEach(button => { + button.addEventListener('click', function (event) { + buttons.forEach(button => button.classList.remove('selected')) + button.classList.add('selected') + + const style = event.target.getAttribute('data-style') + selectStyle(style) + }) +}) diff --git a/website_astro/src/components/Map.astro b/website_astro/src/components/Map.astro index a4ef5a8..02a38f6 100644 --- a/website_astro/src/components/Map.astro +++ b/website_astro/src/components/Map.astro @@ -2,6 +2,12 @@ --- +

Use the following style in a MapLibre map:

+
https://tiles.openfreemap.org/styles/liberty
+ +

How can I use it?

+ +
@@ -12,13 +18,15 @@
-

Choose a style:

- - - - + + + +
-

Use the following style in a MapLibre map:

-
https://tiles.openfreemap.org/styles/liberty
+

You use OpenFreeMap by adding it to a website or mobile app.

+

How to use in detail

+ + + diff --git a/website_astro/src/layouts/Layout.astro b/website_astro/src/layouts/Layout.astro index 4ae47aa..6837990 100644 --- a/website_astro/src/layouts/Layout.astro +++ b/website_astro/src/layouts/Layout.astro @@ -20,15 +20,14 @@ import '../styles/global.css' /> + + - - - - + @@ -37,8 +36,8 @@ import '../styles/global.css'
- Privacy Policy - Terms of Service + Privacy Policy + Terms of Service
diff --git a/website_astro/src/layouts/Static.astro b/website_astro/src/layouts/Static.astro deleted file mode 100644 index 4ae47aa..0000000 --- a/website_astro/src/layouts/Static.astro +++ /dev/null @@ -1,44 +0,0 @@ ---- -interface Props { - title: string -} - -const { title } = Astro.props - -import '../styles/global.css' ---- - - - - - - - {title} - - - - - - - - - - - - - - - - - - - -
- Privacy Policy - Terms of Service -
- - diff --git a/website_astro/src/pages/howto_use.astro b/website_astro/src/pages/_howto_use.astro similarity index 100% rename from website_astro/src/pages/howto_use.astro rename to website_astro/src/pages/_howto_use.astro diff --git a/website_astro/src/pages/index.astro b/website_astro/src/pages/index.astro index 60f8648..36d4e2b 100644 --- a/website_astro/src/pages/index.astro +++ b/website_astro/src/pages/index.astro @@ -8,24 +8,18 @@ import { Content as Rest } from '../content/index/rest.md' --- - +

OpenFreeMap

githubgithub - x + x
- -

How can I use it?

-

(Click below, it's interactive!)

- - -

How can I donate or support this project?

@@ -36,25 +30,10 @@ import { Content as Rest } from '../content/index/rest.md'
- -

Is commercial usage allowed?

-

Yes.

- -

Who is behind this project?

-

- I'm Zsolt Ero (X, blog, email). I built MapHub and have been running map hosting in production for 8 years. -

- - - diff --git a/website_astro/src/pages/privacy.md b/website_astro/src/pages/privacy.md index 7537961..f8964f6 100644 --- a/website_astro/src/pages/privacy.md +++ b/website_astro/src/pages/privacy.md @@ -1,5 +1,5 @@ --- -layout: '../layouts/Static.astro' +layout: '../layouts/Layout.astro' title: 'Privacy Policy' --- diff --git a/website_astro/src/pages/tos.md b/website_astro/src/pages/tos.md index f20f096..49f7334 100644 --- a/website_astro/src/pages/tos.md +++ b/website_astro/src/pages/tos.md @@ -1,5 +1,5 @@ --- -layout: '../layouts/Static.astro' +layout: '../layouts/Layout.astro' title: 'Terms of Services' --- diff --git a/website_astro/src/styles/global.css b/website_astro/src/styles/global.css index 8277b6b..700957d 100644 --- a/website_astro/src/styles/global.css +++ b/website_astro/src/styles/global.css @@ -178,7 +178,7 @@ code { height: 100%; position: absolute; z-index: 1; - background-image: url('berlin.webp'); + background-image: url('/berlin.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;