Friday, January 11, 2013

Farmer's Market Map

We've created a Google Map of Farmer's Markets using data in FlatMerge. This post shows how FlatMerge makes it simple.



1. Grab the csv data from data.gov and upload it to FlatMerge.

2. See what's in the data. X, Y (longitude and latitude coordinates, cool!), and website are good for now.


2. Browse Google Maps API examples for some cool ways to make maps.

3. Create a lean OData query to get the fields I need.
http://flatmerge.com/Data/Query/31974ef9-5a62-420d-a6c3-945b3ab8e6d4?$select=x,y,website

Load markers on the map using the x/y coordinates from the JSON returned by FlatMerge query:
$.getJSON("http://flatmerge.com/Data/Query/31974ef9-5a62-420d-a6c3-945b3ab8e6d4?$select=x,y,website", function (data) {
for (var i = 0; i < data.length; i++) {
var market = data[i];
var myLatLng = new google.maps.LatLng(market.y, market.x); 


4. Check it out http://flatmerge.com/markets.html! View the source code to see how simple it is. (Note that the code won't work using a local .html file, it must be on a real web server or localhost.)

Mobile app and how-to post coming soon...