diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index d76cc1c4d..72f7f1078 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -147,10 +147,8 @@ export function uiMapData(context) { // Update - li = li - .merge(liEnter); - li + .merge(liEnter) .classed('active', layerEnabled) .selectAll('input') .property('checked', layerEnabled); @@ -201,16 +199,105 @@ export function uiMapData(context) { // Update - li = li - .merge(liEnter); - li + .merge(liEnter) .classed('active', function (d) { return d.layer.enabled(); }) .selectAll('input') .property('checked', function (d) { return d.layer.enabled(); }); } + // Beta feature - sample vector layers to support Detroit Mapping Challenge + // https://github.com/osmus/detroit-mapping-challenge + function drawVectorItems(selection) { + var vtData = [ + { + name: 'Detroit Neighborhoods/Parks', + src: 'neighborhoods-parks', + tooltip: 'Neighborhood boundaries and parks as compiled by City of Detroit in concert with community groups.', + template: 'https://{switch:a,b,c,d}.tiles.mapbox.com/v4/jonahadkins.cjksmur6x34562qp9iv1u3ksf-54hev,jonahadkins.cjksmqxdx33jj2wp90xd9x2md-4e5y2/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA' + }, { + name: 'Detroit Composite POIs', + src: 'composite-poi', + tooltip: 'Fire Inspections, Business Licenses, and other public location data collated from the City of Detroit.', + template: 'https://{switch:a,b,c,d}.tiles.mapbox.com/v4/jonahadkins.cjksmm6a02sli31myxhsr7zf3-2sw8h/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA' + }, { + name: 'Detroit All-The-Places POIs', + src: 'alltheplaces-poi', + tooltip: 'Public domain business location data created by web scrapers.', + template: 'https://{switch:a,b,c,d}.tiles.mapbox.com/v4/jonahadkins.cjksmswgk340g2vo06p1w9w0j-8fjjc/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1Ijoiam9uYWhhZGtpbnMiLCJhIjoiRlVVVkx3VSJ9.9sdVEK_B_VkEXPjssU5MqA' + } + ]; + + var dataLayer = layers.layer('data'); + + var header = selection.selectAll('.layer-list-vectortile-header') + .data([0]); + + header.enter() + .append('h4') + .attr('class', 'layer-list-vectortile-header') + .text('Vector Tiles (beta)'); + + var ul = selection + .selectAll('.layer-list-vectortile') + .data([0]); + + ul = ul.enter() + .append('ul') + .attr('class', 'layer-list layer-list-vectortile') + .merge(ul); + + var li = ul.selectAll('.list-item') + .data(vtData); + + li.exit() + .remove(); + + var liEnter = li.enter() + .append('li') + .attr('class', function(d) { return 'list-item list-item-' + d.src; }); + + var labelEnter = liEnter + .append('label') + .each(function(d) { + d3_select(this).call( + tooltip().title(d.tooltip).placement('bottom') + ); + }); + + labelEnter + .append('input') + .attr('type', 'radio') + .attr('name', 'vectortile') + .on('change', selectVTLayer); + + labelEnter + .append('span') + .text(function(d) { return d.name; }); + + // Update + li + .merge(liEnter) + .classed('active', isVTLayerSelected) + .selectAll('input') + .property('checked', isVTLayerSelected); + + + function isVTLayerSelected(d) { + return dataLayer && dataLayer.template() === d.template; + } + + function selectVTLayer(d) { + context.storage('settings-custom-data-url', d.template); + if (dataLayer) { + dataLayer.template(d.template, d.src); + dataLayer.enabled(true); + } + } + } + + function drawCustomDataItems(selection) { var dataLayer = layers.layer('data'); var hasData = dataLayer && dataLayer.hasData(); @@ -394,6 +481,7 @@ export function uiMapData(context) { _dataLayerContainer .call(drawOsmItems) .call(drawPhotoItems) + .call(drawVectorItems) // beta - detroit mapping challenge .call(drawCustomDataItems); _fillList