Where'd The Water Go? Google Maps Water Pixel Detection With Canvas (opens in new tab)

(tech.bellycard.com)

51 pointserickerr12y ago21 comments

21 comments

18 comments · 8 top-level

Doctor_Fegg12y ago· 3 in thread

Or you could just use OpenStreetMap which, y'know, gives you access to the Actual Map Data rather than having to reverse-engineer it from the rendered image...

polemic12y ago

That's true, although perhaps missing the point of the article. The example lets you used any particular image, rather than having to (for example) pull GeoJSON of the extent area, etc. It's a sweet hack.

robbiet48012y ago

If only there was something like maps.google.com for OSM. Yes, there's openstreetmap.org but that doesn't have directions or location sharing. Also, if people started using it like maps.google.com, I'm sure the OSM project wouldn't be too happy, seeing as how tile serving on such a scale gets expensive fast.

Doctor_Fegg12y ago

That's pretty much what MapQuest Open tries to do: http://open.mapquest.com/ . Expect routing to come to osm.org within the year, too.

eevo12y ago· 3 in thread

Cool article from a technical perspective.

I dont understand the business ask for drawing a map to show potential customers, then placing them randomly on the map. Why not just give rough volume numbers or something instead? It seems at least misleading.

erickerrOP12y ago

The map, business logo, and people icons just help illustrate the feature. Volume and other value related benefits are communicated elsewhere in the page content, but aren't really additive to the blog post.

RobotCaleb12y ago

What's an ask?

lotyrin12y ago

A "business ask" is like a "business need", but not clearly a need. It's a way to differentiate (and possibly dismiss) them and avoid seeming dismissive.

1 more reply

jameshart12y ago· 2 in thread

The assumptions here seem a little urban-centric. Maybe in a downtown area, the only places you shouldn't show potential customers is in the middle of bodies of water; but what about a more rural or wild location - are you going to show a business that you can find them potential customers in the middle of fields? mountaintops? military testing ranges?

A better approach might be to use block-level census data to give you a probability density function to where you should plot your random made-up fake 'potential customer' icons. Less risk that when a roadside truckstop in alaska brings up your site you wind up making the misleading claim that you can find them fifty customers within walking distance...

wiredfool12y ago

Water has another issue -- sometimes it's hard to cross. You can see it in the last image, sort of.

Where I live, the nearest school, store, and park are ~ 4 miles away. (I know this because of a real estate site.) The second nearest are ~ 6 miles. It takes 2.5 hours to get to the closest ones, but 15 minutes to get to the second closest ones.

The difference, one of them is across a body of water that has no ferry or bridge, and to get there you have to go the long way around. And it's a long enough trip that I've never been there in 7 years of living here, despite seeing it every non-foggy day.

williamcotton12y ago

Very true!

There are many resources [1][2][3] for geographic data. Learning how to use tools like PostGIS [4], gdal [5], and d3 [6] are well worth the effort.

Hacks like this are great when there is no other way around it, but I can't help but imagine that it would have been a much easier problem to solve using some of these existing data sets and tools.

When given the option to attempt a novel hack like the original poster's keep in mind that the skills learned while solving the problem with existing tools and workflows will be very valuable the next time you need to do any GIS related work!

[1] http://nationalatlas.gov/mld/hydrogm.html [2] http://www.census.gov/cgi-bin/geo/shapefiles2012/main [3] http://factfinder2.census.gov/faces/nav/jsf/pages/searchresu... [4] http://postgis.net [5] http://www.gdal.org [6] http://bost.ocks.org/mike/map/

Someone12y ago· 1 in thread

I don't see the need to treat water different from earlier placed markers.

Here's how I would hack this: whenever you place an icon, draw a slighty larger circular 'lake' on top of that hidden canvas. That added lake prevents you from placing another icon in the neighborhood of that icon.

erickerrOP12y ago

There is a performance hit for this. Rendering the 40 markers in the provided demo takes roughly 7ms on my machine vs 25ms for the fake lake method.

udfalkso12y ago· 1 in thread

Would this not be much more easily solved by reverse geocoding each coordinate and seeing if google gives you a valid address for it?

gregory14412y ago

You'd have to make a network call for each x,y coordinate you test in that case.

mmastrac12y ago

Interesting, although I'm not sure why they are setting an invalid value for Image.crossOrigin. The only valid values for this are "anonymous" and "use-credentials". Setting an invalid value (like a URL) is treated as "anonymous".

EDIT: And when running the jsfiddle demo, it looks like Google isn't sending any CORS headers from the given map image, breaking the demo entirely:

http://maps.googleapis.com/maps/api/staticmap?scale=2&center...

yesimahuman12y ago

I did something funny like that a few years back trying to apply textures to roads for a game on top of the map. I normalized all the road colors to make it easy to pick out, then drew the texture on them with canvas (my memory is a little hazy here). It worked well, surprisingly.

davearel12y ago

Great read

j / k navigate · click thread line to collapse

21 comments

18 comments · 8 top-level

Doctor_Fegg12y ago· 3 in thread

Or you could just use OpenStreetMap which, y'know, gives you access to the Actual Map Data rather than having to reverse-engineer it from the rendered image...

polemic12y ago

robbiet48012y ago

Doctor_Fegg12y ago

That's pretty much what MapQuest Open tries to do: http://open.mapquest.com/ . Expect routing to come to osm.org within the year, too.

eevo12y ago· 3 in thread

Cool article from a technical perspective.

erickerrOP12y ago

RobotCaleb12y ago

What's an ask?

lotyrin12y ago

A "business ask" is like a "business need", but not clearly a need. It's a way to differentiate (and possibly dismiss) them and avoid seeming dismissive.

1 more reply

jameshart12y ago· 2 in thread

wiredfool12y ago

Water has another issue -- sometimes it's hard to cross. You can see it in the last image, sort of.

williamcotton12y ago

Very true!

There are many resources [1][2][3] for geographic data. Learning how to use tools like PostGIS [4], gdal [5], and d3 [6] are well worth the effort.

Hacks like this are great when there is no other way around it, but I can't help but imagine that it would have been a much easier problem to solve using some of these existing data sets and tools.

Someone12y ago· 1 in thread

I don't see the need to treat water different from earlier placed markers.

erickerrOP12y ago

There is a performance hit for this. Rendering the 40 markers in the provided demo takes roughly 7ms on my machine vs 25ms for the fake lake method.

udfalkso12y ago· 1 in thread

Would this not be much more easily solved by reverse geocoding each coordinate and seeing if google gives you a valid address for it?

gregory14412y ago

You'd have to make a network call for each x,y coordinate you test in that case.

mmastrac12y ago

EDIT: And when running the jsfiddle demo, it looks like Google isn't sending any CORS headers from the given map image, breaking the demo entirely:

http://maps.googleapis.com/maps/api/staticmap?scale=2&center...

yesimahuman12y ago

davearel12y ago

Great read

j / k navigate · click thread line to collapse