Merge branch 'main' of github.com:hyperknot/openfreemap

website/src/content/how_to_use/openlayers.md

@@ -0,0 +1,29 @@
+## Using OpenLayers
+
+[ol-mapbox-style](https://openlayers.org/ol-mapbox-style/) is an OpenLayers add-on that creates a layer group from a Mapbox/MapLibre style.
+
+Include the following links and scripts in your page:
+
+```html
+<!-- OpenLayers -->
+<script src="https://unpkg.com/ol/dist/ol.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/ol/ol.css">
+
+<!-- ol-mapbox-style -->
+<script src="https://unpkg.com/ol-mapbox-style/dist/olms.js"></script>
+```
+
+Initialize it to a div like this:
+
+```html
+<div id="map" style="width: 100%; height: 500px"></div>
+<script>
+  const openfreemap = new ol.layer.Group();
+  const map = new ol.Map({
+    layers: [openfreemap],
+    view: new ol.View({center: ol.proj.fromLonLat([13.388, 52.517]), zoom: 9.5}),
+    target: 'map'
+  })
+  olms.apply(openfreemap, 'https://tiles.openfreemap.org/styles/liberty');
+</script>
+```

website/src/pages/quick_start.astro

@@ -9,6 +9,7 @@ import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
 import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
 import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
 import { Content as MobileText } from '../content/how_to_use/mobile.md'
+import { Content as OpenLayersText } from '../content/how_to_use/openlayers.md'
 import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md'
 ---
 
@@ -32,6 +33,7 @@ import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.m
     <MaplibreText />
     <MapboxText />
     <LeafletText />
+    <OpenLayersText />
     <MobileText />
     <CustomStylesText />
     <SelfHostingText />