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

website

Browse Source
This commit is contained in:
Zsolt Ero
2024-06-12 17:45:00 +02:00
parent 797ea74a07
commit f9792f18e6
28 changed files with 136 additions and 841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
website_astro/public/scripts/donate.js Normal file
View File

@@ -0,0 +1,113 @@
const pricingList = [
{
price: 10,
name: 'Steel',
icon: '🗡️',
lm_url: 'af5553c6-f5fe-4253-b5d5-eb5531f8dcdf',
},
{
price: 20,
name: 'Bronze',
icon: '🗽',
lm_url: '9d2b0961-d8d2-4b10-94fc-5d7497baef40',
},
{
price: 40,
name: 'Copper',
icon: '🎷',
lm_url: '76d47d46-9ffa-411c-b6c3-96dd491631bc',
},
{
price: 75,
name: 'Silver',
icon: '🍴',
lm_url: 'df45c1e6-49dc-4494-9bdf-071d85e254a5',
},
{
price: 150,
name: 'Gold',
icon: '🏆',
lm_url: '30bf66e8-c9ff-4642-bb39-17a1dfe278f2',
},
{
price: 250,
name: 'Platinum',
icon: '🛰',
lm_url: 'c837df35-eb23-4206-a0b5-024a236077cb',
},
{
price: 500,
name: 'Sapphire',
icon: '💍',
lm_url: '5e5f0b42-b885-4bb6-a981-642d1e40d9ac',
},
{
price: 1000,
name: 'Diamond',
icon: '👑',
lm_url: '5c24c85b-cd08-42ff-9515-743e46f3e825',
},
]
const priceNumbers = pricingList.map(i => i.price)
const sliderDiv = document.getElementById('support-plans-slider')
const tooltipFormat = {
to: function (value) {
const price = pricingList[value]
const url = `https://support.openfreemap.org/checkout/buy/${price.lm_url}?media=1&desc=0&discount=0`
return `
<div class="plan-name">${price.name} Plan</div>
<div>$${price.price}/month</div>
<div>
<a class="plan-link" href="${url}" target="_blank">Subscribe</a>
</div>
`
},
}
const pipFormat = {
to: function (value) {
return pricingList[value].icon
},
}
const pricingSlider = noUiSlider.create(sliderDiv, {
start: 3,
range: { min: 0, max: priceNumbers.length - 1 },
step: 1,
tooltips: tooltipFormat,
pips: { mode: 'count', values: priceNumbers.length, format: pipFormat, density: -1 },
})
pricingSlider.on('update', function (values, _) {
for (const e of sliderDiv.querySelectorAll('.noUi-value')) {
e.classList.remove('active')
}
const value = parseInt(values[0])
const el = sliderDiv.querySelector('.noUi-value[data-value="' + value + '"]')
el.classList.add('active')
const tooltip = sliderDiv.querySelector('.noUi-tooltip')
tooltip.classList.remove('first')
tooltip.classList.remove('last')
if (document.documentElement.clientWidth < 500) {
if (value === 0) {
tooltip.classList.add('first')
}
if (value === priceNumbers.length - 1) {
tooltip.classList.add('last')
}
}
})
const pips = sliderDiv.querySelectorAll('.noUi-value')
for (const pip of pips) {
pip.addEventListener('click', e => {
const v = e.target.getAttribute('data-value')
pricingSlider.set(v)
})
}

7
website_astro/src/components/Donate.astro
View File

@@ -1,5 +1,5 @@
---
import { Content as Pricing } from '../content/pricing.md'
import { Content as DonateText } from '../content/index/donate.md'
---
<h2>How can I donate or support this project?</h2>
@@ -10,6 +10,7 @@ import { Content as Pricing } from '../content/pricing.md'
<div id="support-plans-slider"></div>
<Pricing />
<DonateText />
<!--<script src="support_plans.js"></script>-->
<script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
<script is:inline src="/scripts/donate.js"></script>

11
website_astro/src/content/how_to_use/custom_styles.md Normal file
View File

@@ -0,0 +1,11 @@
## Custom styles
You can customize the styles using the [Maputnik](https://maputnik.github.io/) editor. For example, you can remove labels, POIs, or change colors.
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)
[Customize Liberty](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty)
[Customize Positron](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron)

3
website_astro/src/content/how_to_use/leaflet.md Normal file
View File

@@ -0,0 +1,3 @@
## Using Leaflet?
A Leaflet-based snippet is coming soon.

3
website_astro/src/content/how_to_use/mapbox.md Normal file
View File

@@ -0,0 +1,3 @@
## Using Mapbox?
If you are currently using Mapbox, please change your libraries to [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/). MapLibre is based on the last open-source version of Mapbox GL JS before it went closed-source. Migrating should be as simple as changing the libraries, as long as you are not using any features specific to the 2.x or later releases.

22
website_astro/src/content/how_to_use/maplibre.md Normal file
View File

@@ -0,0 +1,22 @@
## How to load MapLibre?
Include [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) in the `<head>`. If you are using npm, you can install the `maplibre-gl` package. Make sure to import the CSS as well.
```html
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
```
Initialize it to a div like this:
```html
<div id="map" style="width: 100%; height: 500px"></div>
<script>
const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-0.114, 51.506],
zoom: 14.2,
container: 'map',
})
</script>
```

3
website_astro/src/content/how_to_use/mobile.md Normal file
View File

@@ -0,0 +1,3 @@
## Mobile Apps
For mobile apps, you can use the same styles with [MapLibre Native](https://maplibre.org/).

3
website_astro/src/content/how_to_use/self_hosting.md Normal file
View File

@@ -0,0 +1,3 @@
## Self-hosting
You can also download our processed planet MBTiles and Btrfs images if you want to self-host yourself. Details can be found on [GitHub](https://github.com/hyperknot/openfreemap).

2
website_astro/src/content/pricing.md → website_astro/src/content/index/donate.md
View File

@@ -4,4 +4,4 @@ If we ever receive a **Diamond** level supporter, we'll put their logo on this p
When subscribing to a support plan, you receive an invoice for each of your payments.
Note: if you want to make a single donation, feel free to cancel after the first payment. However, please understand that the nature of this project needs recurring donations to cover the server costs.
Note: if you want to make a single donation, feel free to cancel after the first payment. However, please understand that the nature of this project needs recurring donations to cover the server costs.

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

@@ -28,7 +28,7 @@ import '../styles/global.css'
<!-- <meta property="og:image" content="" />-->
<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/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>

112
website_astro/src/pages/_howto_use.astro
View File

@@ -1,112 +0,0 @@
<h1>How to use OpenFreeMap in my website or app</h1>
<input type="checkbox" id="col1" class="col-chk" />
<label for="col1" class="col-lbl">How to load MapLibre?</label>
<div class="col-cnt">
<p>
Include
<a href="https://maplibre.org/maplibre-gl-js/docs/" target="_blank">MapLibre GL JS</a>
in the <code>&lt;head&gt;</code>. If you are using npm, you can install the
<code>maplibre-gl</code> package. Make sure to import the CSS as well.
</p>
<pre><code class="lang-html">&lt;script src=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.js&quot;&gt;&lt;/script&gt;
&lt;link
href=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.css&quot;
rel=&quot;stylesheet&quot;
/&gt;
</code></pre>
<p>Initialize it to a div like this:</p>
<pre><code class="lang-html">&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;
&lt;script&gt;
const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-0.114, 51.506],
zoom: 14.2,
container: 'map'
})
&lt;/script&gt;
</code></pre>
</div>
<div>
<input type="checkbox" id="col2" class="col-chk" />
<label for="col2" class="col-lbl">Using Mapbox?</label>
<div class="col-cnt">
<p>
If you are currently using Mapbox, please change your libraries to
<a href="https://maplibre.org/maplibre-gl-js/docs/" target="_blank">MapLibre GL JS</a>.
MapLibre is based on the last open-source version of Mapbox GL JS before it went
closed-source. Migrating should be as simple as changing the libraries, as long as you are not
using any features specific to the 2.x or later releases.
</p>
</div>
</div>
<div>
<input type="checkbox" id="col3" class="col-chk" />
<label for="col3" class="col-lbl">Using Leaflet?</label>
<div class="col-cnt">
<p>A Leaflet-based snippet is coming soon.</p>
</div>
</div>
<div>
<input type="checkbox" id="col4" class="col-chk" />
<label for="col4" class="col-lbl">Mobile Apps</label>
<div class="col-cnt">
<p>
For mobile apps, you can use the same styles with
<a href="https://maplibre.org/" target="_blank">MapLibre Native</a>.
</p>
</div>
</div>
<div>
<input type="checkbox" id="col6" class="col-chk" />
<label for="col6" class="col-lbl">Custom styles</label>
<div class="col-cnt">
<p>
You can customize the styles using the
<a href="https://maputnik.github.io/" target="_blank">Maputnik</a> editor. For example, you
can remove labels, POIs, or change colors.
</p>
<p>
When you use a customized style, you need to host the style JSON yourself and use its URL in
MapLibre.
</p>
<p>
<a
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright"
target="_blank"
>Customize Bright</a
>
</p>
<p>
<a
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty"
target="_blank"
>Customize Liberty</a
>
</p>
<p>
<a
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron"
target="_blank"
>Customize Positron</a
>
</p>
</div>
<div>
<input type="checkbox" id="col5" class="col-chk" />
<label for="col5" class="col-lbl">Self-hosting</label>
<div class="col-cnt">
<p>
You can also download our processed planet MBTiles and Btrfs images if you want to self-host
yourself. Details can be found on
<a href="https://github.com/hyperknot/openfreemap" target="_blank">GitHub</a>.
</p>
</div>
</div>
</div>

21
website_astro/src/pages/how_to_use.astro Normal file
View File

@@ -0,0 +1,21 @@
---
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'
---
<Layout title="How to use OpenFreeMap in your website or app">
<h1>How to use OpenFreeMap in your website or app</h1>
<!--<input type="checkbox" id="col1" class="col-chk" />-->
<!--<label for="col1" class="col-lbl">How to load MapLibre?</label>-->
<MaplibreText />
<MapboxText />
<LeafletText />
<MobileText />
<CustomStylesText />
</Layout>

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

@@ -4,18 +4,16 @@ import Map from '../components/Map.astro'
import Logo from '../components/Logo.astro'
import Donate from '../components/Donate.astro'
import { Content as WhatIs } from '../content/index/whatis.md'
import { Content as Rest } from '../content/index/rest.md'
import { Content as WhatisText } from '../content/index/whatis.md'
import { Content as RestText } from '../content/index/rest.md'
---
<Layout title="OpenFreeMap">
<Logo />
<WhatIs />
<WhatisText />
<Map />
<Donate />
<Rest />
<!--<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>-->
<RestText />
<!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->
<!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>-->

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

@@ -153,18 +153,18 @@ p {
}
pre {
background: #efefef;
font-size: 14px !important;
/*background: #efefef;*/
font-size: 14px;
max-width: 600px;
margin: 0 auto 0.6em !important;
overflow: scroll;
font-weight: bold;
margin: 0 auto 0.6em;
/*overflow: scroll;*/
/*font-weight: bold;*/
}
code {
font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;
background: #efefef;
}
/*code {*/
/* font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;*/
/* background: #efefef;*/
/*}*/
#map-container {
width: 100%;