diff --git a/modules/svg/data.js b/modules/svg/data.js index 11559cb13..0e3b9f372 100644 --- a/modules/svg/data.js +++ b/modules/svg/data.js @@ -180,6 +180,7 @@ export function svgData(projection, context, dispatch) { function drawData(selection) { console.log('drawData() called'); + console.log('selection', selection); var vtService = getService(); var getPath = svgPath(projection).geojson; var getAreaPath = svgPath(projection, null, true).geojson; @@ -373,11 +374,6 @@ export function svgData(projection, context, dispatch) { stringifyGeojsonProperties(gj); } break; - // case '.png': - // xx = JSON.parse(data); - // console.log('Hello world!'); - // console.log(data); - // break; } gj = gj || {}; diff --git a/modules/svg/local_photos.js b/modules/svg/local_photos.js index c2f8d0a86..47742bff6 100644 --- a/modules/svg/local_photos.js +++ b/modules/svg/local_photos.js @@ -62,6 +62,7 @@ export function svgLocalPhotos(projection, context, dispatch) { _initialized = true; } + // TODO: after checkbox is implemented function showLayer() { console.log('showLayer() called'); // if images are not available return @@ -79,7 +80,7 @@ export function svgLocalPhotos(projection, context, dispatch) { .on('end', function () { dispatch.call('change'); }); } - + // TODO: after checkbox is implemented function hideLayer() { console.log('hideLayer() called'); throttledRedraw.cancel(); @@ -122,7 +123,7 @@ export function svgLocalPhotos(projection, context, dispatch) { context.map().centerEase(image.loc); } - + // TODO: later function mouseover(d3_event, image) { console.log('mouseover() called'); // const service = getService(); @@ -130,7 +131,7 @@ export function svgLocalPhotos(projection, context, dispatch) { // if (service) service.setStyles(context, image); } - + // TODO: later function mouseout() { console.log('mouseout() called'); // const service = getService(); @@ -153,6 +154,18 @@ export function svgLocalPhotos(projection, context, dispatch) { // no need to filter sequence // function filterSequences(sequences) {...} + // function getService() { + // console.log('getService() called'); + // if (services.mapillary && !_fileList) { + // _fileList = services.mapillary; + // _fileList.event.on('loadedImages', throttledRedraw); + // } else if (!services.mapillary && _fileList) { + // _fileList = null; + // } + + // return _mapillary; + // } + // puts the images on the map function update() { console.log('update() called'); @@ -161,16 +174,19 @@ export function svgLocalPhotos(projection, context, dispatch) { const showViewfields = (z >= minViewfieldZoom); // const service = getService(); + // const service = _fileList; // let sequences = (service ? service.sequences(projection) : []); // let images = (service && showMarkers ? service.images(projection) : []); + // supply dummy data and see the rest of the code // images = filterImages(images); // sequences = filterSequences(sequences, service); // service.filterViewer(context); - let traces = layer.selectAll('.sequences').selectAll('.sequence'); + let traces = layer.selectAll('.sequences').selectAll('.sequence') // .data(sequences, function(d) { return d.properties.id; }); + .data(_fileList, function(d) { return 33;}); // exit traces.exit() @@ -184,8 +200,9 @@ export function svgLocalPhotos(projection, context, dispatch) { .attr('d', svgPath(projection).geojson); - const groups = layer.selectAll('.markers').selectAll('.viewfield-group'); + const groups = layer.selectAll('.markers').selectAll('.viewfield-group') // .data(images, function(d) { return d.id; }); + .data(_fileList, function(d) { return 33;}); // exit groups.exit() @@ -195,8 +212,8 @@ export function svgLocalPhotos(projection, context, dispatch) { const groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseenter', mouseover) - .on('mouseleave', mouseout) + // .on('mouseenter', mouseover) + // .on('mouseleave', mouseout) .on('click', click); groupsEnter @@ -249,35 +266,33 @@ export function svgLocalPhotos(projection, context, dispatch) { // create your onw css for this function drawPhotos(selection) { console.log('drawPhotos fn called'); + // const enabled = svgMapillaryImages.enabled; const enabled = _enabled; - // const service = getService(); + const fileList = _fileList; - // layer = selection.selectAll('.local-photos') - // layer = selection.selectAll('.layer-local-photos'); - // layer = selection.selectAll('.data'); - // .data(service ? [0] : []); - // .data([0]); + // creates a layer if doesn't exist + layer = selection.selectAll('.layer-local-photos') + .data(fileList ? [0] : []); - // layer.exit() - // .remove(); + layer.exit() + .remove(); - // const layerEnter = layer.enter() - // .append('g') - // // .attr('class', 'layer-local-photos') - // .attr('class', 'layer-mapillary') - // .style('display', enabled ? 'block' : 'none'); + const layerEnter = layer.enter() + .append('g') + .attr('class', 'layer-local-photos') + .style('display', enabled ? 'block' : 'none'); - // layerEnter - // .append('g') - // .attr('class', 'sequences'); + layerEnter + .append('g') + .attr('class', 'sequences'); - // layerEnter - // .append('g') - // .attr('class', 'markers'); + layerEnter + .append('g') + .attr('class', 'markers'); - // layer = layerEnter - // .merge(layer); + layer = layerEnter + .merge(layer); // if (enabled) { // if (~~context.map().zoom() >= minZoom) { @@ -288,6 +303,13 @@ export function svgLocalPhotos(projection, context, dispatch) { // editOff(); // } // } + + if (_fileList) { + editOn(); + update(); + } else { + editOff(); + } } @@ -316,11 +338,11 @@ export function svgLocalPhotos(projection, context, dispatch) { if (_enabled) { showLayer(); // context.photos().on('change.mapillary_images', update); - context.photos().on('change.local_photos', update); + context.photos().on('change.', update); } else { hideLayer(); // context.photos().on('change.mapillary_images', null); - context.photos().on('change.local_photos', null); + context.photos().on('change.', null); } dispatch.call('change'); @@ -345,7 +367,7 @@ export function svgLocalPhotos(projection, context, dispatch) { // drawPhotos.setFile = function(fileList) { drawPhotos.setFile = function(file) { console.log('drawPhotos.setFile called'); - _fileList = null; + // _fileList = null; // fileList.forEach(image => // extract_exif(image) @@ -362,8 +384,8 @@ export function svgLocalPhotos(projection, context, dispatch) { // Step 1: entry point drawPhotos.fileList = function(fileList) { console.log('drawPhotos.fileList called'); - console.log('Step 2: fileList read in local_photos.js', fileList); - // if (!arguments.length) return _fileList; + console.log('Step 2: fileList read', fileList); + if (!arguments.length) return _fileList; _fileList = fileList; @@ -385,6 +407,7 @@ export function svgLocalPhotos(projection, context, dispatch) { return this; }; + // TODO: later // new // when all photos are uploaded, zoom to see them all drawPhotos.fitZoom = function() { @@ -429,6 +452,7 @@ export function svgLocalPhotos(projection, context, dispatch) { return this; }; + // TODO: later drawPhotos.supported = function() { console.log('drawPhotos.supported called'); // return !!getService(); diff --git a/modules/ui/sections/data_layers.js b/modules/ui/sections/data_layers.js index 16aab4a4f..3e88226da 100644 --- a/modules/ui/sections/data_layers.js +++ b/modules/ui/sections/data_layers.js @@ -40,7 +40,7 @@ export function uiSectionDataLayers(context) { .call(drawOsmItems) .call(drawQAItems) .call(drawCustomDataItems) - // .call(drawLocalPhotos) + .call(drawLocalPhotos) .call(drawVectorItems) // Beta - Detroit mapping challenge .call(drawPanelItems); } @@ -295,104 +295,14 @@ export function uiSectionDataLayers(context) { } // original function - // function drawCustomDataItems(selection) { - // var dataLayer = layers.layer('data'); - // var hasData = dataLayer && dataLayer.hasData(); - // var showsData = hasData && dataLayer.enabled(); - - // var ul = selection - // .selectAll('.layer-list-data') - // .data(dataLayer ? [0] : []); - - // // Exit - // ul.exit() - // .remove(); - - // // Enter - // var ulEnter = ul.enter() - // .append('ul') - // .attr('class', 'layer-list layer-list-data'); - - // var liEnter = ulEnter - // .append('li') - // .attr('class', 'list-item-data'); - - // var labelEnter = liEnter - // .append('label') - // .call(uiTooltip() - // .title(() => t.append('map_data.layers.custom.tooltip')) - // .placement('top') - // ); - - // labelEnter - // .append('input') - // .attr('type', 'checkbox') - // .on('change', function() { toggleLayer('data'); }); - - // labelEnter - // .append('span') - // .call(t.append('map_data.layers.custom.title')); - - // liEnter - // .append('button') - // .attr('class', 'open-data-options') - // .call(uiTooltip() - // .title(() => t.append('settings.custom_data.tooltip')) - // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - // ) - // .on('click', function(d3_event) { - // d3_event.preventDefault(); - // editCustom(); - // }) - // .call(svgIcon('#iD-icon-more')); - - // liEnter - // .append('button') - // .attr('class', 'zoom-to-data') - // .call(uiTooltip() - // .title(() => t.append('map_data.layers.custom.zoom')) - // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - // ) - // .on('click', function(d3_event) { - // if (d3_select(this).classed('disabled')) return; - - // d3_event.preventDefault(); - // d3_event.stopPropagation(); - // dataLayer.fitZoom(); - // }) - // .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); - - // // Update - // ul = ul - // .merge(ulEnter); - - // ul.selectAll('.list-item-data') - // .classed('active', showsData) - // .selectAll('label') - // .classed('deemphasize', !hasData) - // .selectAll('input') - // .property('disabled', !hasData) - // .property('checked', showsData); - - // ul.selectAll('button.zoom-to-data') - // .classed('disabled', !hasData); - // } - - // added/testing: new function for local photos - function drawLocalPhotos(selection) { - var dataLayer = layers.layer('local-photos'); - console.log(dataLayer, 'dataLayer'); - // var hasData = dataLayer && dataLayer.hasData(); - // var showsData = hasData && dataLayer.enabled(); - - // var ul = selection - // .selectAll('.layer-list-local-photos') - // .data(dataLayer ? [0] : []); + function drawCustomDataItems(selection) { + var dataLayer = layers.layer('data'); + var hasData = dataLayer && dataLayer.hasData(); + var showsData = hasData && dataLayer.enabled(); var ul = selection - .selectAll('.layer-list-local-photos') + .selectAll('.layer-list-data') .data(dataLayer ? [0] : []); - console.log(ul, 'ul inside drawLocalPhotos'); // Exit ul.exit() @@ -402,7 +312,93 @@ export function uiSectionDataLayers(context) { var ulEnter = ul.enter() .append('ul') .attr('class', 'layer-list layer-list-data'); - console.log(ulEnter, 'ulEnter inside drawLocalPhotos'); + + var liEnter = ulEnter + .append('li') + .attr('class', 'list-item-data'); + + var labelEnter = liEnter + .append('label') + .call(uiTooltip() + .title(() => t.append('map_data.layers.custom.tooltip')) + .placement('top') + ); + + labelEnter + .append('input') + .attr('type', 'checkbox') + .on('change', function() { toggleLayer('data'); }); + + labelEnter + .append('span') + .call(t.append('map_data.layers.custom.title')); + + liEnter + .append('button') + .attr('class', 'open-data-options') + .call(uiTooltip() + .title(() => t.append('settings.custom_data.tooltip')) + .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + ) + .on('click', function(d3_event) { + d3_event.preventDefault(); + editCustom(); + }) + .call(svgIcon('#iD-icon-more')); + + liEnter + .append('button') + .attr('class', 'zoom-to-data') + .call(uiTooltip() + .title(() => t.append('map_data.layers.custom.zoom')) + .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + ) + .on('click', function(d3_event) { + if (d3_select(this).classed('disabled')) return; + + d3_event.preventDefault(); + d3_event.stopPropagation(); + dataLayer.fitZoom(); + }) + .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); + + // Update + ul = ul + .merge(ulEnter); + + ul.selectAll('.list-item-data') + .classed('active', showsData) + .selectAll('label') + .classed('deemphasize', !hasData) + .selectAll('input') + .property('disabled', !hasData) + .property('checked', showsData); + + ul.selectAll('button.zoom-to-data') + .classed('disabled', !hasData); + } + + // added/testing: new function for local photos + function drawLocalPhotos(selection) { + var dataLayer = layers.layer('local-photos'); + console.log(dataLayer, 'dataLayer'); + // var hasData = dataLayer && dataLayer.hasData(); + // var showsData = hasData && dataLayer.enabled(); + + // creates ul, if it doesn't exist + var ul = selection + .selectAll('.layer-list-local-photos') + .data(dataLayer ? [0] : []); + + // Exit + ul.exit() + .remove(); + + // Enter + var ulEnter = ul.enter() + .append('ul') + .attr('class', 'layer-list layer-list-local-photos'); + var localPhotosEnter = ulEnter .append('li') .attr('class', 'list-item-local-photos'); @@ -466,136 +462,136 @@ export function uiSectionDataLayers(context) { } // current fn - function drawCustomDataItems(selection) { - var dataLayer = layers.layer('data'); - var hasData = dataLayer && dataLayer.hasData(); - var showsData = hasData && dataLayer.enabled(); + // function drawCustomDataItems(selection) { + // var dataLayer = layers.layer('data'); + // var hasData = dataLayer && dataLayer.hasData(); + // var showsData = hasData && dataLayer.enabled(); - var ul = selection - .selectAll('.layer-list-data') - .data(dataLayer ? [0] : []); + // var ul = selection + // .selectAll('.layer-list-data') + // .data(dataLayer ? [0] : []); - // Exit - ul.exit() - .remove(); + // // Exit + // ul.exit() + // .remove(); - // Enter - var ulEnter = ul.enter() - .append('ul') - .attr('class', 'layer-list layer-list-data'); + // // Enter + // var ulEnter = ul.enter() + // .append('ul') + // .attr('class', 'layer-list layer-list-data'); - // Custom Map Data - var mapEnter = ulEnter - .append('li') - .attr('class', 'list-item-data'); + // // Custom Map Data + // var mapEnter = ulEnter + // .append('li') + // .attr('class', 'list-item-data'); - var mapLabelEnter = mapEnter - .append('label') - .call(uiTooltip() - .title(t.html('map_data.layers.custom.tooltip')) - .placement('top') - ); + // var mapLabelEnter = mapEnter + // .append('label') + // .call(uiTooltip() + // .title(t.html('map_data.layers.custom.tooltip')) + // .placement('top') + // ); - mapLabelEnter - .append('input') - .attr('type', 'checkbox') - .on('change', function() { toggleLayer('data'); }); + // mapLabelEnter + // .append('input') + // .attr('type', 'checkbox') + // .on('change', function() { toggleLayer('data'); }); - mapLabelEnter - .append('span') - .call(t.append('map_data.layers.custom.title')); + // mapLabelEnter + // .append('span') + // .call(t.append('map_data.layers.custom.title')); - mapEnter - .append('button') - .attr('class', 'open-data-options') - .call(uiTooltip() - .title(t.html('settings.custom_data.tooltip')) - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - ) - .on('click', function(d3_event) { - d3_event.preventDefault(); - editCustom(); - }) - .call(svgIcon('#iD-icon-more')); + // mapEnter + // .append('button') + // .attr('class', 'open-data-options') + // .call(uiTooltip() + // .title(t.html('settings.custom_data.tooltip')) + // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + // ) + // .on('click', function(d3_event) { + // d3_event.preventDefault(); + // editCustom(); + // }) + // .call(svgIcon('#iD-icon-more')); - mapEnter - .append('button') - .attr('class', 'zoom-to-data') - .call(uiTooltip() - .title(t.html('map_data.layers.custom.zoom')) - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - ) - .on('click', function(d3_event) { - if (d3_select(this).classed('disabled')) return; + // mapEnter + // .append('button') + // .attr('class', 'zoom-to-data') + // .call(uiTooltip() + // .title(t.html('map_data.layers.custom.zoom')) + // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + // ) + // .on('click', function(d3_event) { + // if (d3_select(this).classed('disabled')) return; - d3_event.preventDefault(); - d3_event.stopPropagation(); - dataLayer.fitZoom(); - }) - .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); + // d3_event.preventDefault(); + // d3_event.stopPropagation(); + // dataLayer.fitZoom(); + // }) + // .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); - // new item - local photos - var localPhotosEnter = ulEnter - .append('li') - .attr('class', 'list-item-local-photos'); + // // new item - local photos + // var localPhotosEnter = ulEnter + // .append('li') + // .attr('class', 'list-item-local-photos'); - var localPhotosLabelEnter = localPhotosEnter - .append('label'); - // TODO: Add tooltip + // var localPhotosLabelEnter = localPhotosEnter + // .append('label'); + // // TODO: Add tooltip - localPhotosLabelEnter - .append('input') - .attr('type', 'checkbox') - .on('change', function() { toggleLayer('data'); }); + // localPhotosLabelEnter + // .append('input') + // .attr('type', 'checkbox') + // .on('change', function() { toggleLayer('data'); }); - localPhotosLabelEnter - .append('span') - .text('Local Photos'); + // localPhotosLabelEnter + // .append('span') + // .text('Local Photos'); - localPhotosEnter - .append('button') - .attr('class', 'open-data-options') - .call(uiTooltip() - .title(t.html('settings.custom_data.tooltip')) - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - ) - .on('click', function(d3_event) { - d3_event.preventDefault(); - editLocalPhotos(); - }) - .call(svgIcon('#iD-icon-more')); + // localPhotosEnter + // .append('button') + // .attr('class', 'open-data-options') + // .call(uiTooltip() + // .title(t.html('settings.custom_data.tooltip')) + // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + // ) + // .on('click', function(d3_event) { + // d3_event.preventDefault(); + // editLocalPhotos(); + // }) + // .call(svgIcon('#iD-icon-more')); - localPhotosEnter - .append('button') - .attr('class', 'zoom-to-data') - .call(uiTooltip() - .title(t.html('map_data.layers.custom.zoom')) - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - ) - .on('click', function(d3_event) { - if (d3_select(this).classed('disabled')) return; + // localPhotosEnter + // .append('button') + // .attr('class', 'zoom-to-data') + // .call(uiTooltip() + // .title(t.html('map_data.layers.custom.zoom')) + // .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + // ) + // .on('click', function(d3_event) { + // if (d3_select(this).classed('disabled')) return; - d3_event.preventDefault(); - d3_event.stopPropagation(); - dataLayer.fitZoom(); - }) - .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); + // d3_event.preventDefault(); + // d3_event.stopPropagation(); + // dataLayer.fitZoom(); + // }) + // .call(svgIcon('#iD-icon-framed-dot', 'monochrome')); - // Update - ul = ul - .merge(ulEnter); + // // Update + // ul = ul + // .merge(ulEnter); - ul.selectAll('.list-item-data') - .classed('active', showsData) - .selectAll('label') - .classed('deemphasize', !hasData) - .selectAll('input') - .property('disabled', !hasData) - .property('checked', showsData); + // ul.selectAll('.list-item-data') + // .classed('active', showsData) + // .selectAll('label') + // .classed('deemphasize', !hasData) + // .selectAll('input') + // .property('disabled', !hasData) + // .property('checked', showsData); - ul.selectAll('button.zoom-to-data') - .classed('disabled', !hasData); - } + // ul.selectAll('button.zoom-to-data') + // .classed('disabled', !hasData); + // } function editCustom() { context.container()