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>