• Maps in Openplans

last modified January 22, 2008 by sonali

Maps in OpenPlans

links:
map graphics bank
design reviews
rolando's feedback

Summary

Add mapping / geolocating capability to openplans AND/OR to NYCSR/Upper West Side streets.

* Visualize projects and people on a map of NYC
* Invite all users to add information on this one large map of NYC
* Add map-based search and navigation for projects and people

Mission-driven objectives

Strengthen the "sense of place" inside OpenPlans is a website about people making change in real places; therefore, we should be able to visualize that activity.
OpenPlans is very much a place-based site, so mapping and location-specific information should be included in nearly every aspect of the site.

User stories

STEP 1:
  • Martin visits openplans.  On a collective OpenPlans page, he sees a map of his local area (OR NYC), with new OpenPlans members and projects highlighted.  He feels a powerful surge of pride at the level of grassroots change happening in his community.
  • Elliot logs into openplans, and goes to the volunteer project he's been managing.  In his project preferences he can now add the specific location or area of intervention of his project. He can also add his own location as a individual user. These 2 newly added points show up in the general OpenPlans map.
STEP 2:
  • Martin logs into his openplans account.  On the collective OpenPlans map, he can finally report his street corner as a particular dangerous one for pedestrians. He can also see where other people have identified similar intersections.  He feels a powerful surge of pride at the level of grassroots change happening in his community.
STEP 3:
  • Martin logs into his openplans account.  On his home screen, he sees a map of his local area, with new OpenPlans members and projects highlighted.  He feels a powerful surge of pride at the level of grassroots change happening in his community.
  • Elliot logs into openplans, and goes to the volunteer project he's been managing.  On the project map, he can see all of his existing volunteers, as well as new members of openplans who either aren't part of his project, or have recently joined.  He clicks on a new member and sends them a link with info about his project.
  • Carolina visits OpenPlans and does a search for organizations that are similar to hers.  She goes to the projects map, clicks on the "pedestrian/bike" tag to see other projects under that topic.  She gets back a US map full of projects.  She clicks "BikePortland" in Oregon, and checks out that project page.  It turns out they're doing some of the same stuff she is!

Functional objectives

  • Have location information associated with Projects and people that can be used to map their location.
  • Any visitor can see a map of all people or projects. Some thumbnail version of this map should be available on the home page of the site. There should be a full page view of the map for detailed navigation/interaction similar to the current OpenLayer demo.
  • This collective map should produce a text-based feed (similar to a History) with details of recent additions and revisions.
  • The map of all people and projects can be searched by location and used as a navigational element.
  • Any logged in user can access a collective map where they can add notes (different types of info to follow later).

Tasks

Front end javascript team

Login interaction from within window (tc)

Drop down edit toolbar when 'edit' is hit (tc)

History pop up when history is hit (seb)

Put latest nymap openlayers on stella.openplans.org,  off of Tim's server

Work with openplans team to get your div inside their zope template stuff

After openplans team gets the project and people location selection going with gmaps then replace it with openlayers

Populate the pop-ups with the approriate user or project information by doing an API call from openplans based on the url given.

Investigate performance, if we need to do batch calls to get all the information at once, or if we can do it one by one.

Backend GeoServer team

Deploy geoserver with new york map on stella.openplans.org,  off of Arne's server

Deploy with the new authentication stuff, make sure it records users properly with transactions

Set up two versioned tables - 'users' and 'projects'.  Users needs a point, a user name and a url.  Projects initially need a point, but try to make it a 'geometry' type and see if you can get it to take both points and polygons in the same table. 

Set up a caching system.  Varnish is fine if you want to play with that.  

Pre-cache the full basemap, tilecache has the means to seed the cache and all, just running through and making all the requests

Get stella1 stella2 artois1 and artois2 to resolve to the servers, so we can have the client refer to all of them and make more requests.  Basically do everything discussed in http://docs.codehaus.org/display/GEOSDOC/TileCache+Tutorial   

Get stella and artois clustering.  Initially just to serve up the map, as that should be easier.  Then can get the users and projects tables on and syncing properly.  Investigate slony for postgres replication.



UI Details, Phase 1

All ongoing wireframe source documents is attached to this page.

PART 1: Main Map components

*1 - MARKERS

* 1 distinct Marker for people,  1 marker for projects, 1 marker for notes. Actual graphic to be defined still. This is just a direction.

* For now, only the Notes marker will come in a variety of colors defined by the type of note (not user selected) --details in the Notes section, Part 3.

* Letters are printed inside the marker when they need to be referenced in a list (ex: List of search results visualized on a map.

maps_markers01.0.jpg

 

About marker bundles
Details probably need to be worked out in prototyping. Basic idea follows (see Flickr geo-tagging map for a great inspiration):

  • If markers overlap at a certain zoom level, replace them by a bundle.
  • The max size of a bundle should be of XXX (maybe 20?, maybe 99?).
  • Roll-over on a bundle describes the types of contents in a bundle. Ex. 20: 13 persons, 4 projects, 3 notes.
  • Clicking on a bundle takes user to a zoom level where all markers can be comfortably displayed (ie. clicked on a small resolution screen). That zoom jumps should not exceed XXX (5x?). If needed, a content bundle clicked would bring you to another series of content bundles until markers can be comfortably displayed.

    About editing a marker's position

    • Maker lifts when dragged.
    • Small X under marker to identify position (see sample on the Locate on map page).
    • ... Maybe we don't need the bounce when the marker is dropped.

     Who and when can a marker's position be edited

    (this is only relevant for notes at this stage)

    ­We want to keep things item-modal . In summary:
    "we could have an item-specific move "mode" accessible through a feature's popup.  A popup could have a "move this note" link on it, which shrinks the popup down to a tiny size (perhaps with a button or two for "Done" and "Cancel") and then allows the user to move the note.  It could be moved either with a click-drag-release workflow, or the feature could "become" the cursor, as when one adds a pointer in MyMaps."

    View maps part 1 for interface details.
     

    *2 - NAVIGATION INSIDE THE MAP

    1. Move right, left, up, down. Zoom in, Zoom out. Is there a standard number of zoom levels? 10?  

    2. [not top priority] Short cut to location. Enter a location and the map automatically goes there. As long as the locations are limited, this open search could be replaced by a open field/drop-down menu/auto-fill. 

    3. Mini map, bottom right. Zoom level/5. Static on NYC for the NYCSR instance. You Are Here square should be proportional to larger map displayed + draggable.

     maps_navigation01.1.jpg

     

     

    *3 - SIDEBAR DETAILS

    Add Note and Login button live on the top left of the map. These three in combination are persistent navigation. 

    maps_nav01.png 

    Details of Main Map - Title, Description, Comments, Layers and History. This is the top level overview information on the map.

    1. The Layers allow the user to toggle multiple set of data that has been recorded on the map. 
    2. Comments and History both are related to the map not a note.  

    maps_nav02.png

    Add a Note and Popup Detail.

    1. To add a note the user will drag and drop it onto the map.
    2. The user has 4 or 5 predefined note types. (we need to define these from the users...)
    3. The user can Delete, Move, Save or Cancel the note.
    4. Move: will close the popup - move it to the new location and reopen the popup
    5. The user can also type in the street location and city that will place the note in a specific address

      maps_nav03.png 

      Edit a Note. 

      1. When a Note is created features such as Comments, History and Share are all appended to it.
      2. The navigation in the bottom of the popup allows the user to view comments, history and sharing information.
      3. The user is also able to delete, move, save or cancel the edits.

      maps_nav04.png 

      Comments Details: View and Leave a Comment

      1. When the user clicks on the Comments link in the popup or in the comments tab of the side bar this area is opened up.
      2. There is a link to the RSS feed of comments.
      3. Meta data of person who commented, date and time is available.
      4. Description of the comment.
      5. Once the user scrolls down to the end of the comments there is a Leave a Comment form. 

      maps_nav05.png  maps_nav06.png

      History - Pinning the map down so that onion skin can be drawn for a particular Note.

      1. The user goes to the History link by either clicking on "history" in the popup or on the "History Tab" 
      2. On doing so the map grays out and a series nodes appear indicating the history of that Note.
      3. If there are multiple instances of a Note their opacity increases with the progression of the note.
      4. On clicking any one of the instances the hisotry of that instance pops up.
      5. The user can revert to a previous instance - making it the latest one. This does not override any of the instance of this Note.
      6. The user can also subscribe to the RSS feed of History.


      maps_nav07.png
       

       

       

      PART 2: Projects and People select a position on the map

      View details here: Locate on map .
      Mostly work on current version of openplans.org / furture version of SPUTNIK etc. Recommendation is to use similar engine as uncivil servants.org.


      PART 3: All people and projects entered appear on Home page map

       

      General Idea. The map appears on the home page of Openplans.org/NYCstreets.org and is navigable. 

       

      map_onhome01.jpg

       

      map_onhomedetails01.1.jpg

      * This map contains:

      • people & projects
      • bundles (when ready)
      • navigation --probably in the first round, the search location and the mini-map are NOT useful at this scale.
      • IMPORTANT: The small [+] on the top right links to the view of the full page map, editable by everyone. On roll-over the [+] reveals a small label with the following text "VIEW MAP FULL PAGE".
      • Do we display Notes on this view? tbd as we go


      * Details of Tags
      This should be same as/ or close to "people badges" and soon to be "project badges".
      maps_tagsdetails01.jpg
      Project tag displays:
      - Picture of project (when available)
      - Project name as link to the project's home page
      - Icon to identify this is a project (not sure if redundant)
      - First XXX characters of the mission statement
      - Number of members
      - Last date updated

      Picture tag displays:
      - Picture of user (if available)
      - Username
      - User full name
      - User's location (redundant?)

      [X] to close tag. One tag opens on the map at a time.  Opening a tag when another one is already opened closes the previous one automatically. 


      PART 4: One large collective map (pre-wiki map) with notes

      map_large01.jpg

      VIEW all specs and details: Pre-wiki mapping., includes all details on Notes.




      UI Details, Phase 2

      • 'geo search' - what does this mean?  What kind of searches do you want to enable?  What kind of results do you want back?
        visualize results on a map + browse for things through a map on the home page.

        Maps as search : view details of UI --in progress.


      ideas for next steps

      • History feed on additions and revisions:  What information?  How should interaction work?  Draggable window?  Pop up?  ect.  Ideally we need a mock-up of what the 'history' button does.  We have the concept of a 'commit message' do we want something like 'project created', 'project updated', 'user cholmes joined' to be automatically generated on edits?  It should be possible, just need feedback on what the messages should be.
      • Layer switching - do we want people to be able to turn off people or projects layers?  Do we want them to display just certain kinds of annotations?  How do these different maps come together?  Do we have one map that shows people and projects and annotations?  What does the graphic for layer switching look like?  There are some in openlayers, but would be nice to not use their same styles. 

      Longer term

      • Photo upload.  I saw a nice way of doing it, have the interaction that now is a window for the image upload take place in the pop-up directly as another tab. 
      • Rollback/history interaction
      • Interaction for editing interaction and for generalizations - what information to show, do it automatically or let users have some control?  ect.

      OpenPlans.org team

      Put the gmaps geocoding thing on the projects and user pages, and save that location 

      Program in a hook that on submission of user or project location data sends the location, name (user or project) and url to retrieve more information from to the server on stella.openplans.org (as a WFS transaction, we will give you the xml that needs to be sent)

      Get the openlayers div from the front end team and put it into a template and in the location it should live.  Make sure it hooks up right to all the interactions they need.

      JSON results of project and people information, like an API to get at those things so we can display them on the map, of the things the UI team wants to display

      May need an API to do a batch call to get a bunch of user/project information at once, to display it efficiently, not having to do a request each time.