nationalparkservice / places-data

Data from the Places system.
http://www.nps.gov/npmap/tools/places/
13 stars 5 forks source link

Demonstrate POI Vector Overlay #380

Open mtaylorlong opened 8 years ago

mtaylorlong commented 8 years ago

With the beta relase of Park Tiles 3, GIS staff at parks and regions identified concerns about certain types of POI's not showing up by default in Park Tiles 3. Park Tiles has always been, first and foremost, a basemap, designed with enough simplicity that a range of data types could be overlaid for custom maps. As such, we've always struggled with the addition of POI symbols – some are so important they probably belong on all maps, but in many cases, the POI's displayed need to be customized to the intention of the map.

Initially, we worked with Harper's Ferry Center to cartographers to develop a short list of 13 POI types to display by default in Park Tiles:

Based on feedback about the limitations of this set of POI's, we've determined that no simple set of POI's will suffice for all parks, especially if they're asked to put the map on their website as a replacement for the HFC brochure map. Therefore, we believe that POI vector overlays are the only way to meet parks' needs.

We plan to develop a POI vector overlay demonstration, and release it to coincide with the first update to Park Tiles 3 Beta (3.0.1). The vector overlay will allow for the display of all available POI's in the NPS Places DB. POI's will be displayed as a teardrop (for now) and where symbols are available in the NPMap Symbol Library, the symbol will be placed within the teardrop. The vector overlay approach will allow for the creation of a dynamic legend in which POI types can be turned on and off.

Phase 1 will focus on getting all the POI's to show up on a map with available symbols. Phase 2 will focus on incremental display and/or clustering of POI's, and a simple solution for parks to customize their list of POI's and how they display.

@nateirwin will lead the development of POI vector overlays, with support from @cwlawlis802, @mtaylorlong, and @jakecoolidge.

mtaylorlong commented 8 years ago

In anticipation of the POI vector overlay solution, @jakecoolidge and @mtaylorlong have identified 20+ HFC symbols to add to our NPMap Symbol Library. We believe that after the addition of these symbols, our library will support the majority of POI's parks are interested in using.

mtaylorlong commented 8 years ago

Update: The new symbols have been added to our symbol library and rolled into NPMap.js. So we're ready to demo POI overlay.

mtaylorlong commented 8 years ago

Wireframes for POI Overlay Viewer

What follows is a rough mock-up of how the POI overlay would be implemented in a public-facing map. I'm calling this the POI Overlay Viewer to distinguish it from the Editor that parks can use to customize their list. We can tackle the viewer first, then move on to the editor.

Overview: Vector POI's are clickable, so adding a legend isn't necessarily mandatory, but it's helpful. As such, I think the default view of our maps should hid the POI legend, but it should be something the viewer can expand if desired. Since the number of POI types could be quite large, I think it's better to commit to a full panel on the left than trying to squeeze everything into a more traditional small legend at the bottom left of the map viewer.

Left Panel Hidden (Default) poi-viewer-1-closed

Left Panel Expanded poi-viewer-2-open

Left Panel Contents With nearly 300 poi types (and the list will no-doubt, keep growing), I think it's important to limit the users exposure to unnecessary symbol types in the left panel. I suggest we make the panel show only those POI types in the current map view.

Selected POI Type poi-viewer-3-select

We still have many POI types with no corresponding symbol that will be shown as a generic dot marker on the map. If the user is interested in a particular type of obscure POI, say Cannons, since we don't have a marker, they can't see all the cannons with a visual scan. The simplest solution for this is to allow them to select Cannons in the left panel and single out just those POI's on the map.

@nateirwin, @jakecoolidge, @cwlawlis802, @jimmyrocks: Questions, comments, concerns?

chadlawlis commented 8 years ago

At first glance I like this. I think a legend would be helpful to complete the "Viewer" experience.

Design-wise, I might make one change - cutting the height of the sidebar down, responsive to the number of rows listed:

ce1a6426-c5d0-11e5-955f-a042d808877a

I might also make this semi-transparent, to increase the map real estate on the viewable page.

Overall looks good to me.

mtaylorlong commented 8 years ago

@cwlawlis802: Cutting down the height and making the left panel transparent would be cool. I'm assuming Nate will want to rely on some of the existing modules in npmap.js, so maybe those items can be put on the wish list.

Nate and I discussed this a bit more and clarified a few points:

What shows up in the side-bar: I wondered about including in the left panel all the POI types within view, whether or not they were actually displaying at a particular zoom level. Nate explained that pulling that off would complicate things, so for now, the list of POI types in the panel is simply pulled from which types are currently displaying on the screen.

What's in the panel when there are no POI's: When no POI's show in the screen, we'll include a small note in the panel. Here's what I was thinking.

Zoom in to view points of interest.

@nateirwin: Does that sounds good to you?

What happens when you click a POI type in the panel: I had a number of overly complicated ideas for how the clicking could work, but we decided that the simplest solution was that clicking on a POI type singles out that type on the map. Example: If I click on Visitor Centers as a type, I'll only see the visitor center POI's. Clicking again on the type, returns the map to it's normal view. Clicking on another type singles out that set of POI's. This is the simplest way to help people find POI types that don't have a corresponding symbol.