mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
cleanup
This commit is contained in:
Fedor Katurov
parent
8e0a4c6df6
commit
ba7a8f9d66
4 changed files with 4 additions and 256 deletions
|
|
@ -25,8 +25,6 @@ const Stickers: React.FC<IProps> = React.memo(
|
|||
return () => MainMap.stickerLayer.removeLayer(item);
|
||||
}, [MainMap]);
|
||||
|
||||
console.log(is_editing);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{layer &&
|
||||
|
|
|
|||
|
|
@ -285,9 +285,10 @@
|
|||
}
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.custom-marker-cluster {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
|
|||
|
|
@ -81,250 +81,8 @@ class ArrowsLayer extends LayerGroup {
|
|||
this.arrowLayer.addLayers(midpoints);
|
||||
};
|
||||
|
||||
// Tries to detect if marker changed for every marker starting from changed_at
|
||||
// setLatLngs = (route: LatLngLiteral[]): void => {
|
||||
// if (!this.map) return;
|
||||
|
||||
// // this.arrowLayer.clearLayers();
|
||||
|
||||
// if (route.length === 0) return;
|
||||
|
||||
// console.time('total');
|
||||
|
||||
// const changed_at = this.getChangeIndex(this.prevState.route, route);
|
||||
|
||||
// console.log('changed at:', changed_at);
|
||||
// console.log('recalc:', route.length - changed_at);
|
||||
|
||||
// const midpoints = this.prevState.midpoints.slice(0, changed_at - 1);
|
||||
// const markers = this.prevState.markers.slice(0, changed_at - 1);
|
||||
|
||||
// console.time('recalc');
|
||||
// for (let i = changed_at; i < route.length; i += 1) {
|
||||
// const point =
|
||||
// route[i + 1] && dist2(route[i], route[i + 1]) > 0.00005
|
||||
// ? {
|
||||
// latlng: middleCoord(route[i], route[i + 1]),
|
||||
// angle: angleBetweenPoints(
|
||||
// this.map.latLngToContainerPoint(route[i]),
|
||||
// this.map.latLngToContainerPoint(route[i + 1])
|
||||
// ),
|
||||
// }
|
||||
// : null;
|
||||
|
||||
// if (this.prevState.markers[i] && !point) {
|
||||
// // the marker is gone
|
||||
// this.arrowLayer.removeLayer(this.prevState.markers[i]);
|
||||
// markers.push(null);
|
||||
// }
|
||||
|
||||
// if (this.prevState.markers[i] && point) {
|
||||
// // marker changed / created
|
||||
// const is_same =
|
||||
// this.prevState.markers[i] &&
|
||||
// this.prevState.midpoints[i] &&
|
||||
// this.prevState.midpoints[i].latlng.lat === point.latlng.lat &&
|
||||
// this.prevState.midpoints[i].latlng.lng === point.latlng.lng;
|
||||
|
||||
// if (!is_same) {
|
||||
// console.log('not same');
|
||||
// this.prevState.markers[i].setLatLng(point.latlng);
|
||||
// this.prevState.markers[i].setIcon(createArrowIcon(point.angle));
|
||||
// }
|
||||
|
||||
// markers.push(this.prevState.markers[i]);
|
||||
// }
|
||||
|
||||
// if (!this.prevState.markers[i] && point) {
|
||||
// // new marker
|
||||
// const marker = createArrow(point.latlng, point.angle);
|
||||
// this.arrowLayer.addLayer(marker);
|
||||
// markers.push(marker);
|
||||
// }
|
||||
|
||||
// midpoints.push(point);
|
||||
// }
|
||||
// console.timeEnd('recalc');
|
||||
|
||||
// this.prevState = {
|
||||
// route,
|
||||
// markers,
|
||||
// midpoints,
|
||||
// };
|
||||
|
||||
// console.timeEnd('total');
|
||||
// };
|
||||
|
||||
// Only creates from changed item to the end. Buggy when trying to delete and add points in the middle
|
||||
// setLatLngs = (route: LatLngLiteral[]): void => {
|
||||
// if (!this.map) return;
|
||||
|
||||
// // this.arrowLayer.clearLayers();
|
||||
|
||||
// if (route.length === 0) return;
|
||||
|
||||
// console.time('total');
|
||||
|
||||
// const changed_at = this.getChangeIndex(this.prevState.route, route);
|
||||
|
||||
// console.log('changed at:', changed_at);
|
||||
// console.log('recalc:', route.length - changed_at);
|
||||
|
||||
// const midpoints = this.prevState.midpoints.slice(0, changed_at - 1);
|
||||
// const markers = this.prevState.markers.slice(0, changed_at - 1);
|
||||
|
||||
// console.time('recalc');
|
||||
// for (let i = changed_at; i < route.length; i += 1) {
|
||||
// const point =
|
||||
// route[i + 1] && dist2(route[i], route[i + 1]) > 0.00005
|
||||
// ? {
|
||||
// latlng: middleCoord(route[i], route[i + 1]),
|
||||
// angle: angleBetweenPoints(
|
||||
// this.map.latLngToContainerPoint(route[i]),
|
||||
// this.map.latLngToContainerPoint(route[i + 1])
|
||||
// ),
|
||||
// }
|
||||
// : null;
|
||||
|
||||
// const marker = point ? createArrow(point.latlng, point.angle) : null;
|
||||
|
||||
// midpoints.push(point);
|
||||
// markers.push(marker);
|
||||
// }
|
||||
// console.timeEnd('recalc');
|
||||
|
||||
// console.time('remove');
|
||||
// this.arrowLayer.removeLayers(
|
||||
// this.prevState.markers
|
||||
// .slice(changed_at - 1, this.prevState.markers.length - 1)
|
||||
// .filter(el => !!el)
|
||||
// );
|
||||
// console.timeEnd('remove');
|
||||
|
||||
// this.prevState = {
|
||||
// route,
|
||||
// markers,
|
||||
// midpoints,
|
||||
// };
|
||||
|
||||
// console.time('add');
|
||||
// this.arrowLayer.addLayers(markers.filter(el => !!el));
|
||||
// console.timeEnd('add');
|
||||
// console.timeEnd('total');
|
||||
// };
|
||||
|
||||
// TODO: iterate through all the route and detect if marker created, changed or deleted. Skip getting changed_at
|
||||
// TODO: try to figure why its not updated properly when you add / delete points in the middle
|
||||
|
||||
// setLatLngs = (route: LatLngLiteral[]): void => {
|
||||
// if (!this.map) return;
|
||||
// if (route.length === 0) return;
|
||||
|
||||
// const newState: IPrevState = {
|
||||
// route,
|
||||
// markers: [null],
|
||||
// };
|
||||
|
||||
// for (let i = 1; i < route.length; i += 1) {
|
||||
// const current = route[i];
|
||||
// const previous = route[i - 1];
|
||||
|
||||
// const is_new = !this.prevState.route[i];
|
||||
// const is_changed =
|
||||
// this.prevState.route[i] &&
|
||||
// (this.prevState.route[i].lat !== current.lat ||
|
||||
// this.prevState.route[i].lng !== current.lng ||
|
||||
// this.prevState.route[i - 1].lng !== previous.lng ||
|
||||
// this.prevState.route[i - 1].lng !== previous.lng);
|
||||
|
||||
// const need_to_add = dist2(route[i], route[i - 1]) > 0.00005;
|
||||
|
||||
// if (is_new) {
|
||||
// const marker = need_to_add
|
||||
// ? createArrow(
|
||||
// middleCoord(route[i], route[i - 1]),
|
||||
// angleBetweenPoints(
|
||||
// this.map.latLngToContainerPoint(route[i]),
|
||||
// this.map.latLngToContainerPoint(route[i - 1])
|
||||
// )
|
||||
// )
|
||||
// : null;
|
||||
|
||||
// console.log(i, marker ? 'new create' : 'new skip');
|
||||
|
||||
// if (marker) {
|
||||
// this.arrowLayer.addLayer(marker);
|
||||
// }
|
||||
|
||||
// newState.markers.push(marker);
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (is_changed) {
|
||||
// const middle = middleCoord(route[i], route[i - 1]);
|
||||
// const angle = angleBetweenPoints(
|
||||
// this.map.latLngToContainerPoint(route[i]),
|
||||
// this.map.latLngToContainerPoint(route[i - 1])
|
||||
// );
|
||||
|
||||
// if (need_to_add && this.prevState.markers[i]) {
|
||||
// console.log(i, 'change');
|
||||
|
||||
// this.prevState.markers[i].setLatLng(middle);
|
||||
// this.prevState.markers[i].setIcon(createArrowIcon(angle));
|
||||
// newState.markers.push(this.prevState.markers[i]);
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (need_to_add && !this.prevState.markers[i]) {
|
||||
// console.log(i, 'change create');
|
||||
|
||||
// const marker = createArrow(middle, angle);
|
||||
// this.arrowLayer.addLayer(marker);
|
||||
// newState.markers.push(marker);
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (!need_to_add && this.prevState.markers[i]) {
|
||||
// console.log(i, 'change remove');
|
||||
|
||||
// this.arrowLayer.removeLayer(this.prevState.markers[i]);
|
||||
// newState.markers.push(null);
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (!need_to_add && !this.prevState.markers[i]) {
|
||||
// console.log(i, 'change skip');
|
||||
// newState.markers.push(null);
|
||||
// continue;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (!is_new && !is_changed) {
|
||||
// console.log(i, 'not changed');
|
||||
|
||||
// newState.markers.push(this.prevState.markers[i]);
|
||||
// }
|
||||
// }
|
||||
|
||||
// console.log('------', newState.markers);
|
||||
|
||||
// if (newState.markers.length < this.prevState.markers.length) {
|
||||
// this.arrowLayer.removeLayers(
|
||||
// this.prevState.markers
|
||||
// .slice(
|
||||
// this.prevState.markers.length - newState.markers.length,
|
||||
// this.prevState.markers.length - 1
|
||||
// )
|
||||
// .filter(el => !!el)
|
||||
// );
|
||||
// }
|
||||
|
||||
// this.prevState = newState;
|
||||
// };
|
||||
|
||||
map: Map;
|
||||
arrowLayer: MarkerClusterGroup = new MarkerClusterGroup({
|
||||
arrowLayer = new MarkerClusterGroup({
|
||||
spiderfyOnMaxZoom: false,
|
||||
showCoverageOnHover: false,
|
||||
zoomToBoundsOnClick: false,
|
||||
|
|
@ -333,13 +91,6 @@ class ArrowsLayer extends LayerGroup {
|
|||
iconCreateFunction: arrowClusterIcon,
|
||||
});
|
||||
|
||||
// prevState: IPrevState = {
|
||||
// route: [],
|
||||
// markers: [],
|
||||
// midpoints: [],
|
||||
// // distances: [],
|
||||
// };
|
||||
|
||||
layers: Marker<any>[] = [];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ export const isMobile = (): boolean => window.innerWidth <= MOBILE_BREAKPOINT;
|
|||
|
||||
export const getLocation = (callback: (pos: LatLngLiteral) => void) => {
|
||||
window.navigator.geolocation.getCurrentPosition(position => {
|
||||
console.log('getting pos');
|
||||
|
||||
if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude)
|
||||
return callback(null);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue