Merge pull request #101 from geoadmin/feat-PB-2155-better-ol-example

asteiner-swisstopo · web-flow · commit 431161ebb393 · 2026-01-08T17:34:22.000+01:00
PB-2155: Replaces CodePen exemple with CodeSandbox
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 *.zip
+.idea
 .vscode
 .vite_opt_cache
 
diff --git a/visualize-data/3d-tiles.md b/visualize-data/3d-tiles.md
@@ -66,5 +66,4 @@ example='{
 
 An example of a Cesium application using terrain tiles, 3D buildings and a WMTS layer.
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/NPGLwVO?default-tab=js%2Cresult&editable=true&zoom=0.5" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/73fz8h?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Terrain, 3D Buildings and WMTS (CesiumJS)" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/visualize-data/terrain-service.md b/visualize-data/terrain-service.md
@@ -55,5 +55,4 @@ example='{
 
 An example of a Cesium application using terrain tiles, 3D buildings and a WMTS layer.
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/NPGLwVO?default-tab=js%2Cresult&editable=true&zoom=0.5" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/73fz8h?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Terrain, 3D Buildings and WMTS (CesiumJS)" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/visualize-data/vector-tiles.md b/visualize-data/vector-tiles.md
@@ -137,5 +137,14 @@ example='{
 
 An example using MapLibre to display the Light Base Map:
 
-<iframe height="600" style="width: 100%;" scrolling="no" title="Maplibre Vector Tiles" src="https://codepen.io/geoadmin/embed/XJmPzJo?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/d5vm45?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Simple VectorTiles" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+
+## Example: OpenLayers
+
+Another example that is using OpenLayers' [ol-mapbox-style](https://github.com/openlayers/ol-mapbox-style) library to display the Light Base Map.
+
+<iframe src="https://codesandbox.io/embed/6twfj8?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="VectorTiles in OpenLayers" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+
+The same example but using LV95 frame with OpenLayers:
+
+<iframe src="https://codesandbox.io/embed/nlgnwp?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="VectorTiles in OpenLayers in LV95" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/visualize-data/wms.md b/visualize-data/wms.md
@@ -172,5 +172,10 @@ The output image:
 
 This OpenLayers example shows how the CadastralWebMap appears differently when loaded using a WMTS compared to a tiled WMS.
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/ogjMOay?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/94ph6k?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="CadastralWebMap WMS/WMTS comparison" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+
+<br />
+
+Another OpenLayers example showing how to load a WMS layer with a gutter (buffer between tiles so that features overlapping them are fully rendered)
+
+<iframe src="https://codesandbox.io/embed/06h77?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="vanilla OpenLayers with a WMS layer" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/visualize-data/wmts.md b/visualize-data/wmts.md
@@ -159,12 +159,10 @@ example='{
 
 This OpenLayers example shows how the CadastralWebMap appears differently when loaded using a WMTS compared to a tiled WMS.
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/ogjMOay?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/94ph6k?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="CadastralWebMap WMS/WMTS comparison" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
 
 <br/>
 
-Using geo.admin.ch WMTS tiles in the new LV95 frame (EPSG:2056).
+Using geo.admin.ch WMTS tiles in the LV95 frame (EPSG:2056).
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/xbwJoMO?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/nlvrdk?view=preview&module=%2Fsrc%2Findex.jshidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="WMTS + WMS layer (OpenLayers 10+, EPSG:2056 / LV95)" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/visualize-data/xyz.md b/visualize-data/xyz.md
@@ -54,14 +54,12 @@ The output image:
 
 ### OpenLayers
 
-An OpenLayers 10 example showing the Base Map layer as XYZ tiles:
+An OpenLayers 10 example showing the Base Map layer as XYZ tiles in LV95:
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/GgpXMyg?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/pzj48q?view=preview&module=%2Fsrc%2Findex.js&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Simple XYZ in LV95" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
 
 <br/>
 
-An OpenLayers 10 example showing the SWISSIMAGE layer as XYZ tiles:
+An OpenLayers 10 example showing the SWISSIMAGE layer as XYZ tiles in WebMercator:
 
-<iframe height="600" style="width: 100%;" scrolling="no" src="https://codepen.io/geoadmin/embed/YPyOxoR?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
+<iframe src="https://codesandbox.io/embed/7m23n6?view=preview&hidenavigation=1" style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" title="Simple XYZ in WebMercator" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

-Original file line number
+Diff line change
@@ @@ -1,5 +1,6 @@ @@
 node_modules
 *.zip
 +.idea
 .vscode
 .vite_opt_cache