976330 - Build a geographic data input UI for profile edit page

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

When we add true geolocation fields we will need some UI work including code for the profile create/edit page.

Specs:
* Country is required. 
* Region is optional, and some countries don't have regions.
* City is optional.
* A user shouldn't be able to enter a region without a country. 
* A user shouldn't be able to enter a city without a region, unless their country doesn't have regions.
* A user shouldn't be able to enter any random string: They should only be able to enter true place names. Another way to put this is that the data input in this UI must be geo-codable. 

Questions: 

* Should per-field privacy apply to each location field, or to all fields as a set?

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Addl specs:
    * On profile save, get and store the lat/lng of the geocoded data. 

Addl questions:
    * Is there map feedback? 
    * Can users enter their location information using their native language and characters? If so, would we convert that to some canonical form (probably Latin characters)?

Comment 2

[Wray Bowling [:wbowling]]

Mapbox is proving to be a really intuitive interface to getting geocoded locations from a search box. I'm still working on collecting information from the results that come back from the selected location.

This fiddle works (mostly) in the forward direction of having map feedback.

http://jsfiddle.net/rgbk/JgmE3/6/

but the search button on the map is even more satisfying.

Comment 3

[Wray Bowling [:wbowling]]

I spent the better part of my day wrestling with the Mapbox API. I found some enlightening things.

Here's the demo.
http://jsfiddle.net/rgbk/JgmE3/9/


The Bad News

1. Despite Mapbox providing a geocoder, it does not always provide a bounding box for the result that it gets back. When a location is selected from the geocoder, the map tries to center around a bounding box provided. The outcome is that mapbox makes itself throw an error. I've asked their support team for help with this.

The Good News

1. Mapbox formats the results that come back in precisely the format we're after. Country, Province, and City.

Comment 4

[Wray Bowling [:wbowling]]

I narrowed the bug down as much as I could and made this stackoverflow question. Who knows. maybe there's a solution! http://stackoverflow.com/questions/22150881/mapbox-geocoder-results-dont-always-have-bounds

Comment 5

[Wray Bowling [:wbowling]]

As an alternative, I tried using a combination of GeoNames and Leaflet. Mapbox is built on top of Leaflet but adds some extra methods that I found made the Leaflet API more cluttered. Since I wasn't using the geocoder in Mapbox, it seemed fine to ignore those extra features and try pure leaflet.

http://jsfiddle.net/rgbk/dz3uh/2/

Right now, only the first result out of a maximum of 100 is centered on the map. It'll take just a few more hours to show more results and let the user pick one.

The "find me" button works pretty well using your IP address and the browser's geolocation function.

Comment 6

[Wray Bowling [:wbowling]]

Attachment: IMG_4273.JPG

Just so everyone knows, Dan and I had some great discussions about this feature this week. We agreed that having a map is important for those who are visual thinkers. Having a list of results is important for non-visual thinkers.

Seen in this whiteboard drawing top to bottom:
a search bar, results is a select drop-down or a sidebar list (depending on mobile or non-mobile), a map with a draggable pin and "locate me" button, and permissions for country/region/city separately.

Here's the latest work in progress fiddle:
http://jsfiddle.net/rgbk/dz3uh/11/

Comment 7

[Justin Crawford [:hoosteeno] [:jcrawford]]

Here's a jsfiddle demonstrating that mapbox may be a suitable source of placenames. 

http://jsfiddle.net/rgbk/JgmE3/13/ 

Next step is to identify issues with this and determine if they're blockers. And right after that we should get to integrating with actual Mozillians.org ui.

Comment 8

[Justin Crawford [:hoosteeno] [:jcrawford]]

Fiddle issue: the fiddle doesn't capture the full placename hierarchy for some places. Probably just a JS bug in the fiddle itself. Try typing "Mozambique" and picking one of the 2nd or 3rd results.

Comment 9

[Giorgos Logiotatidis [:giorgos]]

I run some tests 

athina -> correct zoom, no bounding box
αθήνα -> greek version of Athens. Returns only US results
athens -> correct zoom with bounding box

So local version doesn't work, what can you do next?
 1. Convert to latin chars, what we call greeklish (e.g. Athina)
    * There may be different ways to do that conversion, which complicates things
 2. Use the name Americans use for your city (e.g. Athens)
    *  If you know it.

and solutions 1 and 2 don't return the same result. 

This is fairly typical non-US, non-English problem though and I'm sure if there is a 100% working solution.

Comment 10

[Giorgos Logiotatidis [:giorgos]]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #9)
> This is fairly typical non-US, non-English problem though and I'm sure if
> there is a 100% working solution.

I'm *not* sure if there is a 100% working solution that is.

Comment 11

[Wray Bowling [:wbowling]]

Slight update makes the bounding box rectangles get recycled xor clear out if there's no bounds to use.
http://jsfiddle.net/rgbk/JgmE3/15/

For localization, GeoNames is much more fleshed out. Their API was just so clunky to use. Thanks for looking into this stuff Giorgos.

Comment 12

[Wray Bowling [:wbowling]]

Just curious, when you run the page, is the map generally centered on your location? It is for me. That might be useful. It looks like it's using the IP address location.

Comment 13

[Giorgos Logiotatidis [:giorgos]]

In my case the map maybe centered but in Athens, Georgia, US.

Comment 15

[Dan Poirier [:dpoirier]]

Attachment: Pull request

Comment 16

[Wray Bowling [:wbowling]]

Dan's pull request was closed on April 17th. What's the status of this? Can it be assigned to someone else if it's still in the pipeline?

Comment 17

[Andrei Hajdukewycz [:sancus]]

This is part of the geo-visualization branch atm, but I'm planning to split them back up. I was having trouble with the location picker on the edit profile UI. You can see it just by going to your edit profile page while running that branch.

http://i.imgur.com/M1NQJtu.png The map spreads the tiles all over the page for some reason. I can probably fix this, but if you have the time, I bet you can fix it faster than me!

Comment 18

[Andrei Hajdukewycz [:sancus]]

The issue wasn't a cross domain problem, it's that <link href="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css" type="text/less"> should be type="text/css".

Comment 19

[Andrei Hajdukewycz [:sancus]]

Just an update on this bug, this is ready to go in. I spent some effort earlier today splitting the patch so that the temporary migration code and the permanent geocode are in different commits, so it's much easier to remove the temporary migration code once we're done.

Merging this will require IT help and so I'll run through that process as soon as I can get help with that tomorrow.

Comment 20

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/0ff48570441cc2d8eaea140f82477ae1e76fb074
[Fix Bug 976330] Add geocode model and map picker on edit profile

https://github.com/mozilla/mozillians/commit/f3832872b8043fae3509a74092134dfafb7f6e08
[Bug 976330] Add migration geocoding

https://github.com/mozilla/mozillians/commit/7d3995bb9d147b2f2772354af98b3b28d4d6af5a
Merge pull request #909 from Sancus/976330-enter-location

[Fix bug 976330] - Add location entering UI to edit profile

Comment 21

[Matt Brandt [:mbrandt]]

Bumping to QA verified -- this happened, went live, and made Mozillians lives better. The new geographic UX works great and has test automation coverage.