update public/index.html, App.js and src/components/TestComponentNew/index.js

master
mahdi andalib 2 years ago
parent 6729cc76a6
commit 9a8ead8238
  1. 14
      public/index.html
  2. 3
      src/App.js
  3. 95
      src/components/LeafLet/index.js
  4. BIN
      src/components/LeafLet/placeholder.png
  5. 2
      src/components/TestComponentNew/index.js

@ -16,6 +16,20 @@
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.css"
integrity="sha512-vJfMKRRm4c4UupyPwGUZI8U651mSzbmmPgR3sdE3LcwBPsdGeARvUM5EcSTg34DK8YIRiIo+oJwNfZPMKEQyug=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a

@ -84,6 +84,7 @@ import IconText from "./components/IconText";
import CardDesign2 from "./components/CardDesign2";
import ButtonDivTag from "./components/ButtonDivTag";
import Button from "./components/Button";
import LeafLet from "./components/LeafLet";
// import Digikala from "./components/Digikala/ImageSlider";
@ -138,6 +139,8 @@ function App() {
{/* <DistributedData /> */}
{/* <CardDesign1 /> */}
{/* <CardDesign2 /> */}
<LeafLet />
{/* *************************************************** mini components *************************************************** */}
{/* <Button /> */}
{/* <ButtonDesign /> */}

@ -0,0 +1,95 @@
import React, { useState } from "react";
import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";
import { EditControl } from "leaflet-draw";
// import osm from "./osm-providers";
import { useRef } from "react";
const LeafLet = () => {
const [center, setCenter] = useState({ lat: 24.4539, lng: 54.3773 });
const [mapLayers, setMapLayers] = useState([]);
const ZOOM_LEVEL = 12;
const mapRef = useRef();
const _onCreate = (e) => {
console.log(e);
const { layerType, layer } = e;
if (layerType === "polygon") {
const { _leaflet_id } = layer;
setMapLayers((layers) => [
...layers,
{ id: _leaflet_id, latlngs: layer.getLatLngs()[0] },
]);
}
};
const _onEdited = (e) => {
console.log(e);
const {
layers: { _layers },
} = e;
Object.values(_layers).map(({ _leaflet_id, editing }) => {
setMapLayers((layers) =>
layers.map((l) =>
l.id === _leaflet_id
? { ...l, latlngs: { ...editing.latlngs[0] } }
: l
)
);
});
};
const _onDeleted = (e) => {
console.log(e);
const {
layers: { _layers },
} = e;
Object.values(_layers).map(({ _leaflet_id }) => {
setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id));
});
};
return (
<>
{" "}
<div className="row">
<div className="col text-center">
<h2>React-leaflet - Create, edit and delete polygon on map</h2>
<div className="col">
<MapContainer center={center} zoom={ZOOM_LEVEL} ref={mapRef}>
<FeatureGroup>
<EditControl
position="topright"
onCreated={_onCreate}
onEdited={_onEdited}
onDeleted={_onDeleted}
draw={{
rectangle: false,
polyline: false,
circle: false,
circlemarker: false,
marker: false,
}}
/>
</FeatureGroup>
<TileLayer
attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
<pre className="text-left">{JSON.stringify(mapLayers, 0, 2)}</pre>
</div>
</div>
</div>
</>
);
};
export default LeafLet;

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@ -23,7 +23,7 @@ function TestComponentNew({}) {
zoom={20}
style={{ width: "100%", height: "100vh" }}
>
<EditControl />
{/* <EditControl /> */}
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

Loading…
Cancel
Save