center on user location

src/components/UserLocation.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import L, { marker } from 'leaflet';
+import { DomMarker } from '$utils/DomMarker';
+
+export class UserLocation extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const element = document.createElement('div');
+
+    this.icon = new DomMarker({
+      element,
+      className: 'location-marker',
+    });
+
+    this.mark = null;
+    this.map = props.editor.map.map;
+    this.location = [];
+    // this.mark.addTo(props.editor.map.map);
+  }
+
+  componentDidMount() {
+    this.getUserLocation(this.updateLocationMark);
+  }
+
+  getUserLocation = callback => {
+    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 {
+      console.log('hoho');
+      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="locate-geo-button" onClick={this.centerMapOnLocation} />
+    )
+  }
+}

src/containers/App.jsx

@@ -4,6 +4,8 @@ import { Editor } from '$modules/Editor';
 import { EditorPanel } from '$components/panels/EditorPanel';
 import { Fills } from '$components/Fills';
 import { DEFAULT_LOGO } from '$constants/logos';
+import { getUserLocation } from '$utils/geolocation';
+import { UserLocation } from '$components/UserLocation';
 
 export class App extends React.Component {
   state = {
@@ -36,6 +38,20 @@ export class App extends React.Component {
   setLogo = logo => {
     this.setState({ logo });
   };
+  //
+  // locateByGeo = () => {
+  //   getUserLocation(this.setMapCenterByGeo);
+  // };
+  //
+  // setMapCenterByGeo = position => {
+  //   if (!position || !position.coords || !position.coords.latitude || !position.coords.longitude) return;
+  //
+  //   const { latitude, longitude } = position.coords;
+  //
+  //   console.log('panning to', { latitude, longitude });
+  //
+  //   this.editor.map.map.panTo([latitude, longitude]);
+  // };
 
   editor = new Editor({
     container: 'map',
@@ -59,6 +75,9 @@ export class App extends React.Component {
     return (
       <div>
         <Fills />
+
+        <UserLocation editor={editor} />
+
         <EditorPanel
           editor={editor}
           mode={mode}

src/styles/colors.less

@@ -4,3 +4,7 @@
 @router_line: #4597d0;
 
 @bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
+@bar_background: #333333;
+@dialog_background: #222222;
+
+@location_line: #ff3344;

src/styles/map.less

@@ -46,15 +46,63 @@
 }
 
 .leaflet-bar a {
-  background: #333333;
+  background: @bar_background;
   color: white;
   text-shadow: none;
   user-select: none;
   border-bottom: none;
 
   &:hover {
-    background: #444444;
+    background: @bar_background;
     color: white;
     border-bottom: none;
   }
 }
+
+.locate-geo-button {
+  background: @bar_background;
+  width: 32px;
+  height: 32px;
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  border-radius: 2px;
+  z-index: 3;
+  box-shadow: @bar_shadow;
+  cursor: pointer;
+}
+
+.location-marker {
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  outline: none;
+  z-index: 10001;
+
+  &:after {
+    content: ' ';
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    box-shadow: 0 0 0 2px @location_line;
+    position: absolute;
+    left: 12px;
+    top: 12px;
+  }
+
+  &:before {
+    content: ' ';
+    display: block;
+    width: 3px;
+    height: 3px;
+    border-radius: 5px;
+    box-shadow: 0 0 0 2px @location_line;
+    background: @location_line;
+    position: absolute;
+    left: 19px;
+    top: 19px;
+  }
+
+}

src/styles/panel.less

@@ -1,5 +1,5 @@
 .control-bar {
-  background: #333333;
+  background: @bar_background;
   border-radius: 3px;
   display: flex;
   box-shadow: @bar_shadow;
@@ -150,7 +150,7 @@
   right: 0;
 
   svg {
-    fill: #333333;
+    fill: @bar_background;
   }
 }
 

src/utils/geolocation.js

@@ -0,0 +1,5 @@
+export const getUserLocation = callback => {
+  if (!navigator || !navigator.geolocation) return;
+
+  navigator.geolocation.getCurrentPosition(callback);
+};