mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
Arrows layer
This commit is contained in:
Fedor Katurov
parent
69d1d749cf
commit
de2b747a20
11 changed files with 57 additions and 58 deletions
|
|
@ -16,7 +16,7 @@ import { LogoPreview } from '~/components/logo/LogoPreview';
|
|||
import { IStickerPack } from '~/constants/stickers';
|
||||
import { IDialogs } from '~/constants/dialogs';
|
||||
|
||||
import { Map } from '~/containers/map/Map';
|
||||
import { Map } from '~/map/Map';
|
||||
import { IEditorState } from '~/redux/editor';
|
||||
import { IState } from '~/redux/store';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
import React, { FC, useEffect, useState } from 'react';
|
||||
import { KmMarksLayer } from '~/utils/marks';
|
||||
import { MainMap } from '~/constants/map';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
import pick from 'ramda/es/pick';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
map: pick(['route'], selectMap(state)),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {};
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const KmMarksUnconnected: FC<Props> = ({
|
||||
map: { route },
|
||||
}) => {
|
||||
const [layer, setLayer] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const layer = new KmMarksLayer([]);
|
||||
layer.addTo(MainMap);
|
||||
setLayer(layer);
|
||||
return () => MainMap.removeLayer(layer);
|
||||
}, [MainMap]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
layer.setLatLngs(route);
|
||||
}, [layer, route]);
|
||||
return null;
|
||||
};
|
||||
|
||||
const KmMarks = connect(mapStateToProps, mapDispatchToProps)(KmMarksUnconnected);
|
||||
|
||||
export { KmMarks };
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import { MainMap } from '~/constants/map';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { selectMapProvider, selectMapRoute, selectMapStickers } from '~/redux/map/selectors';
|
||||
import { connect } from 'react-redux';
|
||||
import * as MAP_ACTIONS from '~/redux/map/actions';
|
||||
|
||||
import { Route } from '~/containers/map/Route';
|
||||
import { Router } from '~/containers/map/Router';
|
||||
import { TileLayer } from '~/containers/map/TileLayer';
|
||||
import { Stickers } from '~/containers/map/Stickers';
|
||||
import { KmMarks } from '~/containers/map/KmMarks';
|
||||
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { selectEditorEditing, selectEditorMode } from '~/redux/editor/selectors';
|
||||
import { MODES } from '~/constants/modes';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
provider: selectMapProvider(state),
|
||||
route: selectMapRoute(state),
|
||||
stickers: selectMapStickers(state),
|
||||
editing: selectEditorEditing(state),
|
||||
mode: selectEditorMode(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
mapSetRoute: MAP_ACTIONS.mapSetRoute,
|
||||
mapDropSticker: MAP_ACTIONS.mapDropSticker,
|
||||
mapSetSticker: MAP_ACTIONS.mapSetSticker,
|
||||
mapClicked: MAP_ACTIONS.mapClicked,
|
||||
};
|
||||
|
||||
type IProps = React.HTMLAttributes<HTMLDivElement> &
|
||||
ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {};
|
||||
|
||||
const MapUnconnected: React.FC<IProps> = ({
|
||||
provider,
|
||||
stickers,
|
||||
editing,
|
||||
mode,
|
||||
|
||||
mapClicked,
|
||||
mapSetSticker,
|
||||
mapDropSticker,
|
||||
}) => {
|
||||
const onClick = React.useCallback(
|
||||
event => {
|
||||
if (!MainMap.clickable || mode === MODES.NONE) return;
|
||||
|
||||
mapClicked(event.latlng);
|
||||
},
|
||||
[mapClicked, mode]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
MainMap.addEventListener('click', onClick);
|
||||
|
||||
return () => {
|
||||
MainMap.removeEventListener('click', onClick);
|
||||
};
|
||||
}, [MainMap, onClick]);
|
||||
|
||||
return createPortal(
|
||||
<div>
|
||||
<TileLayer provider={provider} map={MainMap} />
|
||||
|
||||
<Stickers
|
||||
stickers={stickers}
|
||||
mapSetSticker={mapSetSticker}
|
||||
mapDropSticker={mapDropSticker}
|
||||
is_editing={editing}
|
||||
/>
|
||||
|
||||
<Route />
|
||||
|
||||
<Router />
|
||||
<KmMarks />
|
||||
</div>,
|
||||
document.getElementById('canvas')
|
||||
);
|
||||
};
|
||||
|
||||
const Map = connect(mapStateToProps, mapDispatchToProps)(MapUnconnected);
|
||||
export { Map };
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
import React, { FC, useEffect, memo, useState, useCallback } from 'react';
|
||||
import { IMapRoute } from '../../../redux/map/types';
|
||||
import { InteractivePoly } from '~/utils/map/InteractivePoly';
|
||||
import { isMobile } from '~/utils/window';
|
||||
import { LatLng, Map, LeafletEvent } from 'leaflet';
|
||||
import { selectEditor } from '~/redux/editor/selectors';
|
||||
import pick from 'ramda/es/pick';
|
||||
import * as MAP_ACTIONS from '~/redux/map/actions';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
import { MainMap } from '~/constants/map';
|
||||
import { MODES } from '~/constants/modes';
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
editor: pick(['mode', 'editing'], selectEditor(state)),
|
||||
map: pick(['route'], selectMap(state)),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
mapSetRoute: MAP_ACTIONS.mapSetRoute,
|
||||
editorSetDistance: EDITOR_ACTIONS.editorSetDistance,
|
||||
editorSetMarkersShown: EDITOR_ACTIONS.editorSetMarkersShown,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const RouteUnconnected: FC<Props> = memo(
|
||||
({
|
||||
map: { route },
|
||||
editor: { editing, mode },
|
||||
mapSetRoute,
|
||||
editorSetDistance,
|
||||
editorSetMarkersShown,
|
||||
}) => {
|
||||
const [layer, setLayer] = useState<InteractivePoly>(null);
|
||||
|
||||
const onDistanceChange = useCallback(({ distance }) => editorSetDistance(distance), [
|
||||
editorSetDistance,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!MainMap) return;
|
||||
|
||||
const interactive = new InteractivePoly([], {
|
||||
color: 'url(#activePathGradient)',
|
||||
weight: 6,
|
||||
maxMarkers: isMobile() ? 50 : 150,
|
||||
smoothFactor: 3,
|
||||
})
|
||||
.addTo(MainMap.routeLayer)
|
||||
.on('distancechange', onDistanceChange)
|
||||
.on('vertexdragstart', MainMap.disableClicks)
|
||||
.on('vertexdragend', MainMap.enableClicks)
|
||||
.on('vertexaddstart', MainMap.disableClicks)
|
||||
.on('vertexaddend', MainMap.enableClicks)
|
||||
.on('allvertexhide', () => editorSetMarkersShown(false))
|
||||
.on('allvertexshow', () => editorSetMarkersShown(true));
|
||||
|
||||
setLayer(interactive);
|
||||
|
||||
return () => {
|
||||
MainMap.routeLayer.removeLayer(interactive);
|
||||
};
|
||||
}, [MainMap, onDistanceChange]);
|
||||
|
||||
const onRouteChanged = useCallback(
|
||||
({ latlngs }) => {
|
||||
mapSetRoute(latlngs);
|
||||
},
|
||||
[mapSetRoute]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
layer.on('latlngschange', onRouteChanged);
|
||||
|
||||
return () => layer.off('latlngschange', onRouteChanged);
|
||||
}, [layer, onRouteChanged]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
const points = (route && route.length > 0 && route) || [];
|
||||
|
||||
layer.setPoints(points as LatLng[]);
|
||||
}, [route, layer]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
if (editing) {
|
||||
layer.editor.enable();
|
||||
} else {
|
||||
layer.editor.disable();
|
||||
}
|
||||
}, [editing, layer]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
if (mode === MODES.POLY && !layer.is_drawing) {
|
||||
layer.editor.continue();
|
||||
}
|
||||
|
||||
if (mode !== MODES.POLY && layer.is_drawing) {
|
||||
layer.editor.stop();
|
||||
}
|
||||
}, [mode, layer]);
|
||||
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
const Route = connect(mapStateToProps, mapDispatchToProps)(RouteUnconnected);
|
||||
|
||||
export { Route };
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { FC, useEffect, useCallback, memo } from 'react';
|
||||
import pick from 'ramda/es/pick';
|
||||
import { OsrmRouter } from '~/utils/map/OsrmRouter';
|
||||
import { connect } from 'react-redux';
|
||||
import { selectMap } from '~/redux/map/selectors';
|
||||
import { selectEditorRouter, selectEditorMode } from '~/redux/editor/selectors';
|
||||
import { MainMap } from '~/constants/map';
|
||||
import * as EDITOR_ACTIONS from '~/redux/editor/actions';
|
||||
import { MODES } from '~/constants/modes';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
map: pick(['route'], selectMap(state)),
|
||||
router: pick(['waypoints', 'points'], selectEditorRouter(state)),
|
||||
mode: selectEditorMode(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
editorSetRouter: EDITOR_ACTIONS.editorSetRouter,
|
||||
};
|
||||
|
||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
|
||||
const RouterUnconnected: FC<Props> = memo(
|
||||
({ map: { route }, mode, router: { waypoints }, editorSetRouter }) => {
|
||||
const updateWaypoints = useCallback(
|
||||
({ waypoints }) => editorSetRouter({ waypoints: waypoints.filter(wp => !!wp.latLng) }),
|
||||
[editorSetRouter]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
OsrmRouter.on('waypointschanged', updateWaypoints).addTo(MainMap);
|
||||
|
||||
return () => {
|
||||
OsrmRouter.off('waypointschanged', updateWaypoints).setWaypoints([]);
|
||||
};
|
||||
}, [MainMap, updateWaypoints, mode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode !== MODES.ROUTER) return;
|
||||
|
||||
const wp = OsrmRouter.getWaypoints()
|
||||
.filter(point => point.latLng)
|
||||
.map(point => point.latLng);
|
||||
|
||||
if (
|
||||
!route.length ||
|
||||
!wp.length ||
|
||||
(route[route.length - 1].lat === wp[0].lat && route[route.length - 1].lng === wp[0].lng)
|
||||
)
|
||||
return;
|
||||
|
||||
OsrmRouter.setWaypoints([route[route.length - 1], ...wp]);
|
||||
}, [route, mode, waypoints]);
|
||||
|
||||
return null;
|
||||
}
|
||||
);
|
||||
|
||||
const Router = connect(mapStateToProps, mapDispatchToProps)(RouterUnconnected);
|
||||
|
||||
export { Router };
|
||||
|
|
@ -1,218 +0,0 @@
|
|||
import React, { useEffect, useCallback, useRef } from 'react';
|
||||
import { marker, Marker } from 'leaflet';
|
||||
import { IStickerDump } from '~/redux/map/types';
|
||||
import { STICKERS } from '~/constants/stickers';
|
||||
import { StickerDesc } from '~/components/StickerDesc';
|
||||
import classNames from 'classnames';
|
||||
import { DomMarker } from '~/utils/map/DomMarker';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { MapContainer, MainMap } from '~/constants/map';
|
||||
|
||||
interface IProps {
|
||||
sticker: IStickerDump;
|
||||
onDragStart?: () => void;
|
||||
index: number;
|
||||
is_editing: boolean;
|
||||
|
||||
mapSetSticker: (index: number, sticker: IStickerDump) => void;
|
||||
mapDropSticker: (index: number) => void;
|
||||
}
|
||||
|
||||
export const getLabelDirection = (angle: number): 'left' | 'right' =>
|
||||
angle % Math.PI >= -(Math.PI / 2) && angle % Math.PI <= Math.PI / 2 ? 'left' : 'right';
|
||||
|
||||
const getX = e =>
|
||||
e.touches && e.touches.length > 0
|
||||
? { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY }
|
||||
: { pageX: e.pageX, pageY: e.pageY };
|
||||
|
||||
const Sticker: React.FC<IProps> = ({
|
||||
sticker,
|
||||
index,
|
||||
mapSetSticker,
|
||||
mapDropSticker,
|
||||
is_editing,
|
||||
}) => {
|
||||
const [layer, setLayer] = React.useState<Marker>(null);
|
||||
const [dragging, setDragging] = React.useState(false);
|
||||
let angle = useRef(sticker.angle);
|
||||
|
||||
const element = React.useMemo(() => document.createElement('div'), []);
|
||||
const stickerArrow = React.useRef(null);
|
||||
const stickerImage = React.useRef(null);
|
||||
|
||||
const onChange = React.useCallback(state => mapSetSticker(index, state), [mapSetSticker, index]);
|
||||
const onDelete = React.useCallback(state => mapDropSticker(index), [mapSetSticker, index]);
|
||||
|
||||
const updateAngle = useCallback(ang => {
|
||||
if (!stickerImage.current || !stickerArrow.current) return;
|
||||
|
||||
const x = Math.cos(ang + Math.PI) * 56 - 30;
|
||||
const y = Math.sin(ang + Math.PI) * 56 - 30;
|
||||
|
||||
stickerImage.current.style.left = String(6 + x);
|
||||
stickerImage.current.style.top = String(6 + y);
|
||||
|
||||
stickerArrow.current.style.transform = `rotate(${ang + Math.PI}rad)`;
|
||||
}, [stickerArrow, stickerImage, angle]);
|
||||
|
||||
const onDragStart = React.useCallback(() => {
|
||||
layer.dragging.disable();
|
||||
MainMap.dragging.disable();
|
||||
MainMap.disableClicks();
|
||||
|
||||
setDragging(true);
|
||||
}, [setDragging, layer, MainMap]);
|
||||
|
||||
const onDragStop = React.useCallback(
|
||||
event => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
if (!layer) return;
|
||||
|
||||
setDragging(false);
|
||||
onChange({
|
||||
...sticker,
|
||||
angle: angle.current,
|
||||
});
|
||||
|
||||
layer.dragging.enable();
|
||||
MainMap.dragging.enable();
|
||||
|
||||
setTimeout(MainMap.enableClicks, 100);
|
||||
},
|
||||
[setDragging, layer, MainMap, sticker, angle]
|
||||
);
|
||||
|
||||
const onMoveStarted = React.useCallback(() => {
|
||||
MainMap.disableClicks();
|
||||
}, [onChange, sticker, MainMap]);
|
||||
|
||||
const onMoveFinished = React.useCallback(
|
||||
event => {
|
||||
const target = event.target as Marker;
|
||||
|
||||
onChange({
|
||||
...sticker,
|
||||
latlng: target.getLatLng(),
|
||||
});
|
||||
|
||||
MainMap.enableClicks();
|
||||
},
|
||||
[onChange, sticker, MainMap]
|
||||
);
|
||||
|
||||
const onDrag = React.useCallback(
|
||||
event => {
|
||||
if (!element) return;
|
||||
|
||||
const { x, y } = element.getBoundingClientRect() as DOMRect;
|
||||
const { pageX, pageY } = getX(event);
|
||||
angle.current = parseFloat(Math.atan2(y - pageY, x - pageX).toFixed(2));
|
||||
updateAngle(angle.current);
|
||||
},
|
||||
[element, updateAngle, angle]
|
||||
);
|
||||
|
||||
const onTextChange = React.useCallback(
|
||||
text =>
|
||||
onChange({
|
||||
...sticker,
|
||||
text,
|
||||
}),
|
||||
[sticker, onChange]
|
||||
);
|
||||
|
||||
const direction = React.useMemo(() => getLabelDirection(sticker.angle), [sticker.angle]);
|
||||
|
||||
useEffect(() => {
|
||||
updateAngle(sticker.angle);
|
||||
angle.current = sticker.angle;
|
||||
}, [sticker.angle])
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
layer.setLatLng(sticker.latlng)
|
||||
}, [layer, sticker.latlng])
|
||||
|
||||
// Attaches onMoveFinished event to item
|
||||
React.useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
layer.addEventListener('dragstart', onMoveStarted);
|
||||
layer.addEventListener('dragend', onMoveFinished);
|
||||
|
||||
return () => {
|
||||
layer.removeEventListener('dragstart', onMoveStarted);
|
||||
layer.removeEventListener('dragend', onMoveFinished);
|
||||
};
|
||||
}, [layer, onMoveFinished, onMoveStarted]);
|
||||
|
||||
// Attaches and detaches handlers when user starts dragging
|
||||
React.useEffect(() => {
|
||||
if (dragging) {
|
||||
document.addEventListener('mousemove', onDrag);
|
||||
document.addEventListener('mouseup', onDragStop);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', onDrag);
|
||||
document.removeEventListener('mouseup', onDragStop);
|
||||
};
|
||||
}, [dragging, onDrag]);
|
||||
|
||||
// Initial leaflet marker creation, when element (dom element div) is ready
|
||||
React.useEffect(() => {
|
||||
const icon = new DomMarker({
|
||||
element,
|
||||
className: 'sticker-container',
|
||||
});
|
||||
|
||||
const item = marker(sticker.latlng, { icon, draggable: true });
|
||||
|
||||
setLayer(item);
|
||||
|
||||
return () => {
|
||||
item.remove();
|
||||
};
|
||||
}, [element]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!layer) return;
|
||||
|
||||
layer.addTo(MainMap.stickerLayer);
|
||||
|
||||
return () => MainMap.stickerLayer.removeLayer(layer);
|
||||
}, [layer]);
|
||||
|
||||
React.useEffect(() => {
|
||||
element.className = is_editing ? 'sticker-container' : 'sticker-container inactive';
|
||||
}, [element, is_editing]);
|
||||
|
||||
return createPortal(
|
||||
<React.Fragment>
|
||||
<div className="sticker-arrow" ref={stickerArrow} />
|
||||
<div className={classNames(`sticker-label ${direction}`)} ref={stickerImage}>
|
||||
<StickerDesc value={sticker.text} onChange={onTextChange} />
|
||||
|
||||
<div
|
||||
className="sticker-image"
|
||||
style={{
|
||||
backgroundImage: `url('${STICKERS[sticker.set].url}`,
|
||||
backgroundPosition: `${-STICKERS[sticker.set].layers[sticker.sticker].off * 72} 50%`,
|
||||
}}
|
||||
onMouseDown={onDragStart}
|
||||
onMouseUp={onDragStop}
|
||||
onTouchStart={onDragStart}
|
||||
onTouchEnd={onDragStop}
|
||||
/>
|
||||
|
||||
<div className="sticker-delete" onMouseDown={onDelete} onTouchStart={onDelete} />
|
||||
</div>
|
||||
</React.Fragment>,
|
||||
element
|
||||
);
|
||||
};
|
||||
|
||||
export { Sticker };
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import React from 'react';
|
||||
import { IStickerDump } from '~/redux/map/types';
|
||||
import { FeatureGroup, Map } from 'leaflet';
|
||||
import { Sticker } from '~/containers/map/Sticker';
|
||||
import { mapSetSticker, mapDropSticker } from '~/redux/map/actions';
|
||||
import { MapContainer, MainMap } from '~/constants/map';
|
||||
|
||||
interface IProps {
|
||||
stickers: IStickerDump[];
|
||||
is_editing: boolean;
|
||||
mapSetSticker: typeof mapSetSticker;
|
||||
mapDropSticker: typeof mapDropSticker;
|
||||
}
|
||||
|
||||
const Stickers: React.FC<IProps> = React.memo(
|
||||
({ stickers, is_editing, mapSetSticker, mapDropSticker }) => {
|
||||
const [layer, setLayer] = React.useState<FeatureGroup>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!MainMap) return;
|
||||
|
||||
const item = new FeatureGroup().addTo(MainMap.stickerLayer);
|
||||
setLayer(item);
|
||||
|
||||
return () => MainMap.stickerLayer.removeLayer(item);
|
||||
}, [MainMap]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{layer &&
|
||||
stickers.map((sticker, index) => (
|
||||
<Sticker
|
||||
sticker={sticker}
|
||||
key={`${sticker.set}.${sticker.sticker}.${index}`}
|
||||
index={index}
|
||||
is_editing={is_editing}
|
||||
mapSetSticker={mapSetSticker}
|
||||
mapDropSticker={mapDropSticker}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
// return null;
|
||||
}
|
||||
);
|
||||
|
||||
export { Stickers };
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import React from "react";
|
||||
import { TileContext } from "../../../utils/context";
|
||||
import { TileLayer as TileLayerInterface, tileLayer, Map } from "leaflet";
|
||||
import { DEFAULT_PROVIDER, PROVIDERS } from "~/constants/providers";
|
||||
import { IMapReducer } from "~/redux/map";
|
||||
|
||||
type IProps = React.HTMLAttributes<HTMLDivElement> & {
|
||||
provider: IMapReducer['provider'],
|
||||
map: Map,
|
||||
};
|
||||
|
||||
const TileLayer: React.FC<IProps> = React.memo(({ children, provider, map }) => {
|
||||
const [layer, setLayer] = React.useState<TileLayerInterface>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
setLayer(
|
||||
tileLayer(PROVIDERS[DEFAULT_PROVIDER].url, {
|
||||
attribution: "Независимое Велосообщество",
|
||||
maxNativeZoom: 18,
|
||||
maxZoom: 18
|
||||
}).addTo(map)
|
||||
);
|
||||
}, [map]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!layer || !provider) return;
|
||||
|
||||
const { url } =
|
||||
(provider && PROVIDERS[provider] && PROVIDERS[provider]) ||
|
||||
PROVIDERS[DEFAULT_PROVIDER];
|
||||
|
||||
layer.setUrl(url);
|
||||
}, [layer, provider]);
|
||||
|
||||
return <TileContext.Provider value={layer}>{children}</TileContext.Provider>;
|
||||
});
|
||||
|
||||
export { TileLayer };
|
||||
Loading…
Add table
Add a link
Reference in a new issue