Latest develop -> main

.storybook/main.ts

@@ -27,6 +27,13 @@ const config: StorybookConfig = {
   },
   docs: {},
   staticDirs: ['./static'],
+  viteFinal: async (config, { configType }) => {
+    if (configType === 'PRODUCTION') {
+      config.base = '/ee-react-map-demos/';
+    }
+
+    return config;
+  },
 };
 
 export default config;

src/stories/Alternatives.mdx

@@ -69,7 +69,7 @@ import { Meta } from '@storybook/blocks';
 
 ## Map tile layers
 
-#### [Amsterdam Base Layer](../?path=/docs/alternatives--docs)
+#### [Amsterdam Base Layer](./?path=/docs/react-baselayer--docs)
 
 #### [NL Maps](https://nlmaps.nl/)
 

src/stories/Intro.mdx

@@ -55,7 +55,7 @@ For each demo we also try to include documentation with following structure:
       />
       <h4 className="sb-section-item-heading">Amsterdam Base Layer</h4>
       <p className="sb-section-item-paragraph">How to implement a Leaflet map using the Amsterdam base tile layer.</p>
-      <a href="../?path=/docs/react-baselayer--docs">Learn more<RightArrow /></a>
+      <a href="./?path=/docs/react-baselayer--docs">Learn more<RightArrow /></a>
     </div>
     <div className="sb-section-item">
       <img
@@ -64,14 +64,14 @@ For each demo we also try to include documentation with following structure:
       />
       <h4 className="sb-section-item-heading">Marker</h4>
       <p className="sb-section-item-paragraph">How to implement a Leaflet point marker.</p>
-      <a href="../?path=/docs/react-marker--docs">Learn more<RightArrow /></a>
+      <a href="./?path=/docs/react-marker--docs">Learn more<RightArrow /></a>
     </div>
     <div className="sb-section-item">
       <img src={Intro02} alt="An example of GeoJSON map layer" />
       <div>
         <h4 className="sb-section-item-heading">GeoJSON</h4>
         <p className="sb-section-item-paragraph">Learn about the format and powers of the GeoJSON layer.</p>
-        <a href="../?path=/docs/react-geojson--docs">Learn more<RightArrow /></a>
+        <a href="./?path=/docs/react-geojson--docs">Learn more<RightArrow /></a>
       </div>
     </div>
   </div>
@@ -86,25 +86,25 @@ For each demo we also try to include documentation with following structure:
         <img src={Intro03} alt="A screenshot showing the multiple marker selection demo" />
         <h4 className="sb-section-item-heading">Multiple Marker Selection</h4>
         <p className="sb-section-item-paragraph">Learn how to display and select Amsterdam taxi stand locations in a Leaflet map with the help of React's context.</p>
-        <a href="../?path=/docs/react-context-examples-multimarkerselect--docs">Learn more<RightArrow /></a>
+        <a href="./?path=/docs/react-context-examples-multimarkerselect--docs">Learn more<RightArrow /></a>
       </div>
       <div className="sb-grid-item">
         <img src={Intro04} alt="A screenshot showing a marker cluster demo" />
         <h4 className="sb-section-item-heading">Marker Clustering</h4>
         <p className="sb-section-item-paragraph">Learn how to handle large numbers of markers through clustering.</p>
-        <a href="../?path=/docs/react-markerclusterspiderfy--docs">Learn more<RightArrow /></a>
+        <a href="./?path=/docs/react-markerclusterspiderfy--docs">Learn more<RightArrow /></a>
       </div>
       <div className="sb-grid-item">
         <img src={Intro05} alt="A screenshot showing a Leaflet map combined with elements from Amsterdam Design System" />
         <h4 className="sb-section-item-heading">Zoom Controls + Amsterdam Design System</h4>
         <p className="sb-section-item-paragraph">Learn how to implement custom zoom controls and wrap a Leaflet map with components from Amsterdam Design System</p>
-        <a href="../?path=/docs/react-context-examples-zoomcontrolsfullscreen--docs">Learn more<RightArrow /></a>
+        <a href="./?path=/docs/react-context-examples-zoomcontrolsfullscreen--docs">Learn more<RightArrow /></a>
       </div>
       <div className="sb-grid-item">
         <img src={Intro06} alt="A screenshot of an Amsterdam WFS layer" />
         <h4 className="sb-section-item-heading">WFS Layer</h4>
         <p className="sb-section-item-paragraph">Learn how to connect with a WFS endpoint and show the buildings of Amsterdam on a Leaflet map.</p>
-        <a href="../?path=/docs/react-wfslayer--docs">Learn more<RightArrow /></a>
+        <a href="./?path=/docs/react-wfslayer--docs">Learn more<RightArrow /></a>
       </div>
     </div>
   </div>

src/stories/Layers.mdx

@@ -50,8 +50,8 @@ Markers can be customized with icons, popups, and tooltips to provide additional
 The Marker examples show how to create a simple map with markers at specific locations.
 See:
 
-- Example: [Marker (React + Leaflet)](../?path=/docs/react-marker--docs)
-- Example: [Marker (React + React-leaflet)](../?path=/docs/react-leaflet-marker--docs)
+- Example: [Marker (React + Leaflet)](./?path=/docs/react-marker--docs)
+- Example: [Marker (React + React-leaflet)](./?path=/docs/react-leaflet-marker--docs)
 
 ### Usage scenarios
 
@@ -85,8 +85,8 @@ You can also create custom tile layers using your own tile server or by using a
 The TileLayer is used in the BaseLayer examples in this guide. The BaseLayer examples show how to create a simple map with a tile layer as the base layer.
 See:
 
-- Example: [BaseLayer (React + Leaflet)](../?path=/docs/react-baselayer--docs)
-- Example: [BaseLayer (React + React-leaflet)](../?path=/docs/react-leaflet-baselayer--docs)
+- Example: [BaseLayer (React + Leaflet)](./?path=/docs/react-baselayer--docs)
+- Example: [BaseLayer (React + React-leaflet)](./?path=/docs/react-leaflet-baselayer--docs)
 
 ## VideoOverlay
 
@@ -104,8 +104,8 @@ The WMS examples show how to create a simple map with a WMS layer.
 
 See:
 
-- Example: [WMSLayer (React + Leaflet)](../?path=/docs/react-wmslayer--docs)
-- Example: [WMSLayer (React + React-leaflet)](../?path=/docs/react-leaflet-wmslayer--docs)
+- Example: [WMSLayer (React + Leaflet)](./?path=/docs/react-wmslayer--docs)
+- Example: [WMSLayer (React + React-leaflet)](./?path=/docs/react-leaflet-wmslayer--docs)
 
 ### Usage scenarios
 
@@ -140,8 +140,8 @@ A **Polyline** in Leaflet is used to draw a series of connected line segments on
 
 See:
 
-- Example: [PolylineLayer (React + Leaflet)](../?path=/docs/react-polylinelayer--docs)
-- Example: [PolylineLayer (React + React-leaflet)](../?path=/docs/react-leaflet-polylinelayer--docs)
+- Example: [PolylineLayer (React + Leaflet)](./?path=/docs/react-polylinelayer--docs)
+- Example: [PolylineLayer (React + React-leaflet)](./?path=/docs/react-leaflet-polylinelayer--docs)
 
 ### Usage Scenarios
 
@@ -159,8 +159,8 @@ The Polygon layer in Leaflet is similar to a [Polyline](#polyline) but it forms
 
 See:
 
-- Example: [PolygonLayer (React + Leaflet)](../?path=/docs/react-polygonlayer--docs)
-- Example: [PolygonLayer (React + React-leaflet)](../?path=/docs/react-leaflet-polygonlayer--docs)
+- Example: [PolygonLayer (React + Leaflet)](./?path=/docs/react-polygonlayer--docs)
+- Example: [PolygonLayer (React + React-leaflet)](./?path=/docs/react-leaflet-polygonlayer--docs)
 
 ### Usage Scenarios
 
@@ -190,8 +190,8 @@ GeoJSON layers can be used to display points, lines, polygons, and other vector
 
 The GeoJSON examples show how to create a simple map with a GeoJSON layer.
 
-- Example: [GeoJSON (React + Leaflet)](../?path=/docs/react-geojson--docs)
-- Example: [GeoJSON (React + React-leaflet)](../?path=/docs/react-leaflet-geojsonlayer--docs)
+- Example: [GeoJSON (React + Leaflet)](./?path=/docs/react-geojson--docs)
+- Example: [GeoJSON (React + React-leaflet)](./?path=/docs/react-leaflet-geojsonlayer--docs)
 
 ## MVT (Mapbox Vector Tiles)
 
@@ -211,5 +211,5 @@ The WFS examples show how to create a simple map with a WFS layer. (without the
 
 See:
 
-- Example: [WFSLayer (React + Leaflet)](../?path=/docs/react-wfslayer--docs)
-- Example: [WFSLayer (React + React-leaflet)](../?path=/docs/react-leaflet-wfslayer--docs)
+- Example: [WFSLayer (React + Leaflet)](./?path=/docs/react-wfslayer--docs)
+- Example: [WFSLayer (React + React-leaflet)](./?path=/docs/react-leaflet-wfslayer--docs)

src/stories/MarkerClustering.mdx

@@ -30,4 +30,4 @@ Makes it easier for users to identify areas with high concentrations of markers.
 - [Supercluster](https://github.com/mapbox/supercluster)
 - [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster)
 
-*We recommend the Supercluster library. The [clustering examples](../?path=/docs/react-markercluster--docs) in this project use Supercluster. This [blog post](https://blog.mapbox.com/clustering-millions-of-points-on-a-map-with-supercluster-272046ec5c97) explains the improved performance from [Supercluster](https://github.com/mapbox/supercluster).*
+*We recommend the Supercluster library. The [clustering examples](./?path=/docs/react-markercluster--docs) in this project use Supercluster. This [blog post](https://blog.mapbox.com/clustering-millions-of-points-on-a-map-with-supercluster-272046ec5c97) explains the improved performance from [Supercluster](https://github.com/mapbox/supercluster).*

src/stories/pages/Context/Context.mdx

@@ -18,23 +18,23 @@ Often with React and Leaflet, you may find the need to communicate/interact with
 
 This is when <a href="https://react.dev/learn/passing-data-deeply-with-context" target="_blank">React context</a> can help, these examples demonstrate various mapping solutions using React's context.
 
-#### [Multiple Marker Select](../?path=/docs/react-context-examples-multimarkerselect--docs) *(Advanced)*
+#### [Multiple Marker Select](./?path=/docs/react-context-examples-multimarkerselect--docs) *(Advanced)*
 
 Using Amsterdam taxi stands from the [Parkeervakken (Parking Spaces) API](https://api.data.amsterdam.nl/v1/parkeervakken/), you can select multiple layers. The context stores the selected layer IDs.
 
-#### [Position](../?path=/docs/react-context-examples-position--docs) *(Simple)*
+#### [Position](./?path=/docs/react-context-examples-position--docs) *(Simple)*
 
-Using the Amsterdam [BaseLayer](../?path=/docs/react-baselayer--docs) we display the map center point coordinates, including when the map moves.
+Using the Amsterdam [BaseLayer](./?path=/docs/react-baselayer--docs) we display the map center point coordinates, including when the map moves.
 
-#### [Single marker select](../?path=/docs/react-context-examples-singlemarkerselect--docs) *(Advanced)*
+#### [Single marker select](./?path=/docs/react-context-examples-singlemarkerselect--docs) *(Advanced)*
 
-Similar to the [MultiMarkerSelect example](../?path=/story/react-context-examples-multimarkerselect--default) this is using locations of glass disposal points from the [Afvalwijzer (Waste guide) API](https://api.data.amsterdam.nl/v1/afvalwijzer). You can select a single marker. The context stores the selected marker ID.
+Similar to the [MultiMarkerSelect example](./?path=/story/react-context-examples-multimarkerselect--default) this is using locations of glass disposal points from the [Afvalwijzer (Waste guide) API](https://api.data.amsterdam.nl/v1/afvalwijzer). You can select a single marker. The context stores the selected marker ID.
 
-#### [Zoom controls](../?path=/docs/react-context-examples-zoom-controls--docs) *(Simple)*
+#### [Zoom controls](./?path=/docs/react-context-examples-zoomcontrols--docs) *(Simple)*
 
 This demonstrates custom control buttons (from the [Amsterdam design system](https://designsystem.amsterdam.nl/)) that control the map zoom levels. It uses context to interact directly with the Leaflet map object.
 
-#### [Full-screen zoom controls](../?path=/docs/react-context-examples-full-screen-zoom-controls--docs) *(Simple)*
+#### [Full-screen zoom controls](./?path=/docs/react-context-examples-zoomcontrolsfullscreen--docs) *(Simple)*
 
 Wrapped in components from the [Amsterdam design system](https://designsystem.amsterdam.nl/), this demonstrates custom control buttons that control the map zoom levels in an Amsterdam style webpage. It uses context to interact directly with the Leaflet map object.
 
@@ -67,7 +67,7 @@ If the answer to any of the following is **no**, context probably isn't useful f
 
 ## Advanced structure tips
 
-- Setup a 'Provider' component, to setup the initial state. Wrap this `Provider` component around all components that should inherit context state and methods. [See example](../?path=/docs/react-context-examples-multimarkerselect--docs#--mapprovidertsx).
+- Setup a 'Provider' component, to setup the initial state. Wrap this `Provider` component around all components that should inherit context state and methods. [See example](./?path=/docs/react-context-examples-multimarkerselect--docs#--mapprovidertsx).
 
 - When combined with TypeScript, definitions and undefined/null properties can make things confusing. This is where TypeScript's [`NonNullable`](https://www.typescriptlang.org/docs/handbook/utility-types.html#nonnullabletype) is useful. For example:
 

src/stories/pages/Context/Position/index.mdx

@@ -22,7 +22,7 @@ import mapStyles from '@/pages/ContextExamples/map.module.css?raw';
 
 ## Description
 
-This is a simple Context example using the Amsterdam [BaseLayer](../?path=/docs/react-baselayer--docs) to display the map center point coordinates, including when the map moves.
+This is a simple Context example using the Amsterdam [BaseLayer](./?path=/docs/react-baselayer--docs) to display the map center point coordinates, including when the map moves.
 
 In the `Map.tsx` component after creating the new Leaflet map (line #21) we add an event listener for `mapmove` (line #47). In this callback we update the position context state:
 

src/stories/pages/React/BaseLayer/index.mdx

@@ -8,7 +8,7 @@ import getCrsRd from '@/utils/getCrsRd?raw';
 
 # BaseLayer
 
-**[Background](../?path=/docs/leaflet-layers--docs#tilelayer)** | **<a href="https://github.com/Amsterdam/ee-react-map-demos/tree/main/src/pages/BaseLayer" target="_blank">GitHub Repo URL</a>**
+**[Background](./?path=/docs/leaflet-layers--docs#tilelayer)** | **<a href="https://github.com/Amsterdam/ee-react-map-demos/tree/main/src/pages/BaseLayer" target="_blank">GitHub Repo URL</a>**
 
 #### Table of Contents
 
@@ -20,7 +20,7 @@ import getCrsRd from '@/utils/getCrsRd?raw';
 
 ## Requirements
 
-- [See global requirements list](../?path=/docs/global-requirements--docs)
+- [See global requirements list](./?path=/docs/global-requirements--docs)
 - CRS handling ([utils/getCrsRd.ts](#1-getcrsrdts))
 
 ## Description
@@ -33,7 +33,7 @@ This is the Amsterdam base/tile layer on a plain Leaflet map.
 
 A <a href="https://leafletjs.com/reference.html#tilelayer" target="_blank">TileLayer</a> is composed of images, such as satellite imagery, that are composed of square tiles mosaicked together in columns and rows, giving the layer the appearance that it is one continuous image. These layers have several levels of detail (LOD) that permit users to zoom in to any region of the map and load additional tiles that depict features in higher resolution at larger map scales.
 
-The datateam Geo makes various reference maps based on reference data from team BenK (Basis- en Kernregistraties). They are available in [various reference systems (Rijksdriehoek and Web Mercator)](../?path=/docs/coordinate-reference-systems-crs--docs) and the following visualizations:
+The datateam Geo makes various reference maps based on reference data from team BenK (Basis- en Kernregistraties). They are available in [various reference systems (Rijksdriehoek and Web Mercator)](./?path=/docs/coordinate-reference-systems-crs--docs) and the following visualizations:
 
 - Standard (standaard)
 - Black and white (zwart-wit)

src/stories/pages/React/GeoJSONLayer/index.mdx

@@ -20,8 +20,8 @@ import data from '@/pages/GeoJSONLayer/data.json?raw';
 
 ## Requirements
 
-- This example is built upon the [BaseMap component example](../?path=/docs/react-baselayer--docs).
-- [See global requirements list](../?path=/docs/global-requirements--docs)
+- This example is built upon the [BaseMap component example](./?path=/docs/react-baselayer--docs).
+- [See global requirements list](./?path=/docs/global-requirements--docs)
 
 ## Description
 

src/stories/pages/React/Marker/index.mdx

@@ -9,7 +9,7 @@ import icon from '@/assets/icons/map-marker.svg?raw';
 
 # Marker
 
-**[Background and use cases](../?path=/docs/leaflet-layers--docs#marker)** | **<a href="https://github.com/Amsterdam/ee-react-map-demos/tree/main/src/pages/Marker" target="_blank">GitHub Repo URL</a>**
+**[Background and use cases](./?path=/docs/leaflet-layers--docs#marker)** | **<a href="https://github.com/Amsterdam/ee-react-map-demos/tree/main/src/pages/Marker" target="_blank">GitHub Repo URL</a>**
 
 #### Table of Contents
 
@@ -20,14 +20,14 @@ import icon from '@/assets/icons/map-marker.svg?raw';
 
 ## Requirements
 
-- [See global requirements list](../?path=/docs/global-requirements--docs)
-- This example is built upon the [BaseMap component example](../?path=/docs/react-baselayer--docs).
+- [See global requirements list](./?path=/docs/global-requirements--docs)
+- This example is built upon the [BaseMap component example](./?path=/docs/react-baselayer--docs).
 
 ## Description
 
 A marker is used to display a location on a map. By default, a marker is a HTML image element rendered inside the parent map DOM element. This marker element can be configured, extended and (like in this example) replaced with another icon.
 
-In this code example, the default Leaflet marker (<a href="https://leafletjs.com/examples/layers-control/" target="_blank">example</a>) is replaced with the `L.icon` (<a href="https://leafletjs.com/reference.html#icon" target="_blank">docs</a>); another alternative to this is the `L.divIcon` (<a href="https://leafletjs.com/reference.html#divicon" target="_blank">docs</a>). [Read more Leaflet icons here](../?path=/docs/icons--docs).
+In this code example, the default Leaflet marker (<a href="https://leafletjs.com/examples/layers-control/" target="_blank">example</a>) is replaced with the `L.icon` (<a href="https://leafletjs.com/reference.html#icon" target="_blank">docs</a>); another alternative to this is the `L.divIcon` (<a href="https://leafletjs.com/reference.html#divicon" target="_blank">docs</a>). [Read more Leaflet icons here](./?path=/docs/leaflet-icons--docs).
 
 The primary code in regards to creating a Leaflet marker, is lines 50-59: