An unofficial website of the United States GovernmentOverview
This page will guide you through creating an application that unifies data from multiple modules.
This application will allow users to click on any county in California and view Farmer's Markets in and near that county.
Importing the Modules
The first step to using multiple modules is importing them. We'll add import statements to our <head> tag for the CitySDK core, and each module. We'll also import code for our Google Map.
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization&signed_in=true">
</script>
<script src="jquery.js"></script>
<script src="js/citysdk.js"></script>
<script src="js/citysdk.census.js"></script>
<script src="js/citysdk.farmersMarket.js"></script>
</head>
Everything is now imported and we can get started on our actual code.
Instantiating the SDK, modules, and map
Our first step is instantiating the SDK, modules and map. To do this, we'll first need to add the required map-canvas div to the body of our file.
<body>
<div id="map-canvas" style="width: 200px; height: 200px"></div>
</body>
This div is used by Google Maps to insert the map. That's all we'll need to do to the HTML of the page. The rest of this application is done in JavaScript. We'll be putting it in a <script> tag in our page's <head>, but you could also place it in a JavaScript file.
First, let's create some global objects to hold our map and module references.
var apiKey, map;
var sdk = new CitySDK();
var census = sdk.modules.census;
var farmersMarket = sdk.modules.farmersMarket;
//We won't need API keys for just Geography.
census.enable("");
Notice we're not asking for the API key here. The Census module only needs an API key if you are accessing ACS data; thus, since we're only getting geography, we can skip it.
Next, we'll initialize the map inside of a $(document).ready() function.
$(document).ready(
function() {
var mapOptions = {
center: { lat: 37, lng: -120},
zoom: 6
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.data.setStyle({
fillColor: 'blue'
});
}
);
Great! Now our application should be displaying a map of California.
Grabbing the County Geographies
Next up, we need to draw the boundaries for all of California's counties. We'll use the Census module to do this.
Just after the map's initialization inside of the $(document).ready() function, let's add a GEORequest() for all of California's counties.
var countyRequest = {
state: "CA",
level: "county",
sublevel: true,
container: "state"
};
census.GEORequest(countyRequest, function(response) {
map.data.addGeoJson(response);
});
In our SDK call we create a callback that will draw all of the GeoJSON on our map. If we refresh our application, we should have a Google Map showing California and all of its counties' boundaries.
Adding a pop-up
To display our Farmer's Market data, we'll need to have a pop-up appear when user's click on a county. Let's add some code to handle this. We can place it directly after our county boundary loading code.
var popup = new google.maps.InfoWindow();
map.data.addListener('click', function(event) {
popup.setContent("Clicked!");
popup.setPosition(event.latLng);
popup.open(map);
});
If we refresh our application, we should be able to click on counties and get a popup. Of course, it doesn't show any information yet, but we'll handle that in the next section.
Adding Farmer's Market Data
Let's use the USDA's Farmer's Market module to populate our popup with data about each county's markets. We'll do this by grabbing the county's latitude and longitude from the GeoJSON and making the request to the USDA with those coordinates. In our callback, we'll put the data into the popup. Here's how we changed the onClick listener:
map.data.addListener('click', function(event) {
var lat = event.feature.getProperty("CENTLAT");
var lng = event.feature.getProperty("CENTLON");
var name = event.feature.getProperty("NAME");
var request = {
"lat": lat,
"lng": lng
};
farmersMarket.search(request, function(response) {
var html = "<h3>" + name + "</h3><br/>";
html+= "<ul>";
response.results.forEach(function (market) {
html+= "<li>" + market.marketname + "</li>";
});
html+= "</ul>";
popup.setContent(html);
popup.setPosition(event.latLng);
popup.open(map);
});
});
When a user clicks, we grab the center latitude and longitude from that county, as well as the county's name, and create a request object with that. We then issue a request to the Farmer's market module. In the callback, we construct an HTML list of Farmer's markets in that county, and place that HTML inside of the pop-up.
The Completed Application
Let's check out the finished product:
And here's the full JavaScript source:
<script>
var apiKey, map;
var sdk = new CitySDK();
var census = sdk.modules.census;
var farmersMarket = sdk.modules.farmersMarket;
//We won't need API keys for just Geography.
census.enable("");
function clearMap() {
map.data.forEach(function(feature) {
map.data.remove(feature);
});
};
function runExample(id) {
clearMap();
var textarea = $('#' + id);
eval(textarea.val());
};
$(document).ready(
function() {
var mapOptions = {
center: { lat: 37, lng: -120},
zoom: 6
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.data.setStyle({
fillColor: 'blue'
});
//County boundary request
var countyRequest = {
state: "CA",
level: "county",
sublevel: true,
container: "state"
};
//Request the boundaries and attach them to the map
census.GEORequest(countyRequest, function(response) {
map.data.addGeoJson(response);
});
//Create a popup
var popup = new google.maps.InfoWindow();
//Attach a listener for when a user clicks on a boundary
map.data.addListener('click', function(event) {
var lat = event.feature.getProperty("CENTLAT");
var lng = event.feature.getProperty("CENTLON");
var name = event.feature.getProperty("NAME");
var request = {
"lat": lat,
"lng": lng
};
farmersMarket.search(request, function(response) {
var html = "<h3>" + name + "</h3><br/>";
html+= "<ul>";
response.results.forEach(function (market) {
html+= "<li>" + market.marketname + "</li>";
});
html+= "</ul>";
popup.setContent(html);
popup.setPosition(event.latLng);
popup.open(map);
});
});
}
);
</script>