Eric Gelinas: Geo Interfaces for Actual Humans


Uploaded by yuilibrary on 18.02.2012

Transcript:
>> ERIC GELINAS: My name is Eric Gelinas, I'm a frontend engineer at Flickr, and we're
going to talk maps. About two years ago, Flickr redesigned our most highly trafficked site.
What we were hoping to do was improve some of the performance of it, and we also wanted
to kind of reassess everything that we put on the page and you know, see if there were
some things we should put on there, see if there were some things we should take off
there. And this is what we ended up with. You'll notice that after all of that we decided
we're going to put a map on there. We asked ourselves, do we really need a map? Thinking
about why Flickr uses maps, we came up with these reasons: Flickr uses maps one for navigation,
and two to tell a story.
Getting into the navigation part, there are a lot of photos on Flickr. As you can see,
we have some cats on there. Once you use one of our maps to kind of navigate all of those
photos, you can do things like this. If I was going to take a trip to Palermo -- and
this is actually something I'm planning on doing -- I can go to Palermo on the map, I
can look for all of these photos in there and kind of build out what I would want to
do on my vacation, looking at all these photos.
Another reason that we use maps on Flickr is to tell a story. If you came across this
photo on Flickr, you would think that it's a nice photo, you'd wonder what it's all about,
but on our photo page that we've recently redesigned you can see that this was taken
in Cairo on February 19th which means that it's part of the Egyptian revolution. It makes
it a little bit more interesting. So you don't have to dig into this photo too much, you
can see exactly what it's about pretty quickly.
So that's what we ended up with. This is our new photo page with the map on it. Now, looking
at types of people that will be looking at this map, we wanted to try to figure out how
to make it as useful for the different people that'll come on here as possible. We figured
that those different people are going to be your contacts who will come across your photo
page, and they probably know a lot about where you're from, where you take your photos most
often. If you've taken a vacation they probably know where you went. But over time, hopefully
there's going to be more explorers that hit your photo; people who search for it on the
internet, looking for whatever. They search Google and they find your photo. Those are
going to end up being a lot of people, and they may not know exactly where you live.
So what we decided to do was have these three different levels of zoom that are available
on our photo page. The first level is very far zoomed out, and it gives you an idea of
where in the world that photo was taken. When you hover over the photo then you see something
that's a little bit further zoomed in, gives you an idea of what the city looks like. And
then when you hover over the dot in the middle, you get the furthest zoomed in, which is the
actual neighborhood that that photo was taken. So that third zoom is probably more useful
for your friends, and the explorers that come to your page will get to kind of slowly come
down and get an idea of where that photo was taken, the streets around it, and stuff like
that after they've been familiarized with where it is on the globe.
Here's kind of an idea of how we did that using an open map provider. Right now MapQuest
provides open static maps. If you wanted to do this yourself, I've put a gist on GitHub
which has a basic simple example of how we did that. Feel free to take a look at it and
play around with it. Basically, as you can see, we just changed the zoom level on hover,
and there's more of an example in that gist.
Another thing is we wanted to be really careful how this map worked and how it blended in
with Flickr. I think a lot of map interfaces that I've seen look kind of awkward. I think
we do kind of a good job of blending them in with our site. I think the reason that
some of them look awkward is because people rely on defaults; I think maps are very complicated,
people kind of like the fact that they're a black box -- you can just put them on there,
give it a latitude and longitude and it shows up and it works. But that doesn't blend in
with your site very well.
This is something that's kind of personal to me. I used to live in Los Angeles, and
I think that Metro has a great site for getting directions, places, using the Subway and things
like that in LA, but the map always kind of frustrated me because you put in your beginning
place and the end location and all you end up with is this place mark at the end; there's
no line drawn between the two points or anything like that, it's just kind of like here's the
end spot, and it's this default Google Map.
This is another problem. A lot of map tiles are just kind of cluttered with just about
everything you could possibly want, all this geodata, including the stuff you're looking
for but also including a lot of stuff you may not need. This is an example of, I think,
a really well integrated map. This one is... They've actually built their own OpenStreetMaps
implementation; this is StreetEasy. If you go to the OpenStreetMaps site, openstreetmaps.org,
there's actually a case study from them on building their maps. What they did was they
reduced the amount of data that was made to use their tiles. You can see that they're
using the same iconography from the rest of the site. It looks very much like their site,
and it blends in with it really well. So this is an example of something that's not awkward,
that's very nice and fits with the rest of the site.
The next thing is slippy maps. So far I've shown you static maps, which are just images
of maps on a page. The next thing is these maps that are made using JavaScript, and you
can move them around and they're interactive. These are three popular map providers that
will give you a black box that you can just put on your site and give it a latitude and
longitude and pretty much have a map working. We use one similar to this.
These are some methods that I've found in those that would let you kind of go into those
black box maps and be able to customize them and be able to make them look more like your
site. These aren't, obviously, the exact method names because they're different for each map
provider, but these are the things I've found useful, and they seem to be available on all
of these map providers. These are some events, also, that I've found that help you hook in
and figure out how to make things work. One example would be, with the methods, if you
want to try to find out what the XY coordinate that you want to put an item on the map is,
you can find that by giving it a latitude and longitude, and then there are methods
that'll give you back an XY coordinate where you can put that UI element. Then here you'll
have a pan event that'll fire and kind of keep that element in line with where the user's
panning.
One thing that I did find out, though, is using Bing Maps, that pan event is a little
off-sync with the animations, so your UI elements might trace behind it. I haven't really found
a way around that yet, but it seems like the other two map providers are perfectly synced
with that and I've been able to use them.
One event that I always end up producing for myself in all of these map providers, is Focus
Visibility Change, which basically means usually you're going to put your map elements in a
specific spot on the globe, and when you pan away from that, they'll just kind of keep
going off the screen. It's nice to know when what you consider to be the center of the
map has moved off of the screen, then you can kind of destroy all of those UI elements
and all of the events that you have, keeping them in line with the map. Just a little way
of making performance better on the map.
When we were done with all of that we ended up with this, which is the slippy map, or
the interactive map, that we have on Flickr, which I think looks a lot like Flickr. It
feels common to anybody who uses it regularly. You can see our buttons are the same as the
buttons you have on the site. It just fits in really well.
That all being said, we wrote a lot of code to make that work that way, and since doing
that Mapstraction has come along, which is an interesting looking API. I haven't worked
with it very closely, but it looks like it does a lot of the things that we kind of had
to write ourselves. What it'll do is let you code against their API and then they kind
of abstract out all of the things that the individual map providers do, so you could
switch to Google or Bing or OviMaps or your own OpenStreetMaps implementation. So it gets
a lot of that. It also lets you customize the maps in a lot of the same ways that we
were able to do with the Flickr map.
That all being said, when we put more location on Flickr and put the maps more prominent,
we were hoping to get more location information from people for the stories and for the navigation.
But location information is sensitive, and we have to make people feel more comfortable
about putting their photos on Flickr.
The way that we decided to solve that problem is to make geofences available. What this
is is an area that you can draw, a circle that you can draw, in certain places. I think
we can... There's a certain amount of circles that you can draw. It'd be a place, like you
can draw a circle around your house, or your office, or maybe a whole city, and say that
if photos are taken in this area I want to restrict the permissions of who can see where
this photo was taken. Once we put this on there it makes people feel a lot more comfortable.
They can put a big circle over their house and say OK, I'm going to take pictures all
over the place and all of those go up on Flickr, but if they're taken at my home I only want
my family to see them, or I want to be the only one who sees them. That way it helps
us get more geo information and makes the map more interesting.
So that's where Flickr is right now with maps. But there are a lot of interesting things
happening right now in the area of maps. One of the things that's kind of causing this,
I think, is Google started charging for their map API if you start to use it enough, and
that's caused a lot of people to want to figure out other options. I think OpenStreetMaps
has picked up a lot on that; people have learned that you can use OpenStreetMaps, which if
you're not familiar with that, is kind of like Wikipedia for locations. Somebody can
take a GPS trace, or other ways that they can pull together map information, and put
it into OpenStreetMaps. It's managed by lots of people, much like Wikipedia. It's actually
very accurate and has a lot of the globe mapped out. Certain things that you wouldn't get
from a commercial map provider, like maybe a trail, an obscure trail somewhere, they
may have mapped it out for you. It's really interesting.
A lot of people are taking these and building their own map providers, much like Google
and stuff like that, kind of home brewing them. But doing that is complicated. This
is a little sample of the code that it takes to generate a tile. You can style them, and
for a long time there are a lot of tools out there that'll help you to do it, but there's
a steep learning curve in learning how to take the geodata that you get from OpenStreetMaps
and then generate a tile using this tool called Mapnik. This is what they call... This is
the data you give to Mapnik to tell it what the tile should look like.
But recently, because of all this kind of building of the community around OpenStreetMaps,
this has been turned into this, because -- there are a couple of tools like this, but -- TileMill
has come along to basically give you a UI for this sort of thing. What this does is
it takes the use case of somebody trying to build maps for their site and it puts a UI
on that. It allows you to not have to answer all of these questions about: are you trying
to build a map for this? Do you need this projection? Do you need this? Usually if you're
building a map for a website, all of those questions can be answered in that just being
your use case. And they let you have this very simple interface for styling your map
and for generating your map tiles which go into that slippy map, that JavaScript map,
or static maps.
Inside of this, also, is something pretty awesome called Carto, which is a CSS style
language. It basically lets you style these map tiles like you would with CSS. Also, this
tool, it kind of reminds me of back when we all got Firebug, when we were able to suddenly
make changes to the CSS while we're looking at the web page and not have to refresh the
page to see our changes. Suddenly, now, you can maybe change the color of the water and
then hit save, and suddenly you see map tiles that are that color. It's doing all of that
work that you see here, but it's kind of doing it all for you. There's still kind of a learning
curve with some of the data stuff, but when it comes to styling it it's become a lot easier.
So these tools, I really think, are going to pretty soon get people to start putting
maps on their sites that we'd no longer have to say that if it's not important to you,
you don't need to know where all the fire departments are in an area; maybe you just
want to show streets. Maybe you don't need to show which parcels of land are around,
because that's not interesting to your website. I think people will end up with maps on their
websites that fit in a lot better and have just the data that they need.
If you're interested in looking more into this OSM stuff and maybe putting it on your
website, generating your own tiles, there's lots of information. Also, there are companies
out there who have already got the tiles generated and host them for you. There's lots of stuff
here. So take a look at switchtoosm.org. It's some interesting stuff.
As far as geo on Flickr, it's got a long history. There are a lot of blog posts on there. I'm
working with the product of a lot of people who have done a lot of work. So if you're
interested in geo, please take a look at our blog: code.flickr.com/blog/tag/geo.
I thank you. There are some links here; please take down some of those and have a look. Thank
you.
[applause]