Issue 1229 Add Zoning Index Layer to ZOLA

app/components/layer-palette.js

@@ -1,3 +1,5 @@
+/* eslint-disable ember/require-tagless-components */
+/* eslint-disable ember/classic-decorator-hooks */
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';

app/templates/components/layer-palette.hbs

@@ -76,6 +76,8 @@
         </ul>
       {{/if}}
     </container.layer-group-toggle>
+    {{!-- template-lint-disable no-log --}}
+    {{log "layergroups" this.layerGroups}}
     <container.layer-group-toggle
       data-test-toggle-zoning-districts
       @layerGroup={{this.layerGroups.zoning-districts}}
@@ -96,7 +98,7 @@
     <container.layer-group-toggle
       data-test-toggle-commercial-overlays
       @layerGroup={{this.layerGroups.commercial-overlays}}
-      @activeTooltip={{zoom-dependent-label this.layerGroups.commercial-overlays this.zoomWarningLabel this.mainMap.zoom}}>
+      @activeTooltip={{zoom-dependent-label this.layerGroups.commercial-overlays}}>
       <ul class="layer-menu-item--group-checkboxes">
         {{#each this.commercialOverlaysOptionSets as |optionSet|}}
           <li>
@@ -109,6 +111,10 @@
         {{/each}}
       </ul>
     </container.layer-group-toggle>
+    <container.layer-group-toggle data-test-toggle-zoning-map-index
+      @layerGroup=  {{this.layerGroups.zoning-map-index}}
+      @activeTooltip={{zoom-dependent-label this.layerGroups.zoning-map-index }}>
+    </container.layer-group-toggle>
     <container.layer-group-toggle
       data-test-toggle-zoning-map-amendments
       @layerGroup={{this.layerGroups.zoning-map-amendments}}

app/templates/features.hbs

@@ -16,7 +16,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/search-history.gif" target="_blank">
+      <a href="/img/slideshow/search-history.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/search-history.gif" alt="A video showing the search history functionality" />
       </a>
     </div>
@@ -32,7 +32,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/side-by-side.gif" target="_blank">
+      <a href="/img/slideshow/side-by-side.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/side-by-side.gif" alt="A video showing the tax lot comparison functionality" />
       </a>
     </div>
@@ -48,7 +48,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/bookmark-layer-sets.gif" target="_blank">
+      <a href="/img/slideshow/bookmark-layer-sets.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/bookmark-layer-sets.gif" alt="A video showing the layer bookmark functionality" />
       </a>
     </div>
@@ -64,7 +64,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/relevant-links.gif" target="_blank">
+      <a href="/img/slideshow/relevant-links.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/relevant-links.gif" alt="A video showing the relevant links functionality" />
       </a>
     </div>
@@ -80,7 +80,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/multiple-measurements.gif" target="_blank">
+      <a href="/img/slideshow/multiple-measurements.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/multiple-measurements.gif" alt="A video showing the multiple measurement functionality" />
       </a>
     </div>
@@ -96,7 +96,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/toggle-sidebar.gif" target="_blank">
+      <a href="/img/slideshow/toggle-sidebar.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/toggle-sidebar.gif" alt="A video showing the sidebar toggle functionality" />
       </a>
     </div>
@@ -112,7 +112,7 @@
   </h2>
   <div class="grid-x">
     <div class="cell medium-3 feature-image-cell">
-      <a href="/img/slideshow/toggle-all-layers-off.gif" target="_blank">
+      <a href="/img/slideshow/toggle-all-layers-off.gif" target="_blank" rel="noopener noreferrer">
         <img class="feature-image" src="/img/slideshow/toggle-all-layers-off.gif" alt="A video showing the all layer toggle button functionality" />
       </a>
     </div>
@@ -123,7 +123,7 @@
     </div>
   </div>
   <hr />
-  
+
   <h1>
     Features
   </h1>

config/environment.js

@@ -77,6 +77,7 @@ module.exports = function (environment) {
       { id: 'tax-lots', visible: true, layers: [{ tooltipable: true }] },
       { id: 'landmarks', visible: false },
       { id: 'e-designations', visible: false },
+      { id: 'zoning-map-index', visible: false },
     ],
 
     specialDistrictCrosswalk: [

public/layer-groups.json

@@ -530,6 +530,37 @@
         }
       }
     },
+    {
+    "type": "layer-groups",
+      "id": "zoning-map-index",
+      "attributes": {
+        "id": "zoning-map-index",
+        "title": "Zoning Map Index",
+        "visible": false,
+        "title-tooltip": "This layer displays an index of 126 zoning map sections that are part of the NYC Zoning Resolution. Each section is identified by a unique number and covers an area of 8,000 feet by 12,500 feet of the City. Click on a section to view and print the corresponding zoning map",
+        "infolink": "https://s-media.nyc.gov/agencies/dcp/assets/files/AE/about-zoning-maps.pdf",
+        "legend-icon": "polygon",
+        "legend-color": "#000000"
+      },
+      "relationships": {
+        "layers": {
+          "data": [
+            {
+              "type": "layers",
+              "id": "zmi-line"
+            },
+            {
+              "type": "layers",
+              "id": "zmi-label"
+            },
+            {
+              "type": "layers",
+              "id": "zmi-fill"
+            }
+          ]
+        }
+      }
+    },
     {
       "type": "layer-groups",
       "id": "community-districts",
@@ -6413,6 +6444,115 @@
         "highlightable": true,
         "tooltip-template": "{{{project_na}}} - Effective {{{effectiveformatted}}}"
       }
+    },
+    {
+      "type": "layers",
+      "id": "zmi-line",
+      "attributes": {
+        "style": {
+          "id": "zmi-line",
+          "type": "line",
+          "source": "supporting-zoning",
+          "source-layer": "zoning-map-index",
+          "paint": {
+            "line-width": {
+              "stops": [
+                [
+                  11,
+                  1
+                ],
+                [
+                  12,
+                  3
+                ]
+              ]
+            },
+            "line-color": "#000000"
+          }
+        }
+      }
+    },
+    {
+      "type": "layers",
+      "id": "zmi-label",
+      "attributes": {
+        "style": {
+          "id": "zmi-label",
+          "type": "symbol",
+          "source": "supporting-zoning",
+          "source-layer": "zoning-map-index-centroids",
+          "paint": {
+            "text-color": "rgba(200, 0, 0, 1)",
+            "text-halo-color": "#FFFFFF",
+            "text-halo-width": 2,
+            "text-halo-blur": 2,
+            "text-opacity": 0.9
+          },
+          "layout": {
+            "symbol-placement": "point",
+            "text-field": "{zmi_label}",
+            "text-padding": 8,
+            "text-allow-overlap": true,
+            "text-font": [
+               "Arial Unicode MS Regular"
+            ],
+            "text-size": {
+              "base": 1,
+              "stops": [
+                [
+                  8,
+                  10
+                ],
+                [
+                  16,
+                  18
+                ],
+                [
+                  20,
+                  24
+                ]
+              ]
+            }
+          }
+        },
+        "before": "place_other"
+      }
+    },
+    {
+      "type": "layers",
+      "id": "zmi-fill",
+      "attributes": {
+        "highlightable": true,
+        "clickable": true,
+        "tooltipable": true,
+        "tooltipTemplate": "Zoning Map Index {{{zmi_label}}}",
+        "style": {
+          "id": "zmi-fill",
+          "type": "fill",
+          "source": "supporting-zoning",
+          "source-layer": "zoning-map-index",
+          "paint": {
+            "fill-color": "#000000",
+            "fill-opacity": {
+              "stops": [
+                [
+                  15,
+                  0.1
+                ],
+                [
+                  16,
+                  0.1
+                ]
+              ]
+            },
+            "fill-antialias": true
+          },
+        "highlightable": true,
+        "clickable": true,
+        "tooltipable": true,
+        "tooltip-template": "{{{zmi_label}}}"
+        }
+      }
     }
   ],
   "meta": {