Overview
An example demonstrating how to use arbitrary boundaries as your GeoRequest container.
'geometry' grabs anything that is within or touches the boundary.
'geometry_within' grabs anything that is entirely contained within the boundary.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization&signed_in=true">
</script>
<script>
var apiKey, map;
var sdk = new CitySDK();
var census = sdk.modules.census;
var mode = "geometry";
var triangleGeojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-76.62139892578125,
39.28967134685658
],
[
-77.080078125,
38.89530825492018
],
[
-76.48681640625,
38.96795115401593
],
[
-76.62139892578125,
39.28967134685658
]
]
]
}
}
]
};
function getApiKey() {
census.enable(citySDKdemoConfiguration.apikey);
};
function clearMap() {
map.data.forEach(function(feature) {
map.data.remove(feature);
});
};
$(document).ready(
function() {
getApiKey();
var mapOptions = {
center: { lat: 38.91732, lng: -77.2211},
zoom: 7
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.data.setStyle({
fillColor: 'blue'
});
map.data.addGeoJson(triangleGeojson);
var infowindow = new google.maps.InfoWindow();
map.data.addListener('click', function(event) {
infowindow.setContent(
"<h2>" + event.feature.getProperty("NAME") + "</h2><p>Median age: " +
event.feature.getProperty("age") + "<br/>Population: " +
event.feature.getProperty("population") + "<br/>Median income: " +
event.feature.getProperty("income")
+ "</p>"
);
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);
});
}
);
function go(x) {
var request = {
variables: [
"age",
"population",
"income"
],
level: x,
sublevel: true,
container: mode,
containerGeometry: census.GEOtoESRI(triangleGeojson)[0].geometry
};
census.GEORequest(request, function(response) {
clearMap();
map.data.addGeoJson(response);
});
}
function showTriangle() {
clearMap();
map.data.addGeoJson(triangleGeojson);
}
function setContainer(x) {
mode = x;
}
</script>
An unofficial website of the United States Government