diff --git a/modules/svg/geolocate.js b/modules/svg/geolocate.js index 8a06d769d3..228efd7b55 100644 --- a/modules/svg/geolocate.js +++ b/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 transform(d) { + return svgPointTransform(projection)(d); + } + + function update() { + var points = layer.selectAll('.geolocations').selectAll('.geolocation') + .data([_position]); - function update(location) { - var groups = layer.selectAll('.markers').selectAll('.viewfield-group') - .data([location]); + 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(); } diff --git a/modules/svg/layers.js b/modules/svg/layers.js index 220a53201b..b5663d7788 100644 --- a/modules/svg/layers.js +++ b/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) } ]; diff --git a/modules/ui/geolocate.js b/modules/ui/geolocate.js index e0efe190de..fe1a0bcd01 100644 --- a/modules/ui/geolocate.js +++ b/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);