codeforboston / bostongreenmap Goto Github PK

After clicking on Boston Common locally:

Currently, if a user types in the name of the specific park they are looking for (with auto-fill), the map zooms to that park, but gives no specific indication of which park on the map it is. In some cases there are many parks visible on the same page. It would help if the pop-up with the name of the park and the 'Details' and 'Zoom' button showed up for the park of interest.

As part of the new design (https://s3.amazonaws.com/wmgardner.co/pdfs/BostonGreenSpaceDesign.pdf), we need to start with the new landing page, which includes data filters, carousels, and featured parks carousel.

• Carousel
• Park Filters (Neighborhood and Activity)
• Search box
• CSS arrow
• Footer (across all pages)
  • Twitter Feed (#BostonGreen hashtag)
  • Latest Park Picture

I'm having trouble getting Masonry into our RequireJS environment: http://masonry.desandro.com/appendix.html#requirejs

Does someone have experience here? The app says the Masonry class is undefined so clearly it's not being plugged by Require properly. Here is our Require code: https://github.com/codeforboston/bostongreenmap/blob/master/client/js/main.js

Thanks!

The three questions Select your neighborhood, Select your activity and Park name are confusing for users. Could we make it one open ended question? User que would say select your neighborhood, an activity or a park. The results would auto complete with options.

solutions?

• smaller icons
• dots (~16 different colors?)
• text labels only
• zoom depended
  #2 could solve this too: only show facility icons on park detail page

Depends on #5

We want the results page to paginate results instead getting everything from the server.

@Mr0grog has started this work, which can be seen in pull request #59. With only a few minor issues, this seems to be a good start for pagination in the front end.

We may need more information. The Backbone model needs to stop asking for data when it reaches the end of the queryset. @brucegarro, any thoughts?

Currently interaction and park rendering is done by integrating a topojson file with park geometries and attributes. While performance is decent with a limited number of parks, this solution is not scalable.

TileStache could help here by rendering parks as image tiles and attributes as UTFGrid to support user interaction.

Data integration

• evaluate vector tile layer (e.g. handling of park geometries accroos tile boundaries)
• setup TileMill project for park rendering
• add parks tile layer
• add utf grid layer for parks attributes

Installation

• install tilestache
• setup mapnik
• configure nginx vhost

Design:

• Non-activity factoids should be moved below the description region, and they should be smaller images
• Activities should remain in the Quick Facts as a carousel
• Featured image flag exists as a column in the database - should there be multiple featured images? Should they be randomized? How should this be designed to improve discoverability?

UI/UX Design:

• The filters should be dynamic, finding related records so that the user doesn't search for things that won't be there!

with favorite parks relation or editable parks for staff users

Masonry works well in other browsers except Firefox. In Firefox, it distributes images incorrectly, leaving large columns of white space unfilled.

In Firefox 34.0.5:

Correct behavior in Chrome:

Here is the relevant Masonry code: https://github.com/codeforboston/bostongreenmap/blob/master/client/js/app.js#L354-L360

Here is the relevant CSS code:
https://github.com/codeforboston/bostongreenmap/blob/master/client/scss/_results.scss

Relevant Handlebars template:
https://github.com/codeforboston/bostongreenmap/blob/master/client/templates/resultItem.hbs

And Masonry docs: http://masonry.desandro.com/

We need Firefox to place the images as they are placed in Chrome and other browsers. Any thoughts on what is causing this?

Here is some possibly related discussion: desandro/masonry#166 (comment)
This issue concerns percentage widths, so it doesn't seem relevant.

The image says it all: when typing, results come up, but the text in the textbox doesn't show up.

Precise enough and with GeoJSON output it eliminates the need for realtime re-projections.

Redirect main URL from bostongreenmap.org to bostongreenspacemap.org. When users go to any url it redirects to the bostongreenmap.org. Due to trademark issues we need to redirect users to bostongreenspacemap.org.

The third component for the redesign (https://s3.amazonaws.com/wmgardner.co/pdfs/BostonGreenSpaceDesign.pdf), includes a single page view.

• Recommended Spaces section
• Nearby Spaces section
• "Quick Facts" Icons - Noun Project?
• What are the buttons below the park descriptions?
• The "Favorites" button may be handled via local storage

Add an introductory modal to help users understand what to do first. Text should read something like: Get information about parks and open space in Metro Boston. Find your Space by selecting your neighborhood or city, an activity or search for a park by name. Click on a green space to get more information about the park and its facilities.

The second component, the results page, is a cascading grid of images. (See: https://s3.amazonaws.com/wmgardner.co/pdfs/BostonGreenSpaceDesign.pdf)

• Cascading grid
  • Masonry.js
• Park titles
  • Colors? Is there data?

I received a request to make some edits to the Magazine Beach record in Cambridge, including making the park accessible on the site - currently it is stuck underneath one of the Charles River Reservation shapes. I have tried adjusting the boundaries of the CRR so that it does not overlap, but I get an 'Internal Server Error' message when I try to save my changes. Not sure if it is my access level or something else. Thanks!

It looks like we have DCR park descriptions in Dropbox that needs to merge into app.

see demo at: http://jsbin.com/IxUwAhaz/1

When filtering parks in the API:
http://0.0.0.0:8000/parks/search?neighborhoods=15

The database returns, for example, Mystic River Reservation multiple times. The actual database table has these repeated entries, and they have unique ids, but I'm not sure why they are repeated and I don't want it to break the map.

So, how do we eliminate duplicate results and not break the map?

Depends on #5 (social login)

We've moved to Trello: https://trello.com/b/VbjYYbtx

UserVoice suggestion: "Allow the selection of multiple activities. Show only icons for the selected activities."

Rename Boston neighborhoods to something like "Boston: Beacon Hill" or so.

We don't completely know the API yet. Bruce is helping us make the API conform more to JSON API standard (http://jsonapi.org/).

• Fixture Data so frontend dev can continue
• Tweaking the API
• Additions to database
• User-submitted features via Facebook OAuth

remove registration

Hi !

I've put together a boston-greenery map with TileMill using some OpenStreetMap data: http://a.tiles.mapbox.com/v3/mapmeld.boston-greenery/page.html#13/42.3611/-71.0845

I open-sourced the tile code at https://github.com/mapmeld/boston-greenery

You could keep loading the vector data onto the map so people can search and click for information, while using the park tiles for the visual part

-- Nick

Shapefile import

There are a few Python Django things we need to change. We need the JSON responses to include more data. They are listed here: https://trello.com/c/rH1ORkeh

This concerns this Python code: https://github.com/codeforboston/bostongreenmap/blob/master/parks/views.py#L72-L107

BostonGreenMap already has a great map built, and we'd like to integrate it into the photo-based design.

Currently, a Leaflet map (of London) is built into the view, but none of the great features from the previous map are built in. We'd like to start with the individual park view, showing:

1. Park's geometry
2. Park activities

Currently, there's a static topojson of all the parks in /parks. The old map filtered this topojson file. This could work for this iteration as well.

Eliminate duplicated activities from select list: Hockey and Walking / Hiking.