Import osm-community-index and debug flag so we can look at it

css/80_app.css

@@ -3043,7 +3043,7 @@ img.tile-debug {
 .nocolor { color: rgba(0, 0, 0, 0); }
 .red     { color: rgba(255, 0, 0, 0.75); }
 .green   { color: rgba(0, 255, 0, 0.75); }
-.blue    { color: rgba(0, 0, 255, 0.75); }
+.blue    { color: rgba(176, 176, 255, 0.75); }
 .yellow  { color: rgba(255, 255, 0, 0.75); }
 .cyan    { color: rgba(0, 255, 255, 0.75); }
 .magenta { color: rgba(255, 0, 255, 0.75); }

data/index.js

@@ -12,6 +12,11 @@ export { default as dataImperial } from './imperial.json';
 export { default as dataDriveLeft } from './drive-left.json';
 export { en as dataEn } from '../dist/locales/en.json';
 
+import {
+    features as ociFeatures,
+    resources as ociResources
+} from 'osm-community-index';
+
 import { dataImagery } from './imagery.json';
 import { presets } from './presets/presets.json';
 import { defaults } from './presets/defaults.json';
@@ -22,6 +27,10 @@ import maki from '@mapbox/maki';
 export var dataFeatureIcons = maki.layouts.all.all;
 
 export var data = {
+    community: {
+        features: ociFeatures,
+        resources: ociResources
+    },
     imagery: dataImagery,
     presets: {
         presets: presets,

modules/core/context.js

@@ -316,6 +316,7 @@ export function coreContext() {
         tile: false,        // tile boundaries
         collision: false,   // label collision bounding boxes
         imagery: false,     // imagery bounding polygons
+        community: false,   // community bounding polygons
         imperial: false,    // imperial (not metric) bounding polygons
         driveLeft: false,   // driveLeft bounding polygons
         target: false       // touch targets

modules/svg/debug.js

@@ -1,3 +1,5 @@
+import _values from 'lodash-es/values';
+
 import { select as d3_select } from 'd3-selection';
 
 import { geoPolygonIntersectsPolygon } from '../geo';
@@ -20,6 +22,7 @@ export function svgDebug(projection, context) {
         var showsTile = context.getDebug('tile');
         var showsCollision = context.getDebug('collision');
         var showsImagery = context.getDebug('imagery');
+        var showsCommunity = context.getDebug('community');
         var showsImperial = context.getDebug('imperial');
         var showsDriveLeft = context.getDebug('driveLeft');
         var showsTouchTargets = context.getDebug('target');
@@ -34,6 +37,9 @@ export function svgDebug(projection, context) {
         if (showsImagery) {
             debugData.push({ class: 'orange', label: 'imagery' });
         }
+        if (showsCommunity) {
+            debugData.push({ class: 'blue', label: 'community' });
+        }
         if (showsImperial) {
             debugData.push({ class: 'cyan', label: 'imperial' });
         }
@@ -71,7 +77,7 @@ export function svgDebug(projection, context) {
 
 
         var layer = selection.selectAll('.layer-debug')
-            .data(showsImagery || showsImperial || showsDriveLeft ? [0] : []);
+            .data(showsImagery || showsCommunity || showsImperial || showsDriveLeft ? [0] : []);
 
         layer.exit()
             .remove();
@@ -102,6 +108,17 @@ export function svgDebug(projection, context) {
             .attr('class', 'debug-imagery debug orange');
 
 
+        var community = layer.selectAll('path.debug-community')
+            .data(showsCommunity ? _values(data.community.features) : []);
+
+        community.exit()
+            .remove();
+
+        community.enter()
+            .append('path')
+            .attr('class', 'debug-community debug blue');
+
+
         var imperial = layer
             .selectAll('path.debug-imperial')
             .data(showsImperial ? [dataImperial] : []);

package.json

@@ -58,6 +58,7 @@
     "mocha-phantomjs-core": "^2.1.0",
     "name-suggestion-index": "0.1.5",
     "npm-run-all": "^4.0.0",
+    "osm-community-index": "~0.3.0",
     "phantomjs-prebuilt": "~2.1.11",
     "request": "^2.85.0",
     "rollup": "~0.57.0",