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

website

Browse Source
This commit is contained in:
Zsolt Ero
2024-06-12 13:29:46 +02:00
parent 087ab649b1
commit bcbd052444
6 changed files with 89 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
website/blocks/map_howto.html
View File

@@ -1,132 +0,0 @@
<div id="map-container">
<div id="mapbg-image">
<div class="mapbg-attrib">
<a href="https://openfreemap.org" target="_blank">OpenFreeMap</a>
<a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from
<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
</div>
</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>
</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>
<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>
<div id="pricing"></div>