Map - Display NC names in tooltip/on overlay

[adamkendis]

Description

Currently with 'Neighborhood Council Boundaries' overlay selected, NC name/region will display in a popup when an NC is clicked on the map. This should be changed to display the NC name in a tooltip when an NC is hovered and the map is zoomed out. When zoomed in, the hover tooltips should be disabled and the NC name should be rendered directly on the map.

Action Items

• [x] Update Neighborhood Council Boundaries layer (Choropleth) to display the tooltip on hover instead of on click when map is zoomed out. Appropriate zoom level breakpoint should be determined.
• [x] Disable hover tooltips when map is zoomed in.
• [x] Add NC names directly to map when zoomed in. Ensure names are distinct and clearly visible on both streets and satellite tile layers.

Resources

Zoomed in:

[JRHutson]

@adamkendis I've been looking into the options currently available with Leaflet. There was a label method that has been depreciated. divIcon will let you create an icon with HTML text and tie it to a marker though.

Is there a style already for the white text with a black outline?

It should be fairly straightforward to put the tooltip into one layer and markers with the NC Name in another and then switch between them at a specific zoom level.

map.on('zoomend', function() { if (map.getZoom() <14){ map.removeLayer(markerLabelLayer); map.addLayer(toolTipLayer); } else { map.addLayer(markerLabelLayer); map.removeLayer(toolTipLayer); } });

Placing the text marker in the center of what is currently visible of a NC, as shown for Downtown and Historic Cultural North in the screenshot, will probably take more effort. Would placing the marker in the center of the polygon be ok as a start?

[adamkendis]

@JRHutson I think placing the NC name marker in the center of the polygon is definitely fine for now. I copied a link to the Figma mockups below. Clicking on the NC name text in the mockup should display all the CSS - you might need to sign in to view it.

We've been using https://www.npmjs.com/package/react-leaflet-choropleth for the NC boundaries layer. I haven't looked into it but maybe it has a way to label the polygons (though unlikely since the leaflet label method has been deprecated). Your approach seems simple enough to implement otherwise.

A few thoughts:

• We should probably only have the NC tooltips/names on overlay when the NC boundaries layer is enabled by the user (enabled by default).
• It would be good if the code is reusable so we can quickly extend the same functionality to city/business district layers in the future.
• NC names on the map when zoomed in should appear underneath any overlapped pins.

Thanks for looking into this.

https://www.figma.com/file/9RJJyaGAdT5hcRuv9PUMOY/311-Wireframe-v1.0?node-id=2972%3A103533

[JRHutson]

Have the Tooltip responding to Mouse Over and only appearing when zoomed out. Working on creating a DivIcon layer to place NC names when zoomed in.

[adamkendis]

Functionality is good. Fixed linting errors, removed unused imports. I need to update styling for map NC tooltips and display names. ETA 7/28.