working on geolocate layer

ref #5587

modules/svg/geolocate.js

@@ -1,9 +1,10 @@
+import { svgPointTransform } from "./helpers";
 
 export function svgGeolocate(projection, context, dispatch) {
     var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000);
     var minZoom = 12;
     var layer = d3_select(null);
-    var _mapillary;
+    var _position;
 
 
     function init() {
@@ -41,27 +42,46 @@ export function svgGeolocate(projection, context, dispatch) {
         // layer.selectAll('.viewfield-group').remove();
         layer.style('display', 'none');
     }
-    
-    function update(location) {
 
-        var groups = layer.selectAll('.markers').selectAll('.viewfield-group')
-            .data([location]);
+    function transform(d) {
+        return svgPointTransform(projection)(d);
+    }
+    
+    function update() {
+        var points = layer.selectAll('.geolocations').selectAll('.geolocation')
+            .data([_position]);
+    
+
+        points.enter()
+            .append('g')
+            .attr('class', 'point')
+            .attr('transform', transform);
 
     }
 
     function drawLocation(selection) {
         var enabled = svgGeolocate.enabled;
 
-        layer = selection.selectAll('.layer-mapillary-signs')
+        layer = selection.selectAll('.layer-geolocate')
             .data([]);
 
         layer.exit()
             .remove();
 
-        layer = layer.enter()
+        var layerEnter = layer.enter()
             .append('g')
-            .attr('class', 'layer-geolocate-point')
-            .style('display', enabled ? 'block' : 'none')
+            .attr('class', 'layer-geolocation')
+            .style('display', enabled ? 'block' : 'none');
+
+        layerEnter
+            .append('g')
+            .attr('class', 'geolocations');
+
+        layerEnter
+            .append('g')
+            .attr('class', 'radius');
+        
+        layer = layerEnter
             .merge(layer);
 
         if (enabled) {
@@ -74,9 +94,11 @@ export function svgGeolocate(projection, context, dispatch) {
 
     drawLocation.enabled = function(_) {
         if (!arguments.length) return svgGeolocate.enabled;
-        svgGeolocate.enabled = _;
+        _position = _;
+        svgGeolocate.enabled = true;
         if (svgGeolocate.enabled) {
             showLayer();
+            update();
         } else {
             hideLayer();
         }

modules/svg/layers.js

@@ -9,6 +9,7 @@ import { select as d3_select } from 'd3-selection';
 
 import { svgData } from './data';
 import { svgDebug } from './debug';
+import { svgGeolocate } from './geolocate';
 import { svgStreetside } from './streetside';
 import { svgMapillaryImages } from './mapillary_images';
 import { svgMapillarySigns } from './mapillary_signs';
@@ -32,7 +33,8 @@ export function svgLayers(projection, context) {
         { id: 'mapillary-signs',  layer: svgMapillarySigns(projection, context, dispatch) },
         { id: 'openstreetcam-images', layer: svgOpenstreetcamImages(projection, context, dispatch) },
         { id: 'debug', layer: svgDebug(projection, context, dispatch) },
-        { id: 'touch', layer: svgTouch(projection, context, dispatch) }
+        { id: 'touch', layer: svgTouch(projection, context, dispatch) },
+        { id: 'geolocate', layer: svgGeolocate(projection, context, dispatch) }
     ];
 
 

modules/ui/geolocate.js

@@ -25,6 +25,11 @@ export function uiGeolocate(context) {
 
 
     function success(position) {
+        var location = { loc: [position.coords.longitude, position.coords.latitude] },
+            layer = context.layers().layer('geolocate');
+
+        layer.enabled(location);
+
         var map = context.map(),
             extent = geoExtent([position.coords.longitude, position.coords.latitude])
                 .padByMeters(position.coords.accuracy);