sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-21 14:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

astro

Browse Source
This commit is contained in:
Zsolt Ero
2024-06-12 16:18:32 +02:00
parent 791ad896b2
commit 61111872d9
13 changed files with 44 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/assets/berlin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
website/assets/berlin.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 205 KiB

0
website/assets/favicon.ico → website_astro/public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

9
website_astro/public/favicon.svg
View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 749 B

39
website/assets/map_howto.js → website_astro/public/scripts/map.js
View File

@@ -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)
})
})

22
website_astro/src/components/Map.astro
View File

@@ -2,6 +2,12 @@
---
<p>Use the following style in a MapLibre map:</p>
<pre><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
<h2>How can I use it?</h2>
<!--<p>(Click below, it's interactive!)</p>-->
<div id="map-container">
<div id="mapbg-image">
<div class="mapbg-attrib">
@@ -12,13 +18,15 @@
</div>
</div>
<p>Choose a style:</p>
<div class="button-container">
<button onclick="selectStyle(event, 'positron')" class="btn">Positron</button>
<button onclick="selectStyle(event, 'bright')" class="btn">Bright</button>
<button onclick="selectStyle(event, 'liberty')" class="btn selected">Liberty</button>
<button onclick="selectStyle(event, 'liberty-3d')" class="btn">3D</button>
<button data-style="positron" class="btn">Positron</button>
<button data-style="bright" class="btn">Bright</button>
<button data-style="liberty" class="btn selected">Liberty</button>
<button data-style="liberty-3d" class="btn">3D</button>
</div>
<p>Use the following style in a MapLibre map:</p>
<pre><code class="lang-uri" id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
<p>You use OpenFreeMap by adding it to a website or mobile app.</p>
<p><a href="#">How to use in detail</a></p>
<script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script is:inline src="/scripts/map.js"></script>

11
website_astro/src/layouts/Layout.astro
View File

@@ -20,15 +20,14 @@ import '../styles/global.css'
/>
<meta name="generator" content={Astro.generator} />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- <meta property="og:title" content="" />-->
<!-- <meta property="og:type" content="" />-->
<!-- <meta property="og:url" content="" />-->
<!-- <meta property="og:image" content="" />-->
<!-- <link rel="icon" href="/favicon.ico" sizes="any" />-->
<!--<link rel="icon" type="image/svg+xml" href="/favicon.svg" />-->
<!--<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />-->
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<!--<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />-->
<!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
</head>
@@ -37,8 +36,8 @@ import '../styles/global.css'
<slot />
<div class="footer">
<a href="privacy">Privacy Policy</a>
<a href="tos">Terms of Service</a>
<a href="/privacy">Privacy Policy</a>
<a href="/tos">Terms of Service</a>
</div>
</body>
</html>

44
website_astro/src/layouts/Static.astro
View File

@@ -1,44 +0,0 @@
---
interface Props {
title: string
}
const { title } = Astro.props
import '../styles/global.css'
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta
name="description"
content="Open and free custom maps for your website and apps, based on OpenStreetMap."
/>
<meta name="generator" content={Astro.generator} />
<!-- <meta property="og:title" content="" />-->
<!-- <meta property="og:type" content="" />-->
<!-- <meta property="og:url" content="" />-->
<!-- <meta property="og:image" content="" />-->
<!-- <link rel="icon" href="/favicon.ico" sizes="any" />-->
<!--<link rel="icon" type="image/svg+xml" href="/favicon.svg" />-->
<!--<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />-->
<!--<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />-->
<!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
</head>
<body>
<slot />
<div class="footer">
<a href="privacy">Privacy Policy</a>
<a href="tos">Terms of Service</a>
</div>
</body>
</html>

0
website_astro/src/pages/howto_use.astro → website_astro/src/pages/_howto_use.astro
View File

27
website_astro/src/pages/index.astro
View File

@@ -8,24 +8,18 @@ import { Content as Rest } from '../content/index/rest.md'
---
<Layout title="OpenFreeMap">
<img src="logo.jpg" alt="logo" height="200" class="logo" />
<img src="/logo.jpg" alt="logo" height="200" class="logo" />
<h1>OpenFreeMap</h1>
<div class="icons">
<a href="https://github.com/hyperknot/openfreemap" target="_blank"
><img src="github.svg" alt="github" height="28" /></a
><img src="/github.svg" alt="github" height="28" /></a
>
<a href="https://x.com/hyperknot" target="_blank"><img src="x.svg" alt="x" height="28" /></a>
<a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
</div>
<WhatIs />
<h2>How can I use it?</h2>
<p>(Click below, it's interactive!)</p>
<Map />
<!--<p>How to use: <a href="#">In detail</a></p>-->
<div id="pricing"></div>
<h2>How can I donate or support this project?</h2>
@@ -36,25 +30,10 @@ import { Content as Rest } from '../content/index/rest.md'
<div id="support-plans-slider"></div>
<Pricing />
<h2>Is commercial usage allowed?</h2>
<p>Yes.</p>
<h2>Who is behind this project?</h2>
<p>
I'm Zsolt Ero (<a href="https://x.com/hyperknot">X</a>, <a href="https://blog.hyperknot.com/"
>blog</a
>, <a href="mailto:zsolt@openfreemap.org">email</a>). I built <a href="https://maphub.net/"
>MapHub</a
> and have been running map hosting in production for 8 years.
</p>
<Rest />
<!--<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>-->
<!--<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>-->
<!--<script src="map_howto.js"></script>-->
<!--<script src="support_plans.js"></script>-->
<!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->

2
website_astro/src/pages/privacy.md
View File

@@ -1,5 +1,5 @@
---
layout: '../layouts/Static.astro'
layout: '../layouts/Layout.astro'
title: 'Privacy Policy'
---

2
website_astro/src/pages/tos.md
View File

@@ -1,5 +1,5 @@
---
layout: '../layouts/Static.astro'
layout: '../layouts/Layout.astro'
title: 'Terms of Services'
---

2
website_astro/src/styles/global.css
View File

@@ -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;