Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added icons with links #1179

Merged
merged 4 commits into from
May 8, 2024
Merged

Added icons with links #1179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e1c32ab
Added icons with links
dhochbaum-dcp Mar 11, 2024
8454336
Removed delay hiding tooltip, added icon spacing and wrapping
dhochbaum-dcp Apr 8, 2024
96410d2
Removed cyclomedia button from bottom of tax lot page, as it is now l…
dhochbaum-dcp Apr 8, 2024
fa2ab72
Changed link order, re-implemented hide delay for hover messages that…
dhochbaum-dcp Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion app/components/layer-record-views/tax-lot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,13 @@ export default class TaxLotRecordComponent extends LayerRecordComponent {
return `${boroLookup[cdborocode]} Community District ${cd}`;
}

get boroSlashCd() {
const borocd = this.model.cd;
const cdborocode = `${borocd}`.substring(0, 1);
const cd = parseInt(`${borocd}`.substring(1, 3), 10).toString();
return `${boroLookup[cdborocode].replace(' ', '-').toLowerCase()}/${cd}`;
}

get cdURLSegment() {
const borocd = this.model.cd;
const borocode = this.model.borocode; // eslint-disable-line prefer-destructuring
Expand All @@ -333,6 +340,13 @@ export default class TaxLotRecordComponent extends LayerRecordComponent {
return `${cleanBorough}/${cd}`;
}

get googleMapsURL() {
const encodedAddress = encodeURIComponent(
`${this.model.address}, ${this.model.zipcode}`
);
return `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
}

get landusename() {
return landuseLookup[this.model.landuse];
}
Expand Down Expand Up @@ -441,7 +455,9 @@ export default class TaxLotRecordComponent extends LayerRecordComponent {
}

get digitalTaxMapLink() {
return `https://propertyinformationportal.nyc.gov/parcels/${this.model.condono ? 'condo' : 'parcel'}/${this.model.bbl}`;
return `https://propertyinformationportal.nyc.gov/parcels/${
this.model.condono ? 'condo' : 'parcel'
}/${this.model.bbl}`;
}

get zoningMapLink() {
Expand Down
74 changes: 71 additions & 3 deletions app/templates/components/layer-record-views/tax-lot.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
{{this.model.address}}, {{this.model.zipcode}}
</span>
</h1>
<p class="text-small dark-gray">
<p class="text-small dark-gray" style="margin-bottom: 0.5rem">
{{this.boroname}}&nbsp;(Borough {{this.model.borocode}})

<span class="pipe">
Expand All @@ -34,6 +34,75 @@
Lot
{{this.model.lot}}
</p>

<div style="color: #ae561f; font-size: 1.25rem; display: flex; flex-flow: row wrap; gap: 1.25rem;">
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - ZAP" preventDefault=false}} href="https://zap.planning.nyc.gov/projects?applied-filters=dcp_publicstatus%2Cdistance_from_point%2Cradius_from_point&distance_from_point={{this.model.lon}}%2C{{this.model.lat}}">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{0}}>
View nearby projects in the Zoning Application Portal
</EmberPopover>
<FaIcon @icon="bolt" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - PFF - Default (CD)" preventDefault=false}} href="https://popfactfinder.planning.nyc.gov/explorer/districts/{{this.model.cd}}">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{250}}>
View Decennial Census and ACS data for the
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - PFF - Boro" preventDefault=false}} href="https://popfactfinder.planning.nyc.gov/explorer/boroughs/{{this.model.borocode}}">Boro</a>,
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - PFF - CD" preventDefault=false}} href="https://popfactfinder.planning.nyc.gov/explorer/districts/{{this.model.cd}}">Community District</a>, <br />
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - PFF - CCD" preventDefault=false}} href="https://popfactfinder.planning.nyc.gov/explorer/ccds/CCD{{this.model.council}}">City Council District</a>, and
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - PFF - More Geo Types" preventDefault=false}} href="https://popfactfinder.planning.nyc.gov/">more geographic area types</a> in Population FactFinder
</EmberPopover>
<FaIcon @icon="users-between-lines" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - Streets" preventDefault=false}} href="https://streets.planning.nyc.gov/about?lat={{this.model.lat}}&layer-groups=%5B%22amendments%22%2C%22citymap%22%2C%22pierhead-bulkhead-lines%22%2C%22street-centerlines%22%5D&lng={{this.model.lon}}&zoom=15">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{0}}>
View the street map for the area
</EmberPopover>
<FaIcon @icon="road" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - CPE - Default (Capital Projects)" preventDefault=false}} href="https://capitalplanning.nyc.gov/">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{250}}>
View nearby
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - CPE - Capital Projects" preventDefault=false}} href="https://capitalplanning.nyc.gov/map/capitalprojects">Capital Projects</a>,
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - CPE - Housing Development" preventDefault=false}} href="https://capitalplanning.nyc.gov/map/housing">Housing Development</a>, <br />
and <a target="_blank" onclick={{action this.captureOutboundLink "Icons - CPE - Facilities" preventDefault=false}} href="https://capitalplanning.nyc.gov/map/facilities">Facilities</a> in Capital Planning Explorer
</EmberPopover>
<FaIcon @icon="dollar-sign" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - CD Profiles" preventDefault=false}} href="https://communityprofiles.planning.nyc.gov/{{this.boroSlashCd}}">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{0}}>
View data for the community district in Community District Profiles
</EmberPopover>
<FaIcon @icon="people-roof" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - EDDE - Default (Home)" preventDefault=false}} href="https://equitableexplorer.planning.nyc.gov/">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{250}}>
View
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - EDDE - Citywide" preventDefault=false}} href="https://equitableexplorer.planning.nyc.gov/data/citywide/nyc/demo/tot">Citywide</a>,
<a target="_blank" onclick={{action this.captureOutboundLink "Icons - EDDE - Boro" preventDefault=false}} href="https://equitableexplorer.planning.nyc.gov/data/borough/{{this.model.borocode}}/demo/tot">Borough</a>,
and <a target="_blank" onclick={{action this.captureOutboundLink "Icons - EDDE - CD" preventDefault=false}} href="https://equitableexplorer.planning.nyc.gov/">Community District</a> <br />equity data in the Equitable Development Data Explorer
</EmberPopover>
<FaIcon @icon="equals" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - Cyclomedia" preventDefault=false}} href="https://roadview.planninglabs.nyc/view/{{this.model.lon}}/{{this.model.lat}}">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{0}}>
View this address in Cyclomedia Street View
</EmberPopover>
<FaIcon @icon="street-view" />
</a>

<a target="_blank" onclick={{action this.captureOutboundLink "Icons - Google Maps" preventDefault=false}} href="{{this.googleMapsURL}}">
<EmberPopover @side="top" @popperContainer="body" @popoverHideDelay={{0}}>
View this address in Google Maps
</EmberPopover>
<img src="/google-maps-icon.svg" style="max-height: 1.25rem; max-width: 1.25rem; height: 1.25rem;" />
</a>
</div>

{{#if this.model.zonedist1}}
<ul class="lot-zoning-list">
<li class="menu-text">
Expand Down Expand Up @@ -570,5 +639,4 @@
</div>
{{/if}}
</section>
<hr class="hide-for-print" />
<RoadView @lon={{this.model.lon}} @lat={{this.model.lat}} />

7 changes: 7 additions & 0 deletions config/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ module.exports = function () {
'tree',
'undo',
'window-minimize',
'dollar-sign',
'street-view',
'bolt',
'equals',
'users-between-lines',
'road',
'people-roof',
],
};
};
10 changes: 10 additions & 0 deletions public/google-maps-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading