mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
astro
This commit is contained in:
Zsolt Ero
@@ -65,7 +65,7 @@ function selectStyle(style) {
|
||||
map.setZoom(berlin.zoom)
|
||||
}
|
||||
|
||||
// document.getElementById('style-url-code').innerText = styleUrl
|
||||
document.getElementById('style-url-code').innerText = styleUrl
|
||||
}
|
||||
|
||||
// --- start
|
||||
|
||||
@@ -14,3 +14,86 @@ import { Content as DonateText } from '../content/index/donate.md'
|
||||
|
||||
<script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
|
||||
<script is:inline src="/scripts/donate.js"></script>
|
||||
|
||||
<style>
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#support-plans-slider {
|
||||
max-width: 98%;
|
||||
margin: 170px auto 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-connects {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
line-height: 0;
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value.active {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
border-color: #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noUi-tooltip.first {
|
||||
left: 0;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.noUi-tooltip.last {
|
||||
right: 0;
|
||||
left: unset;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 15px;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 15px;
|
||||
|
||||
background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.plan-link:hover,
|
||||
.plan-link:focus {
|
||||
background-color: #fdb900;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,31 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string
|
||||
}
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<img src="/logo.jpg" alt="logo" height="200" class="logo" />
|
||||
<h1>OpenFreeMap</h1>
|
||||
|
||||
<h1>{title}</h1>
|
||||
|
||||
<div class="icons">
|
||||
<a href="https://github.com/hyperknot/openfreemap" target="_blank"
|
||||
><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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
|
||||
import StyleUrlBug from './StyleUrlBug.astro'
|
||||
const { showStyleURL } = Astro.props
|
||||
---
|
||||
|
||||
<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">
|
||||
@@ -22,12 +20,81 @@
|
||||
<button data-style="liberty-3d" class="btn">3D</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Have a look at the default styles and read more about how to integrate it to your website or app
|
||||
here:
|
||||
</p>
|
||||
|
||||
<p><a href="#">How to use OpenFreeMap</a></p>
|
||||
{showStyleURL && <StyleUrlBug />}
|
||||
|
||||
<script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script is:inline src="/scripts/map.js"></script>
|
||||
|
||||
<style>
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mapbg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-image: url('/berlin.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
transition: opacity 3s;
|
||||
}
|
||||
|
||||
.mapbg-attrib {
|
||||
font:
|
||||
12px / 20px Helvetica Neue,
|
||||
Arial,
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
background-color: hsla(0, 0%, 100%, 0.5);
|
||||
padding: 0 5px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mapbg-attrib a {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mapbg-attrib a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 0 auto 0.6em;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
background: #2f5f8b;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: #4892d9;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #4892d9;
|
||||
}
|
||||
</style>
|
||||
|
||||
11
website_astro/src/components/StyleUrlBug.astro
Normal file
11
website_astro/src/components/StyleUrlBug.astro
Normal file
@@ -0,0 +1,11 @@
|
||||
<p>Use the following style in a MapLibre map:</p>
|
||||
<pre
|
||||
id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
|
||||
|
||||
<style>
|
||||
#style-url-pre {
|
||||
background: #efefef;
|
||||
padding: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -4,8 +4,8 @@ You can customize the styles using the [Maputnik](https://maputnik.github.io/) e
|
||||
|
||||
When you use a customized style, you need to host the style JSON yourself and use its URL in MapLibre.
|
||||
|
||||
[Customize Bright](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright)
|
||||
<a href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright" target="_blank">Customize Bright</a>
|
||||
|
||||
[Customize Liberty](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty)
|
||||
<a href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty" target="_blank">Customize Liberty</a>
|
||||
|
||||
[Customize Positron](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron)
|
||||
<a href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron" target="_blank">Customize Positron</a>
|
||||
|
||||
@@ -14,8 +14,8 @@ Initialize it to a div like this:
|
||||
<script>
|
||||
const map = new maplibregl.Map({
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
center: [-0.114, 51.506],
|
||||
zoom: 14.2,
|
||||
center: [13.388, 52.517],
|
||||
zoom: 9.5,
|
||||
container: 'map',
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
|
||||
import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
|
||||
import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
|
||||
import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
|
||||
import { Content as MobileText } from '../content/how_to_use/mobile.md'
|
||||
import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md'
|
||||
import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md'
|
||||
---
|
||||
|
||||
<Layout title="How to use OpenFreeMap in your website or app">
|
||||
<h1>How to use OpenFreeMap in your website or app</h1>
|
||||
|
||||
<MaplibreText />
|
||||
<MapboxText />
|
||||
<LeafletText />
|
||||
<MobileText />
|
||||
<CustomStylesText />
|
||||
<SelfHostingText />
|
||||
</Layout>
|
||||
@@ -9,9 +9,18 @@ import { Content as RestText } from '../content/index/rest.md'
|
||||
---
|
||||
|
||||
<Layout title="OpenFreeMap">
|
||||
<Logo />
|
||||
<Logo title="OpenFreeMap" />
|
||||
|
||||
<WhatisText />
|
||||
|
||||
<h2>How can I use it?</h2>
|
||||
<Map />
|
||||
<p>
|
||||
Have a look at the default styles and read more about how to integrate it to your website or app
|
||||
here:
|
||||
</p>
|
||||
<p><a href="/quick_start">Quick Start Guide</a></p>
|
||||
|
||||
<Donate />
|
||||
<RestText />
|
||||
|
||||
|
||||
68
website_astro/src/pages/quick_start.astro
Normal file
68
website_astro/src/pages/quick_start.astro
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Map from '../components/Map.astro'
|
||||
|
||||
import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
|
||||
import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
|
||||
import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
|
||||
import { Content as MobileText } from '../content/how_to_use/mobile.md'
|
||||
import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md'
|
||||
import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md'
|
||||
import Logo from '../components/Logo.astro'
|
||||
---
|
||||
|
||||
<Layout title="OpenFreeMap Quick Start Guide">
|
||||
<Logo title="OpenFreeMap Quick Start Guide" />
|
||||
|
||||
<div style="margin-top:30px; margin-bottom: 30px;">
|
||||
<p>
|
||||
This guide provides step-by-step instructions for integrating OpenFreeMap into your website or
|
||||
mobile application.
|
||||
</p><p>
|
||||
To get started, choose a style from the default styles provided below. Later, there'll be
|
||||
options to use custom styles as well.
|
||||
</p>
|
||||
<p>(You can navigate the map, it's interactive!)</p>
|
||||
</div>
|
||||
|
||||
<Map showStyleURL={true} />
|
||||
|
||||
<MaplibreText />
|
||||
<MapboxText />
|
||||
<LeafletText />
|
||||
<MobileText />
|
||||
<CustomStylesText />
|
||||
<SelfHostingText />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.col-lbl {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.col-chk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col-lbl:before {
|
||||
content: '►';
|
||||
margin-right: 1em;
|
||||
color: #555;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.col-cnt {
|
||||
display: none;
|
||||
margin: 1em 0 2em;
|
||||
}
|
||||
|
||||
.col-chk:checked ~ .col-cnt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.col-chk:checked ~ .col-lbl:before {
|
||||
content: '▼';
|
||||
}
|
||||
</style>
|
||||
@@ -7,9 +7,11 @@
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
@@ -18,6 +20,7 @@ svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
@@ -49,14 +52,11 @@ button:-moz-focusring {
|
||||
|
||||
body {
|
||||
padding-bottom: 100px;
|
||||
|
||||
line-height: 1.5;
|
||||
font-size: 17px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||
font-weight: normal;
|
||||
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@@ -91,9 +91,7 @@ h6,
|
||||
max-width: 600px;
|
||||
margin: 1em auto 0.5em;
|
||||
line-height: 1.2;
|
||||
|
||||
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro,
|
||||
sans-serif;
|
||||
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -113,17 +111,6 @@ strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -153,123 +140,14 @@ p {
|
||||
}
|
||||
|
||||
pre {
|
||||
/*background: #efefef;*/
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0.6em;
|
||||
font-size: 14px;
|
||||
/*overflow: scroll;*/
|
||||
/*font-weight: bold;*/
|
||||
padding: 7px 14px;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
font-size: 14px;
|
||||
/*font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;*/
|
||||
/* background: #efefef;*/
|
||||
}
|
||||
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mapbg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-image: url('/berlin.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
transition: opacity 3s;
|
||||
}
|
||||
|
||||
.mapbg-attrib {
|
||||
font:
|
||||
12px / 20px Helvetica Neue,
|
||||
Arial,
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
background-color: hsla(0, 0%, 100%, 0.5);
|
||||
padding: 0 5px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mapbg-attrib a {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mapbg-attrib a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
background: #2f5f8b;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: #4892d9;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 0 auto 0.6em;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #4892d9;
|
||||
}
|
||||
/*button:focus { }*/
|
||||
/*button:active { }*/
|
||||
|
||||
.col-lbl {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.col-chk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col-lbl:before {
|
||||
content: '►';
|
||||
margin-right: 1em;
|
||||
color: #555;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.col-cnt {
|
||||
display: none;
|
||||
margin: 1em 0 2em;
|
||||
}
|
||||
|
||||
.col-chk:checked ~ .col-cnt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.col-chk:checked ~ .col-lbl:before {
|
||||
content: '▼';
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -279,86 +157,6 @@ hr {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#support-plans-slider {
|
||||
max-width: 98%;
|
||||
margin: 170px auto 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-connects {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
line-height: 0;
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value.active {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
border-color: #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noUi-tooltip.first {
|
||||
left: 0;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.noUi-tooltip.last {
|
||||
right: 0;
|
||||
left: unset;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 15px;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 15px;
|
||||
|
||||
background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.plan-link:hover,
|
||||
.plan-link:focus {
|
||||
background-color: #fdb900;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
body {
|
||||
padding-bottom: 40px;
|
||||
|
||||
Reference in New Issue
Block a user