mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
Add OpenLayers instructions to the Quick Start (#70)
This commit is contained in:
29
website/src/content/how_to_use/openlayers.md
Normal file
29
website/src/content/how_to_use/openlayers.md
Normal file
@@ -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>
|
||||
```
|
||||
Reference in New Issue
Block a user