Revize 4b02827c

LeafletExample.tsx

map_frameworks/package.json

@@ -9 +9 @@
     "@types/": "urbica/react-map-gl",
     "@types/dotenv": "^8.2.0",
     "@types/jest": "^27.0.1",
+    "@types/leaflet": "^1.7.9",
     "@types/mapbox-gl": "^2.6.2",
     "@types/node": "^16.7.13",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
+    "@types/react-leaflet": "^2.8.2",
     "@urbica/react-map-gl": "^1.14.4",
+    "leaflet": "^1.7.1",
     "mapbox-gl": "^2.7.0",
     "pigeon-maps": "^0.20.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-leaflet": "^3.2.5",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "typescript": "^4.4.2",

map_frameworks/public/index.html

@@ -16 +16 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+          crossorigin=""/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

map_frameworks/src/App.tsx

@@ -2 +2 @@
 import './App.css'
 import MapBoxExample from './component/MapBoxExample'
 import PigeonMapsExample from './component/PigeonMapsExample'
+import LeafletExample from './component/LeafletExample'
 
 const App = () => (
     <div className="App">
         <MapBoxExample/>
         <PigeonMapsExample/>
+        <LeafletExample />
     </div>
 )
 

map_frameworks/src/component/LeafletExample.tsx

@@ +1 @@
+// Wrapper around leaflet -> https://react-leaflet.js.org/docs/start-setup/
+import { MapContainer, Marker, Popup, SVGOverlay, TileLayer } from 'react-leaflet'
+import MapBoxExample from './MapBoxExample'
+
+const LeafletExample = () => {
+
+    return (
+        <>
+            <h1>Leaflet Example</h1>
+            <MapContainer style={ { height: 450 } } center={ [51.505, -0.09] } zoom={ 13 }>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <Marker position={ [51.505, -0.09] }>
+                    <Popup>
+                        <MapBoxExample />
+                    </Popup>
+                </Marker>
+            </MapContainer>
+        </>
+    )
+}
+
+export default LeafletExample