muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

separated map and user reducers

Browse source
This commit is contained in:
Fedor Katurov 2019-12-30 21:01:01 +07:00
parent 9f8cb1a875
commit b75c028ce1
14 changed files with 849 additions and 768 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/components/UserLocation.tsx
View file

@ -1,78 +1,81 @@
import * as React from 'react';
import { marker } from 'leaflet';
import { DomMarker } from '$utils/DomMarker';
import { Icon } from '$components/panels/Icon';
import { editor } from '$modules/Editor';
// import { marker } from 'leaflet';
// import { DomMarker } from '$utils/DomMarker';
// import { Icon } from '$components/panels/Icon';
// import { editor } from '$modules/Editor';
interface Props {
}
export class UserLocation extends React.Component<Props, {}> {
constructor(props) {
super(props);
const element = document.createElement('div');
this.icon = new DomMarker({ element, className: 'location-marker' });
this.map = editor.map.map;
this.location = [];
}
icon;
mark = null;
map;
location;
componentDidMount() {
this.getUserLocation(this.updateLocationMark);
}
getUserLocation = callback => {
// todo: TO SAGAS
if (!window.navigator || !window.navigator.geolocation) return;
window.navigator.geolocation.getCurrentPosition(position => {
if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude) return;
const { latitude, longitude } = position.coords;
callback(latitude, longitude);
});
};
centerMapOnLocation = () => {
if (this.location && this.location.length === 2) {
this.panMapTo(this.location[0], this.location[1]);
} else {
this.getUserLocation(this.panMapTo);
}
this.getUserLocation(this.updateLocationMark);
};
panMapTo = (latitude, longitude) => {
if (!latitude || !longitude) return;
this.map.panTo([latitude, longitude]);
};
updateLocationMark = (latitude, longitude) => {
if (!latitude || !longitude) return;
if (this.mark) this.map.removeLayer(this.mark);
this.location = [latitude, longitude];
this.mark = marker(this.location, { icon: this.icon }).addTo(this.map);
};
render() {
return (
<div className="status-bar square pointer pointer">
<div onClick={this.centerMapOnLocation}>
<Icon icon="icon-locate" size={30} />
</div>
</div>
);
return null
}
// constructor(props) {
// super(props);
// const element = document.createElement('div');
// this.icon = new DomMarker({ element, className: 'location-marker' });
// // this.map = editor.map.map;
// this.location = [];
// }
// icon;
// mark = null;
// map;
// location;
// componentDidMount() {
// this.getUserLocation(this.updateLocationMark);
// }
// getUserLocation = callback => {
// // todo: TO SAGAS
// if (!window.navigator || !window.navigator.geolocation) return;
// window.navigator.geolocation.getCurrentPosition(position => {
// if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude) return;
// const { latitude, longitude } = position.coords;
// callback(latitude, longitude);
// });
// };
// centerMapOnLocation = () => {
// if (this.location && this.location.length === 2) {
// this.panMapTo(this.location[0], this.location[1]);
// } else {
// this.getUserLocation(this.panMapTo);
// }
// this.getUserLocation(this.updateLocationMark);
// };
// panMapTo = (latitude, longitude) => {
// if (!latitude || !longitude) return;
// this.map.panTo([latitude, longitude]);
// };
// updateLocationMark = (latitude, longitude) => {
// if (!latitude || !longitude) return;
// if (this.mark) this.map.removeLayer(this.mark);
// this.location = [latitude, longitude];
// this.mark = marker(this.location, { icon: this.icon }).addTo(this.map);
// };
// render() {
// return (
// <div className="status-bar square pointer pointer">
// <div onClick={this.centerMapOnLocation}>
// <Icon icon="icon-locate" size={30} />
// </div>
// </div>
// );
// }
}