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-01-16 20:53:31 +01:00
parent 4114cdda6c
commit cb18657ec0
9 changed files with 175 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
website/blocks/map_docs.html Normal file
View File

@@ -0,0 +1,122 @@
<div id="map"></div>
<p>
Choose a style:
<button onclick="selectStyle('bright')">Bright</button>
<button onclick="selectStyle('liberty')">Liberty</button>
<button onclick="selectStyle('positron')">Positron</button>
</p>
<p style="margin-bottom: 2em">
Use the following style in a MapLibre map:
<code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code>
</p>
<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="language-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="language-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>