basemaps/openlayers.html at main · cornfieldcreative/basemaps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
    <head>
        <title>PMTiles OpenLayers Basemap Example</title>
        <meta charset="utf-8"/>
        <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
        <script src="https://unpkg.com/protomaps-themes-base@1.3.1/dist/index.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@v10.5.0/dist/olms.js"></script>
        <script src="https://unpkg.com/ol-pmtiles@0.1.1/dist/olpmtiles.js"></script>
        <style>
            body, #map {
                height:100vh;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
          const baseLayer = new ol.layer.VectorTile({
            declutter: true,
            source: new olpmtiles.PMTilesVectorSource({
              url: "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles",
              attributions: ["© OpenStreetMap"]
            }),
            style: null
          });

          olms.stylefunction(baseLayer, {
            version: "8",
            layers:protomaps_themes_base.default("protomaps","light"),
            sources: {protomaps: {type: "vector"}}
          }, 'protomaps');

          ol.proj.useGeographic();
          const map = new ol.Map({
            layers: [baseLayer],
            target: 'map',
            view: new ol.View({
              center: [0,0],
              zoom: 0
            }),
          });
        </script>
    </body>
</html>