GIS Cloud

Sewer Network

This demo shows a point an a line table from GIS Cloud, sewer lines and man holes. The man holes are displayed using a simple symbology while the sewer lines use the range symbology. Pipes up to 8" in diameter are shown with a thinner green line, while larger pipes are shown with a thicker orange line. The largest trunk lines ( >= 48" ) are shown as a thick black line.

We're also using the singleInfoWindow option here so that only one InfoWindow is shown for each layer. This keeps the map from getting cluttered when selecting lots of features.

giscloud_sewer_line = new gvector.GISCloud({
    mapID: 27322,
    layerID: 117755,
    scaleRange: [15, 20],
    symbology: {
        type: "range",
        property: "pipe_dia",
        ranges: [
            {
                range: [0, 8],
                vectorOptions: {
                    strokeWeight: 4,
                    strokeColor: "#46461f",
                    strokeOpacity: 0.8
                }
            },
            {
                range: [8.00001, 47.9999],
                vectorOptions: {
                    strokeWeight: 7,
                    strokeColor: "#ff7800",
                    strokeOpacity: 0.8
                }
            },
            {
                range: [48, 100],
                vectorOptions: {
                    strokeWeight: 10,
                    strokeColor: "#000000",
                    strokeOpacity: 1
                }
            }
        ]
    },
    infoWindowTemplate: '<div class="iw-content"><h3>Sewer Line</h3><table class="condensed-table zebra-striped bordered-table"><tr><th>Diameter</th><td>{pipe_dia} in.</td></tr><tr><th>Material</th><td>{pipe_mat}</td></tr><tr><th>Flows To</th><td>{wwtp} WWTP</td></tr></table></div>',
    singleInfoWindow: true
});

giscloud_man_hole = new gvector.GISCloud({
    mapID: 27322,
    layerID: 117756,
    scaleRange: [16, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: new google.maps.MarkerImage("../../docs-demo/img/markers/manhole.png", new google.maps.Size(16, 16), new google.maps.Point(0, 0), new google.maps.Point(8, 8))
        }
    },
    infoWindowTemplate: '<div class="iw-content"><h3>Man Hole</h3><table class="condensed-table zebra-striped bordered-table"><tr><th>Diameter</th><td>{mh_dia} ft.</td></tr><tr><th>Depth</th><td>{mh_depth} ft.</td></tr><tr><th>Address</th><td>{street_add}</td></tr><tr><th>Flows To</th><td>{wwtp} WWTP</td></tr></table></div>',
    singleInfoWindow: true
});

Sewer Line On Sewer Line Off

Man Hole On Man Hole Off

Flood Zones

This demo uses the unique symbology type to show different classes of flood zones in varying shades of green.

We're also using the scaleRange parameter to make sure we don't show this layer above zoom level 14, which would return too much data with each map pan or zoom.

giscloud_flood_zones = new gvector.GISCloud({
    mapID: 28792,
    layerID: 121087,
    scaleRange: [14, 20],
    symbology: {
        type: "unique",
        property: "label",
        values: [
            {
                value: "AE",
                vectorOptions: {
                    fillColor: "#2f952f",
                    fillOpacity: 0.6,
                    strokeWeight: 1,
                    strokeColor: "#fff",
                    strokeOpacity: 0
                }
            },
            {
                value: "AE-FW",
                vectorOptions: {
                    fillColor: "#004a00",
                    fillOpacity: 0.6,
                    strokeWeight: 1,
                    strokeColor: "#fff",
                    strokeOpacity: 0
                }
            },
            {
                value: "0.2% Annual Chance",
                vectorOptions: {
                    fillColor: "#aaff7a",
                    fillOpacity: 0.6,
                    strokeWeight: 1,
                    strokeColor: "#fff",
                    strokeOpacity: 0
                }
            }
        ],
    },
    infoWindowTemplate: '<div class="iw-content"><h3>Flood Zone</h3><table class="condensed-table"><tr><th>Type</th><td>{label}</td></tr></table></div>',
    singleInfoWindow: true
});

Layer On Layer Off

Elementary Schools

This demo uses the showAll parameter since there are a manageable number of schools that we can show all at once.

We're also using the where parameter to show only elementary schools (type = 'Elementary').

giscloud_elementary_schools = new gvector.GISCloud({
    mapID: 29104,
    layerID: 121819,
    where: "type = 'Elementary'",
    showAll: true,
    infoWindowTemplate: function(properties) {
        return '<div class="iw-content"><h3>' + properties.name.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + ' ' + properties.type + '</h3><h4>' + properties.address + '</h4></div>';
    },
    singleInfoWindow: true,
    scaleRange: [11, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: "../../docs-demo/img/markers/school.png"
        }
    }
});

Layer On Layer Off

Bus Stops

This demo shows bus stops in Mecklenburg County, NC. We're using a simple infoWindowTemplate to report the stop id, address, etc. when a feature is clicked.

Again, we're using the scaleRange parameter to keep from loading large amounts of data (and cluttering the map) at higher zoom levels.

giscloud_bus_stops = new gvector.GISCloud({
    mapID: 29158,
    layerID: 121929,
    infoWindowTemplate: '<div class="iw-content"><h3>Stop ID - {stopid}</h3><h4>{stopdesc}</h4><h4>Routes - {routes}</h4></div>',
    singleInfoWindow: true,
    scaleRange: [14, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: new google.maps.MarkerImage("../../docs-demo/img/markers/bus.png", new google.maps.Size(17, 19), null, new google.maps.Point(0, 19))
        }
    }
});

Layer On Layer Off