mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-22 06:22:16 +00:00
astro
This commit is contained in:
Zsolt Ero
BIN
website_astro/public/favicon.ico
Executable file
BIN
website_astro/public/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 749 B |
86
website_astro/public/scripts/map.js
Normal file
86
website_astro/public/scripts/map.js
Normal file
@@ -0,0 +1,86 @@
|
||||
const london3d = {
|
||||
center: [-0.114, 51.506],
|
||||
zoom: 14.2,
|
||||
bearing: 55.2,
|
||||
pitch: 60,
|
||||
}
|
||||
|
||||
const berlin = {
|
||||
center: [13.388, 52.517],
|
||||
zoom: 9.5,
|
||||
bearing: 0,
|
||||
pitch: 0,
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
if (window.map) return
|
||||
|
||||
document.getElementById('mapbg-image').style.opacity = '0.5'
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
center: berlin.center,
|
||||
zoom: berlin.zoom,
|
||||
bearing: berlin.bearing,
|
||||
pitch: berlin.pitch,
|
||||
container: mapDiv,
|
||||
boxZoom: false,
|
||||
// doubleClickZoom: false,
|
||||
scrollZoom: false,
|
||||
attributionControl: false,
|
||||
})
|
||||
window.map = map
|
||||
|
||||
map.once('idle', () => {
|
||||
document.getElementById('mapbg-image').remove()
|
||||
})
|
||||
|
||||
let nav = new maplibregl.NavigationControl({ showCompass: false })
|
||||
map.addControl(nav, 'top-right')
|
||||
|
||||
let scale = new maplibregl.ScaleControl()
|
||||
map.addControl(scale)
|
||||
|
||||
let attrib = new maplibregl.AttributionControl({
|
||||
compact: false,
|
||||
})
|
||||
map.addControl(attrib)
|
||||
|
||||
new maplibregl.Marker().setLngLat([-0.119, 51.507]).addTo(map)
|
||||
}
|
||||
|
||||
function selectStyle(style) {
|
||||
const styleUrl = 'https://tiles.openfreemap.org/styles/' + style.split('-')[0]
|
||||
map.setStyle(styleUrl)
|
||||
|
||||
if (style === 'liberty-3d') {
|
||||
map.setCenter(london3d.center)
|
||||
map.setPitch(london3d.pitch)
|
||||
map.setBearing(london3d.bearing)
|
||||
map.setZoom(london3d.zoom)
|
||||
} else if (map.getBearing() !== 0) {
|
||||
map.setCenter(berlin.center)
|
||||
map.setPitch(berlin.pitch)
|
||||
map.setBearing(berlin.bearing)
|
||||
map.setZoom(berlin.zoom)
|
||||
}
|
||||
|
||||
// document.getElementById('style-url-code').innerText = styleUrl
|
||||
}
|
||||
|
||||
// --- start
|
||||
|
||||
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)
|
||||
})
|
||||
})
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>-->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: '../layouts/Static.astro'
|
||||
layout: '../layouts/Layout.astro'
|
||||
title: 'Privacy Policy'
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: '../layouts/Static.astro'
|
||||
layout: '../layouts/Layout.astro'
|
||||
title: 'Terms of Services'
|
||||
---
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user