react-leaflet-deflate 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,6 +1,17 @@
 react-leaflet-deflate Changelog
 =========================
 
+
+## 3.1.0 (2025-12-05)
+
+* Add gh-pages docs
+* Update dependencies
+
+
+## 3.0.1 (2025-11-28)
+
+* NPM Audit Fix
+
 ## 3.0.0 (2025-11-07)
 
 * Update Leaflet.Deflate dependency to 2.1.0.

package/README.md

@@ -72,12 +72,12 @@ Option          | Type      | Default | Description
 `data`          | `object`     | `{}`    | Required. A valid [GeoJSON object](http://geojson.org/geojson-spec.html).
 `minSize`       | `int`     | `20`    | Defines the minimum width and height in pixels for a path to be displayed in its actual shape.
 `markerOptions` | `object` or `function`  | `{}`    | Optional. Customize the markers of deflated features using [Leaflet marker options](http://leafletjs.com/reference-1.3.0.html#marker).
-`markerCluster` | `boolean` | `false` | Indicates whether markers should be clustered. Requires `Leaflet.MarkerCluser`.
+`markerCluster` | `boolean` | `false` | Indicates whether markers should be clustered. Requires `Leaflet.markercluster`.
 `markerClusterOptions` | `object` | `{}`    | Optional. Customize the appearance and behaviour of clustered markers using [`Leaflet.markercluster` options](https://github.com/Leaflet/Leaflet.markercluster#options).
 `pointToLayer`  | `function`  | `{}`    | [Leaflet geojson pointToLayer options](http://leafletjs.com/reference-1.3.0.html#geojson-pointtolayer).
-`style`         | `function`  | `{}`    | Style to apply to polygons or lines. [Leaflet geojson style options](http://leafletjs.com/reference-1.3.0.html#geojson-style).
-`onEachFeature` | `function`  | `{}`    | Function to execute on each geojson feature. [Leaflet geojson onEachFeature options](http://leafletjs.com/reference-1.3.0.html#geojson-oneachfeature).
-`filter`        | `function`  | `{}`    | Filter function to apply to geojson features. [Leaflet geojson filter options](http://leafletjs.com/reference-1.3.0.html#geojson-filter).
+`style`         | `function`  | `{}`    | Style to apply to polygons or lines. [Leaflet geojson style options](https://leafletjs.com/reference.html#geojson-style).
+`onEachFeature` | `function`  | `{}`    | Function to execute on each geojson feature. [Leaflet geojson onEachFeature options](https://leafletjs.com/reference.html#geojson-oneachfeature).
+`filter`        | `function`  | `{}`    | Filter function to apply to geojson features. [Leaflet geojson filter options](https://leafletjs.com/reference.html#geojson-filter).
 
 
 # Credits

package/dist/react-leaflet-deflate.min.js.LICENSE.txt

@@ -1,9 +1,9 @@
-/**
- * @license React
- * react-dom.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+/**
+ * @license React
+ * react-dom.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/docs/App.jsx

@@ -0,0 +1,299 @@
+
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+import { MapContainer, TileLayer } from 'react-leaflet';
+import Deflate from 'react-leaflet-deflate';
+
+function App() {
+	const [mapOptions] = React.useState({
+		center: [2.935403, 101.448205],
+		zoom: 10,
+		minZoom: 1,
+		maxZoom: 22
+	});
+
+	const [markerCluster, setMarkerCluster] = React.useState(true);
+	const [dataSet, setDataSet] = React.useState(1);
+	const [minSize, setMinSize] = React.useState(null);
+
+	const onChangeMarkerCluster = (e) => setMarkerCluster(e.target.checked);
+	const onChangeDataSet = (e) => setDataSet(e.target.value);
+
+	const onChangeMinSize = (e) => {
+		const minSizeInput = e.target.value;
+		let minSizeFloat = parseFloat(minSizeInput);
+		if(isNaN(minSizeFloat) || minSizeFloat <= 1.0) {
+			minSizeFloat = null;
+		}
+		setMinSize(minSizeFloat);
+	}
+
+	const onEachFeature = (feature, featureLayer) => {
+		featureLayer.bindPopup(`<div>This is feature #${feature.properties.id}</div>`);
+		featureLayer.bindTooltip(`Feature: #${feature.properties.id}`);
+	};
+
+	const resetOptions = () => {
+		setMarkerCluster(true);
+		setDataSet(1);
+		setMinSize(null);
+	};
+
+	const deflateOptions = {
+		minSize: minSize || 20,
+		markerCluster: markerCluster,
+		data: dataSet == 1 ? sample1 : sample2,
+		onEachFeature: onEachFeature
+	};
+
+	return (
+		<div>
+			<div className="row d-flex">
+				<div className="col-md-8 align-self-stretch">
+				<div className="card" style={{ height: '500px' }}>
+					<div className="card-body">
+					<MapContainer {...mapOptions} className="h-100">
+						<TileLayer
+						attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+						url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+						/>
+						<Deflate {...deflateOptions} />
+					</MapContainer>
+					</div>
+				</div>
+				</div>
+				<div className="col-md-4">
+				<div className="card" style={{ height: '500px' }} >
+					<div className="card-body">
+					<div className="row">
+						<div className="col-sm-6">
+						<h6 className="mt-1"><i className="fas fa-cogs" /> Options</h6>
+						</div>
+						<div className="col-sm-6 text-right">
+						<button type="button" className="btn btn-sm btn-outline-info" onClick={resetOptions}>
+							<i className="fas fa-undo-alt" /> Reset
+						</button>
+						</div>
+					</div>
+					<hr/>
+					<form>
+						<div className="form-group row">
+						<label htmlFor="cluster" className="col-sm-6 col-form-label">Enable marker clustering:</label>
+						<div className="col-sm-6">
+							<input
+								className="form-control"
+								id="cluster"
+								name="cluster"
+								type="checkbox"
+								checked={markerCluster}
+								onChange={onChangeMarkerCluster}
+							/>
+						</div>
+						</div>
+						<div className="form-group row">
+						<label htmlFor="minSize" className="col-sm-6 col-form-label">Min. Size:</label>
+						<div className="col-sm-6">
+							<input
+								className="form-control"
+								id="minSize"
+								name="minSize"
+								type="number"
+								value={minSize}
+								onChange={onChangeMinSize}
+							/>
+						</div>
+						</div>
+						<div className="form-group row">
+						<label htmlFor="geojson" className="col-sm-6 col-form-label">GeoJSON data set:</label>
+						<div className="col-sm-6">
+							<select className="form-control" id="geojson" name="geojson" value={dataSet} onChange={onChangeDataSet}>
+								<option value="1">Data set 1</option>
+								<option value="2">Data set 2</option>
+							</select>
+						</div>
+						</div>
+					</form>
+					</div>
+				</div>
+				</div>
+			</div>
+			<div className="row">
+				<div className="col-md-12 mt-4">
+				<div className="card">
+					<div className="card-body">
+					<h4>Installation</h4>
+					<hr />
+					<h5>Install via NPM</h5>
+						<div className="card bg-dark text-white">
+							<div className="card-body">
+							<code className="text-white">
+								npm install react-leaflet-deflate --save
+							</code>
+							</div>
+						</div>
+					</div>
+				</div>
+				</div>
+			</div>
+			<div className="row">
+				<div className="col-md-12 mt-4">
+				<div className="card">
+					<div className="card-body">
+					<h4>Usage</h4>
+					<hr />
+
+					<h5>Example</h5>
+					<div className="card bg-dark text-white">
+						<div className="card-body">
+							<pre><code className="text-white">
+								import &#123; MapContainer, TileLayer &#125; from 'react-leaflet';<br />
+								import Deflate from 'react-leaflet-deflate';<br />
+								<br />
+								const deflateOptions = &#123;<br />
+								&nbsp;&nbsp;&nbsp;&nbsp;minSize: 20,<br />
+								&nbsp;&nbsp;&nbsp;&nbsp;markerCluster: true,<br />
+								&nbsp;&nbsp;&nbsp;&nbsp;data: geojsonData<br />
+								&#125;;<br />
+								<br />
+								&lt;MapContainer center=&#123;[101.483459, 2.938926]&#125; zoom=&#123;12&#125;&gt;<br />
+								&nbsp;&nbsp;&nbsp;&nbsp;&lt;TileLayer<br />
+									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url=&quot;https://&#123;s&#125;.tile.openstreetmap.org/&#123;z&#125;/&#123;x&#125;/&#123;y&#125;.png&quot;<br/>
+									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
+								/&gt;
+								<br />
+								<br />
+
+								&nbsp;&nbsp;&nbsp;&nbsp;&lt;Deflate &#123;...deflateOptions&#125; /&gt;<br />
+								&lt;/MapContainer&gt;
+							</code></pre>
+						</div>
+					</div>
+
+					<h5 className="mt-4">react-leaflet v5</h5>
+					<iframe
+						style={{ height: '420px', width: '100%' }}
+						scrolling="no"
+						title="react-leaflet-deflate example for react-leaflet@5.x"
+						src="https://codepen.io/m_hasbie/embed/wBGampr/?height=265&theme-id=0&default-tab=html,result"
+						frameBorder="no"
+						allowTransparency="true"
+						allowFullScreen="true"
+					>
+						See the Pen <a href='https://codepen.io/m_hasbie/pen/wBGampr/'>react-leaflet-deflate example for react-leaflet@5.x</a> by M. Hasbie
+						(<a href='https://codepen.io/m_hasbie'>@m_hasbie</a>) on <a href='https://codepen.io'>CodePen</a>.
+					</iframe>
+
+					<h5 className="mt-4">react-leaflet v2</h5>
+					<iframe
+						style={{ height: '420px', width: '100%' }}
+						scrolling="no"
+						title="react-leaflet-deflate example for react-leaflet@2.x"
+						src="https://codepen.io/m_hasbie/embed/MqNPRy/?height=265&theme-id=0&default-tab=js,result"
+						frameBorder="no"
+						allowTransparency="true"
+						allowFullScreen="true"
+					>
+						See the Pen <a href='https://codepen.io/m_hasbie/pen/MqNPRy/'>react-leaflet-deflate example for react-leaflet@2.x</a> by M. Hasbie
+						(<a href='https://codepen.io/m_hasbie'>@m_hasbie</a>) on <a href='https://codepen.io'>CodePen</a>.
+					</iframe>
+
+					<h5 className="mt-4">react-leaflet v1</h5>
+					<iframe
+						style={{ height: '420px', width: '100%' }}
+						scrolling="no"
+						title="react-leaflet-deflate example for react-leaflet@1.9.1"
+						src="http://codepen.io/m_hasbie/embed/jvgeVR/?height=265&theme-id=0&default-tab=js,result"
+						frameBorder="no"
+						allowTransparency="true"
+						allowFullScreen="true"
+					>
+						See the Pen <a href='https://codepen.io/m_hasbie/pen/jvgeVR/'>react-leaflet-deflate example for react-leaflet@1.9.1</a> by M. Hasbie
+						(<a href='https://codepen.io/m_hasbie'>@m_hasbie</a>) on <a href='https://codepen.io'>CodePen</a>.
+					</iframe>
+					</div>
+				</div>
+				</div>
+			</div>
+			<div className="row">
+				<div className="col-md-12 mt-4">
+				<div className="card">
+					<div className="card-body">
+					<h4>Options</h4>
+					<hr />
+
+					<table className="table table-hover table-striped table-bordered">
+						<thead className="thead-dark">
+							<tr>
+								<th>Option</th>
+								<th>Type</th>
+								<th>Default</th>
+								<th>Description</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td className="text-nowrap"><code>data</code></td>
+								<td><code>data</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td>Required. A valid <a href="http://geojson.org/geojson-spec.html" rel="nofollow">GeoJSON object</a>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>minSize</code></td>
+								<td><code>int</code></td>
+								<td><code>20</code></td>
+								<td>Defines the minimum width and height in pixels for a path to be displayed in its actual shape.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>markerOptions</code></td>
+								<td><code>object</code> or <code>function</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td>Optional. Customize the markers of deflated features using <a href="http://leafletjs.com/reference-1.3.0.html#marker" rel="nofollow">Leaflet marker options</a>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>markerCluster</code></td>
+								<td><code>boolean</code></td>
+								<td><code>false</code></td>
+								<td>Indicates whether markers should be clustered. Requires <code>Leaflet.markercluster</code>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>markerClusterOptions</code></td>
+								<td><code>object</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td>Optional. Customize the appearance and behaviour of clustered markers using <a href="https://github.com/Leaflet/Leaflet.markercluster#options"><code>Leaflet.markercluster</code> options</a>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>pointToLayer</code></td>
+								<td><code>function</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td><a href="https://leafletjs.com/reference.html#geojson-pointtolayer" rel="nofollow">Leaflet geojson pointToLayer options</a>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>style</code></td>
+								<td><code>function</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td>Style to apply to polygons or lines. <a href="https://leafletjs.com/reference.html#geojson-style" rel="nofollow">Leaflet geojson style options</a>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>onEachFeature</code></td>
+								<td><code>function</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td>Function to execute on each geojson feature. <a href="https://leafletjs.com/reference.html#geojson-oneachfeature" rel="nofollow">Leaflet geojson onEachFeature options</a>.</td>
+							</tr>
+							<tr>
+								<td className="text-nowrap"><code>filter</code></td>
+								<td><code>function</code></td>
+								<td><code>&#123;&#125;</code></td>
+								<td>Filter function to apply to geojson features. <a href="https://leafletjs.com/reference.html#geojson-filter" rel="nofollow">Leaflet geojson filter options</a>.</td>
+							</tr>
+						</tbody>
+					</table>
+					</div>
+				</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+const root = ReactDOMClient.createRoot(document.getElementById('container'));
+root.render(<App />);

package/docs/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-slate

package/docs/css/business-frontpage.css

@@ -0,0 +1,8 @@
+/*!
+ * Start Bootstrap - Busines Frontpage (https://startbootstrap.com/template-overviews/business-frontpage)
+ * Copyright 2013-2019 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-frontpage/blob/master/LICENSE)
+ */
+body {
+  padding-top: 56px;
+}

package/docs/geojsonSamples.js

@@ -0,0 +1,149 @@
+
+var sample1 = {
+  "type": "FeatureCollection",
+  "features": [
+	{
+	  "type": "Feature",
+	  "properties": { id: 1 },
+	  "geometry": {
+		"type": "Polygon",
+		"coordinates": [[
+		  [101.448205, 2.935403],
+		  [101.452839, 2.935961],
+		  [101.450479, 2.932746],
+		  [101.448205, 2.935403]
+		  ]]
+		},
+	},
+	{
+	  "type": "Feature",
+	  "properties": { id: 2 },
+	  "geometry": {
+		"type": "Polygon",
+		"coordinates": [[
+		  [101.427943, 2.951690],
+		  [101.431891, 2.952804],
+		  [101.428801, 2.948518],
+		  [101.427943, 2.951690]
+		]]
+	  }
+	},
+	{
+	  "type": "Feature",
+	  "properties": { id: 3 },
+	  "geometry": {
+		"type": "Polygon",
+		"coordinates": [[
+		  [101.448765, 3.006379],
+		  [101.476918, 2.993179],
+		  [101.434346, 2.981693],
+		  [101.448765, 3.006379]
+		]]
+	  }
+    }
+  ]
+};
+
+var sample2 = {
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": { id: 1 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              101.43951416015625,
+              3.195363798329405
+            ],
+            [
+              101.41342163085938,
+              3.1693115059053554
+            ],
+            [
+              101.46217346191406,
+              3.160398728694278
+            ],
+            [
+              101.50062561035156,
+              3.2063329870791444
+            ],
+            [
+              101.43951416015625,
+              3.195363798329405
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { id: 2 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              101.54525756835938,
+              3.14325855753886
+            ],
+            [
+              101.55555725097656,
+              3.14325855753886
+            ],
+            [
+              101.55555725097656,
+              3.153542694120099
+            ],
+            [
+              101.54525756835938,
+              3.153542694120099
+            ],
+            [
+              101.54525756835938,
+              3.14325855753886
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { id: 3},
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          101.54525756835938,
+          2.9204112651768823
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": { id: 4 },
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            101.55693054199219,
+            2.9608700037783326
+          ],
+          [
+            101.63932800292969,
+            2.984184539248731
+          ],
+          [
+            101.64207458496094,
+            2.9210970187084637
+          ],
+          [
+            101.57546997070312,
+            2.938926463242253
+          ]
+        ]
+      }
+    }
+  ]
+}

package/docs/index.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="description" content="https://github.com/mhasbie/react-leaflet-deflate">
+		<meta name="author" content="M. Hasbie">
+		
+		<title>react-leaflet-deflate Demo Page</title>
+		
+		<script type="importmap">
+        {
+          "imports": {
+            "react": "https://esm.sh/react@19.2.3/",
+            "react-dom/client": "https://esm.sh/react-dom@19.2.3/client",
+            "react-leaflet": "https://esm.sh/react-leaflet@5.0.0/",
+            "@react-leaflet/core": "https://cdn.esm.sh/@react-leaflet/core",
+            "react-leaflet-deflate": "https://esm.sh/react-leaflet-deflate@3.0.1/",
+            "Leaflet.Deflate": "https://cdn.jsdelivr.net/npm/Leaflet.Deflate@2.1.0/dist/L.Deflate.min.js",
+            "leaflet.markercluster": "https://unpkg.com/leaflet.markercluster"
+          }
+        }
+  	    </script>
+
+		<!-- Bootstrap core CSS -->
+		<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+		<!-- Custom styles for this template -->
+		<link href="css/business-frontpage.css" rel="stylesheet">
+
+		<!-- Font Awesome -->
+		<!--<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
+		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+		
+		<!-- Dependencies css -->
+		<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" rel="stylesheet">
+		<link href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.min.css" rel="stylesheet">
+		<link href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.min.css" rel="stylesheet">
+		
+		<style>
+			.leaflet-container {
+				width: 100%;
+				height: 100%!important;
+			}
+		</style>
+	</head>
+	<body>
+		<!-- Navigation -->
+		<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+			<div class="container">
+				<a class="navbar-brand" href="#">react-leaflet-deflate</a>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse" id="navbarResponsive">
+					<ul class="navbar-nav ml-auto">
+						<li class="nav-item active">
+							<a class="nav-link" href="#">Home
+								<span class="sr-only">(current)</span>
+							</a>
+						</li>
+						<!--
+						<li class="nav-item">
+							<a class="nav-link" href="#">About</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Services</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Contact</a>
+						</li>
+						-->
+					</ul>
+				</div>
+			</div>
+		</nav>
+		
+		<!-- Header -->
+		<header class="bg-dark mb-4">
+			<div class="container h-100">
+				<div class="row h-100 align-items-center">
+					<div class="col-lg-12">
+						<h1 class="display-4 text-white mb-2">react-leaflet-deflate</h1>
+						<p class="lead mb-4 text-white-50">
+							React wrapper of <a href="https://github.com/oliverroick/Leaflet.Deflate">Leaflet.Deflate</a> for <a href="https://github.com/PaulLeCam/react-leaflet">react-leaflet</a>.
+							<br/>
+							Substitutes polygons and lines with markers when their screen size falls below a defined threshold.
+							<div class="btn-group">
+								<a class="btn btn-outline-light" href="https://github.com/mhasbie/react-leaflet-deflate" title="View on Github">
+									<i class="fab fa-github"></i> Github
+								</a>
+								<a class="btn btn-outline-light" href="https://www.npmjs.com/package/react-leaflet-deflate" title="View on npm">
+									<i class="fab fa-npm"></i> npm
+								</a>
+							</div>
+						</p>
+					</div>
+				</div>
+			</div>
+		</header>
+  
+  
+		<div class="container">
+			<div class="row">
+				<div class="col-md-12 mb-5">
+					<div id="container"></div>
+				</div>
+			</div>
+		</div>
+		<!-- /.container -->
+
+		<!-- Footer -->
+		<footer class="py-5 bg-dark">
+			<div class="container">
+				<p class="m-0 text-center text-white">&copy; M. Hasbie 2025</p>
+			</div>
+		</footer>
+
+		<!-- Bootstrap core JavaScript -->
+		<script src="vendor/jquery/jquery.min.js"></script>
+		<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+		
+		<!-- Dependencies JavaScript -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.28.4/babel.min.js"></script>
+
+		<!-- Sample Data -->
+		<script src="./geojsonSamples.js"></script>
+		
+		<!-- Main App -->
+		<script type="text/babel" src="App.jsx" data-type="module" ></script>
+	</body>
+</html>