openfreemap/website/blocks/map_howto.html

<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>
</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>