Where'd The Water Go? Google Maps Water Pixel Detection With Canvas

[jameshart]

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...

[wiredfool]

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.

[williamcotton]

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/

[Doctor_Fegg]

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...

[polemic]

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.

[robbiet480]

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.

[mmastrac]

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...

[Someone]

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.

[erickerr]

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.

[yesimahuman]

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.

[eevo]

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.

[erickerr]

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.

[RobotCaleb]

What's an ask?

[udfalkso]

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

[gregory144]

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

[davearel]

Great read