update App.js

master
Your Name 2 years ago
parent 81802a964b
commit fd2833bd0d
  1. 5
      src/App.js
  2. 31
      src/components/LeafletMap/Grid.js
  3. 78
      src/components/LeafletMap/index.js
  4. 12
      src/components/LeafletMap/index.scss

@ -63,7 +63,6 @@ import PopupCard from "./components/PopupCard";
import OutlineInput from "./components/OutlineInput";
import CancleIcon from "./components/CancleIcon";
import ButtonNewDesign from "./components/ButtonNewDesign";
// import TimeLine from "./components/TimeLine";
import TimeLineComponent from "./components/TimeLineComponent";
import TitleSubtitle from "./components/TitleSubtitle";
@ -85,6 +84,7 @@ import CardDesign2 from "./components/CardDesign2";
import ButtonDivTag from "./components/ButtonDivTag";
import Button from "./components/Button";
import LeafLet from "./components/LeafLet";
import LeafletMap from "./components/LeafletMap";
import CssCountdown from "./components/CssCountdown";
// import Digikala from "./components/Digikala/ImageSlider";
@ -141,6 +141,7 @@ function App() {
{/* <CardDesign1 /> */}
{/* <CardDesign2 /> */}
{/* <LeafLet /> */}
<LeafletMap />
{/* *************************************************** mini components *************************************************** */}
{/* <Button /> */}
{/* <ButtonDesign /> */}
@ -171,7 +172,7 @@ function App() {
{/* <IndianaDragScroll /> */}
{/* <IconText /> */}
{/* <CustomToast /> */}
<CssCountdown />
{/* <CssCountdown /> */}
{/* <div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">

@ -0,0 +1,31 @@
import L from "leaflet";
import { GridLayer, withLeaflet } from "react-leaflet";
class Grid extends GridLayer {
createLeafletElement() {
const Grid = L.GridLayer.extend({
createTile: () => {
const tile = document.createElement("div");
tile.style.outline = "1px solid black";
return tile;
},
});
return new Grid({ tileSize: 100 });
}
componentDidMount() {
const { map } = this.props.leaflet;
if (this.props.showGrid) this.leafletElement.addTo(map);
}
updateLeafletElement(fromProps, toProps) {
const { map } = this.props.leaflet;
if (toProps.showGrid !== fromProps.showGrid) {
toProps.showGrid
? this.leafletElement.addTo(map)
: this.leafletElement.removeFrom(map);
}
}
}
export default withLeaflet(Grid);

@ -0,0 +1,78 @@
import React, { useState, useRef, useMemo } from "react";
import {
MapContainer,
TileLayer,
FeatureGroup,
Rectangle,
useMap,
LayerGroup,
ZoomControl,
ScaleControl,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
import { EditControl } from "react-leaflet-draw";
import "leaflet-draw";
import "./index.scss";
import grid from "../../assets/images/grid.png";
// import Grid from "./Grid";
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
];
const LeafletMap = () => {
const leafEl = useRef(null);
const onCreated = (e) => {
const drawnItems = leafEl.current._layers;
console.log({ drawnItems });
// if (Object.keys(drawnItems).length > 1) {
// Object.keys(drawnItems).forEach((layerid, index) => {
// if (index > 0) return;
// const layer = drawnItems[layerid];
// leafEl.current.removeLayer(layer);
// });
// console.log(drawnItems);
// }
};
return (
<MapContainer
center={[49.505, -2.09]}
zoom={24}
maxZoom={24}
maxNativeZoom={22}
style={{ height: "100vh" }}
zoomControl={false}
bounds={outerBounds}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
apikey="db5ae1f5778a448ca662554581f283c5"
maxZoom={24}
maxNativeZoom={22}
opacity={0.8}
/>
<TileLayer
url={grid}
apikey="db5ae1f5778a448ca662554581f283c5"
maxZoom={24}
maxNativeZoom={24}
opacity={0.5}
/>
<FeatureGroup ref={leafEl}>
<EditControl
position="topright"
onCreated={onCreated}
allowIntersection={false}
/>
</FeatureGroup>
<LayerGroup></LayerGroup>
<ScaleControl position="topleft" />
<ZoomControl position="topleft" />
</MapContainer>
);
};
export default LeafletMap;

@ -0,0 +1,12 @@
.leaflet-container {
width: 100%;
height: 100vh;
}
.leaflet-control-scale-line:not(:first-child) {
display: none !important;
}
.leaflet-tile {
border: 1px solid gray;
box-sizing: content-box;
}
Loading…
Cancel
Save