OpenLayers snippet example

[jbelien]

Using Leaflet?

A Leaflet-based snippet is coming soon.

Could you also add an OpenLayers snippet ?

Thanks a lot for setting up OpenFreeMap! ❤️

[hyperknot]

Absolutely I'd be more than happy to add it, especially if someone contributes the example code.

I've just looked around, probably the official OpenMapTiles example is the best for this list: https://openlayers.org/ol-mapbox-style/examples/

[hyperknot]

Asked here: https://github.com/openlayers/openlayers/discussions/16223

[hyperknot]

Got an answer from @ahocevar, here is the minimum example:

<script src="https://unpkg.com/ol@10/dist/ol.js"></script>
<script src="https://unpkg.com/ol-mapbox-style@12/dist/olms.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ol@10/ol.css" type="text/css">
<div id="map" style="width: 100%; height: 500px"></div>
<script>
  const map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([13.388, 52.517]),
      zoom: 9.5
    })
  });
  olms.apply(map, 'https://tiles.openfreemap.org/styles/liberty');
</script>

Or with modules:

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

apply('map', ' https://tiles.openfreemap.org/styles/liberty');

I'll rework the examples in the documentation and include it.

[hyperknot]

@ahocevar added an official example

[jbelien]

Thank you! 😊