Skip to content

Commit

Permalink
Get basic custom data polygon rendering working.
Browse files Browse the repository at this point in the history 
Prune vestigial code from the background and tile_layer files, slippy map still works.

Completely remove the tile layer code, tests, and refactor background.js to accomodate.

Add on-startup check for gpx param in the URL bar, displaying polygon/line data from any source on the map (and zooming there by default).

Ensure that the custom data layer manages its own feature visibility as new files are supplied. Also enable drag and drop.

Fix styling for custom data menu option so that it appears enabled appropriately. Ren-enable periodic re-rendering of the custom data section. Enable turning the custom data layer on/off from the UI checkbox.

Add point rendering to custom data, and split the renderer into three methods for polys, lines, and points.
  • Loading branch information
@Bonkles
Bonkles committed Jun 8, 2022
1 parent b74ea90 commit ec6d474
Show file tree
Hide file tree
Showing 9 changed files with 550 additions and 428 deletions.
479 changes: 479 additions & 0 deletions modules/pixi/PixiLayerCustomData.js
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions modules/pixi/PixiLayers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { PixiLayerOsmose } from './PixiLayerOsmose';
import { PixiLayerRapid } from './PixiLayerRapid';
import { PixiLayerMapUI } from './PixiLayerMapUI';
import { PixiLayerStreetsidePhotos } from './PixiLayerStreetsidePhotos';
import { PixiLayerCustomData } from './PixiLayerCustomData';


/**
Expand All @@ -41,6 +42,7 @@ export class PixiLayers {
new PixiLayerOsm(context, scene, 5),
new PixiLayerRapid(context, scene, 6),

new PixiLayerCustomData(context, scene, 8),
new PixiLayerOsmNotes(context, scene, 10),
new PixiLayerImproveOsm(context, scene, 11),
new PixiLayerKeepRight(context, scene, 12),
Expand Down
159 changes: 54 additions & 105 deletions modules/renderer/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import whichPolygon from 'which-polygon';
import { prefs } from '../core/preferences';
import { fileFetcher } from '../core/file_fetcher';
import { rendererBackgroundSource } from './background_source';
import { rendererTileLayer } from './tile_layer';
import { utilDetect } from '../util/detect';
import { utilRebind } from '../util/rebind';

Expand All @@ -18,9 +17,10 @@ let _imageryIndex = null;
export function rendererBackground(context) {
const dispatch = d3_dispatch('change');
const detected = utilDetect();
const baseLayer = rendererTileLayer(context).projection(context.projection);
let _source;
let _checkedBlocklists = [];
let _isValid = true;
let _initialized = false;
let _overlayLayers = [];
let _brightness = 1;
let _contrast = 1;
Expand All @@ -29,6 +29,7 @@ export function rendererBackground(context) {
var _numGridSplits = 0; // No grid by default.



function ensureImageryIndex() {
return fileFetcher.get('imagery')
.then(sources => {
Expand Down Expand Up @@ -88,7 +89,7 @@ export function rendererBackground(context) {


function background(selection) {
const currSource = baseLayer.source();
const currSource = _source;

// If we are displaying an Esri basemap at high zoom,
// check its tilemap to see how high the zoom can go
Expand Down Expand Up @@ -141,59 +142,11 @@ export function rendererBackground(context) {
}


let imagery = base.selectAll('.layer-imagery')
.data([0]);


// try letting pixi do this
// imagery.enter()
// .append('div')
// .attr('class', 'layer layer-imagery')
// .merge(imagery)
// .call(baseLayer);
//

let maskFilter = '';
let mixBlendMode = '';
if (detected.cssfilters && _sharpness > 1) { // apply unsharp mask
mixBlendMode = 'overlay';
maskFilter = 'saturate(0) blur(3px) invert(1)';

let contrast = _sharpness - 1;
maskFilter += ` contrast(${contrast})`;

let brightness = d3_interpolateNumber(1, 0.85)(_sharpness - 1);
maskFilter += ` brightness(${brightness})`;
}

let mask = base.selectAll('.layer-unsharp-mask')
.data(detected.cssfilters && _sharpness > 1 ? [0] : []);

mask.exit()
.remove();

// not yet
// mask.enter()
// .append('div')
// .attr('class', 'layer layer-mask layer-unsharp-mask')
// .merge(mask)
// .call(baseLayer)
// .style('filter', maskFilter || null)
// .style('mix-blend-mode', mixBlendMode || null);


let overlays = selection.selectAll('.layer-overlay')
.data(_overlayLayers, d => d.source().name());
.data(_overlayLayers, d => d.name());

overlays.exit()
.remove();

// not yet
// overlays.enter()
// .insert('div', '.layer-data')
// .attr('class', 'layer layer-overlay')
// .merge(overlays)
// .each((layer, i, nodes) => d3_select(nodes[i]).call(layer));
}

background.numGridSplits = function(_) {
Expand All @@ -203,13 +156,46 @@ export function rendererBackground(context) {
return background;
};


background.initDragAndDrop = function (_) {
if (_initialized) return; // run once


function over(d3_event) {
d3_event.stopPropagation();
d3_event.preventDefault();
d3_event.dataTransfer.dropEffect = 'copy';
}

let customDataLayer = context.layers().getLayer('custom-data');

//Keep trying till the layers are instantiated.
if (!customDataLayer) return;

context.container()
.attr('dropzone', 'copy')
.on('drop.svgData', function (d3_event) {
d3_event.stopPropagation();
d3_event.preventDefault();
if (!detected.filedrop) return;
customDataLayer.fileList(d3_event.dataTransfer.files);
})
.on('dragenter.svgData', over)
.on('dragexit.svgData', over)
.on('dragover.svgData', over);

_initialized = true;
};



background.updateImagery = function() {
let currSource = baseLayer.source();
let currSource = _source;
if (context.inIntro() || !currSource) return;

let o = _overlayLayers
.filter(d => !d.source().isLocatorOverlay() && !d.source().isHidden())
.map(d => d.source().id)
.filter(d => !d.isLocatorOverlay() && !d.isHidden())
.map(d => d.id)
.join(',');

const meters = geoOffsetToMeters(currSource.offset());
Expand Down Expand Up @@ -254,32 +240,8 @@ export function rendererBackground(context) {
}

_overlayLayers
.filter(d => !d.source().isLocatorOverlay() && !d.source().isHidden())
.forEach(d => imageryUsed.push(d.source().imageryUsed()));

// find a better way to determine what layers are enabled than
// `context.layers().getLayer().enabled()`

// const dataLayer = context.layers().getLayer('data');
// if (dataLayer && dataLayer.enabled() && dataLayer.hasData()) {
// imageryUsed.push(dataLayer.getSrc());
// }
//
// const photoOverlayLayers = {
// streetside: 'Bing Streetside',
// mapillary: 'Mapillary Images',
// 'mapillary-map-features': 'Mapillary Map Features',
// 'mapillary-signs': 'Mapillary Signs',
// openstreetcam: 'OpenStreetCam Images'
// };
//
// for (let layerID in photoOverlayLayers) {
// const layer = context.layers().getLayer(layerID);
// if (layer && layer.enabled()) {
// photoOverlaysUsed.push(layerID);
// imageryUsed.push(photoOverlayLayers[layerID]);
// }
// }
.filter(d => !d.isLocatorOverlay() && !d.isHidden())
.forEach(d => imageryUsed.push(d.imageryUsed()));

context.history().imageryUsed(imageryUsed);
context.history().photoOverlaysUsed(photoOverlaysUsed);
Expand All @@ -293,7 +255,7 @@ export function rendererBackground(context) {
(_imageryIndex.query.bbox(extent.rectangle(), true) || [])
.forEach(d => visible[d.id] = true);

const currSource = baseLayer.source();
const currSource = _source;

// Recheck blocked sources only if we detect new blocklists pulled from the OSM API.
const osm = context.connection();
Expand All @@ -317,16 +279,8 @@ export function rendererBackground(context) {
});
};


background.dimensions = (val) => {
if (!val) return;
baseLayer.dimensions(val);
_overlayLayers.forEach(layer => layer.dimensions(val));
};


background.baseLayerSource = function(d) {
if (!arguments.length) return baseLayer.source();
if (!arguments.length) return _source;

// test source against OSM imagery blocklists..
const osm = context.connection();
Expand All @@ -351,7 +305,7 @@ export function rendererBackground(context) {
fail = regex.test(template);
}

baseLayer.source(!fail ? d : background.findSource('none'));
_source = (!fail ? d : background.findSource('none'));
dispatch.call('change');
background.updateImagery();
return background;
Expand All @@ -370,34 +324,30 @@ export function rendererBackground(context) {


background.showsLayer = (d) => {
const currSource = baseLayer.source();
const currSource = _source;
if (!d || !currSource) return false;
return d.id === currSource.id || _overlayLayers.some(layer => d.id === layer.source().id);
return d.id === currSource.id || _overlayLayers.some(layer => d.id === layer.id);
};


background.overlayLayerSources = () => {
return _overlayLayers.map(layer => layer.source());
return _overlayLayers;
};


background.toggleOverlayLayer = (d) => {
let layer;
for (let i = 0; i < _overlayLayers.length; i++) {
layer = _overlayLayers[i];
if (layer.source() === d) {
if (layer === d) {
_overlayLayers.splice(i, 1);
dispatch.call('change');
background.updateImagery();
return;
}
}

layer = rendererTileLayer(context)
.source(d)
.projection(context.projection)
.dimensions(baseLayer.dimensions()
);
layer = d;

_overlayLayers.push(layer);
dispatch.call('change');
Expand All @@ -406,7 +356,7 @@ export function rendererBackground(context) {


background.nudge = (d, zoom) => {
const currSource = baseLayer.source();
const currSource = _source;
if (currSource) {
currSource.nudge(d, zoom);
dispatch.call('change');
Expand All @@ -417,7 +367,7 @@ export function rendererBackground(context) {


background.offset = function(d) {
const currSource = baseLayer.source();
const currSource = _source;
if (!arguments.length) {
return (currSource && currSource.offset()) || [0, 0];
}
Expand Down Expand Up @@ -528,7 +478,7 @@ export function rendererBackground(context) {
});

if (hash.gpx) {
const gpx = context.layers().getLayer('data');
const gpx = context.layers().getLayer('custom-data');
if (gpx) {
gpx.url(hash.gpx, '.gpx');
}
Expand All @@ -548,6 +498,5 @@ export function rendererBackground(context) {
.catch(() => { /* ignore */ });
};


return utilRebind(background, dispatch, 'on');
}
1 change: 0 additions & 1 deletion modules/renderer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,3 @@ export { rendererBackground } from './background';
export { rendererFeatures } from './features';
export { rendererMap } from './map';
export { rendererPhotos } from './photos';
export { rendererTileLayer } from './tile_layer';
9 changes: 2 additions & 7 deletions modules/renderer/map.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { dispatch as d3_dispatch } from 'd3-dispatch';
import { interpolate as d3_interpolate } from 'd3-interpolate';
import { select as d3_select } from 'd3-selection';
import { zoom as d3_zoom, zoomIdentity as d3_zoomIdentity } from 'd3-zoom';

Expand All @@ -10,14 +9,11 @@ import _debounce from 'lodash-es/debounce';
import { PixiRenderer } from '../pixi/PixiRenderer';

import { prefs } from '../core/preferences';
import { modeBrowse } from '../modes/browse';
import { utilFastMouse, utilSetTransform, utilTotalExtent } from '../util/util';
import { utilBindOnce } from '../util/bind_once';
import { utilDetect } from '../util/detect';
import { utilGetDimensions } from '../util/dimensions';
import { utilRebind } from '../util/rebind';
import { utilZoomPan } from '../util/zoom_pan';
import { utilDoubleUp } from '../util/double_up';

// constants
var TILESIZE = 256;
Expand Down Expand Up @@ -129,6 +125,7 @@ export function rendererMap(context) {

map.dimensions(utilGetDimensions(selection));

context.background().initDragAndDrop();

//
// _doubleTapHandler
Expand Down Expand Up @@ -458,8 +455,6 @@ export function rendererMap(context) {
function redraw() {
if (surface.empty() || !_redrawEnabled) return;

supersurface.call(context.background()); // todo: get rid of this

if (_renderer) {
_renderer.render();
}
Expand Down Expand Up @@ -567,7 +562,7 @@ export function rendererMap(context) {
if (!arguments.length) return _dimensions;

_dimensions = val;
context.background().dimensions(_dimensions);
// context.background().dimensions(_dimensions);
projection.dimensions([[0, 0], _dimensions]);
_getMouseCoords = utilFastMouse(supersurface.node());

Expand Down
Loading

0 comments on commit ec6d474

Please sign in to comment.