Add example of binded source

geoblocks · Feb 3, 2023 · 33a5df3 · 33a5df3
1 parent c846104
commit 33a5df3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/examples/demo.html b/examples/demo.html
@@ -5,6 +5,7 @@
   </head>
   <body>
     <div class="map" id="map"></div>
+    <p>Demo bind source calls: <button onclick="refreshSource()">Refresh source</button></p>
     <script src="./demo.js"></script>
   </body>
 </html>
diff --git a/examples/demo.js b/examples/demo.js
@@ -9,19 +9,21 @@ import {TileDebug} from 'ol/source';
 
 import MapLibreLayer from '../src/MapLibreLayer';
 
+const mapLibreLayer = new MapLibreLayer({
+  maplibreOptions: {
+    style:
+      'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte_world.vt/style.json',
+  },
+  source: new Source({
+    attributions: [
+      '<a href="https://www.geo.admin.ch/en/geo-services/geo-services/portrayal-services-web-mapping/vector_tiles_service.html" target="_blank">© swisstopo</a>',
+    ],
+  }),
+});
+
 window.map = new Map({
   layers: [
-    new MapLibreLayer({
-      maplibreOptions: {
-        style:
-          'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte_world.vt/style.json',
-      },
-      source: new Source({
-        attributions: [
-          '<a href="https://www.geo.admin.ch/en/geo-services/geo-services/portrayal-services-web-mapping/vector_tiles_service.html" target="_blank">© swisstopo</a>',
-        ],
-      }),
-    }),
+    mapLibreLayer,
     new TileLayer({
       source: new TileDebug(),
     }),
@@ -32,3 +34,7 @@ window.map = new Map({
     zoom: 8,
   }),
 });
+
+window.refreshSource = () => {
+  mapLibreLayer.getSource().refresh();
+};
diff --git a/examples/style.css b/examples/style.css
@@ -4,5 +4,5 @@ body,
   margin: 0;
   padding: 0;
   width: 100%;
-  height: 100%;
+  height: 90%;
 }
diff --git a/src/MapLibreSource.js b/src/MapLibreSource.js
@@ -1,4 +1,4 @@
-import Source from "ol/source/Source";
+import Source from 'ol/source/Source';
 
 export default class MapLibreSource extends Source {
   constructor(options) {