Fork me on GitHub

GeoIQ

Ski Areas

This simple demo shows ski areas throughout the US. We've defined a scaleRange so we don't show too many markers at lower zoom levels.

A very simple infoWindowTemplate has also been provided as well as a single symbology type that shows a custom marker.

geoiq_ski_areas = new gvector.GeoIQ({
    dataset: 164880,
    uniqueField: "NAME",
    scaleRange: [6, 20],
    infoWindowTemplate: '<div class="iw-content"><h3>{NAME}</h3></div>',
    singleInfoWindow: true,
    symbology: {
        type: "single",
        vectorOptions: {
    	    icon: "../../docs-demo/img/markers/ski-lift.png"
        }
    }
});

US FOSS4G Registrants

This demo shows how to use a range symbology type to symbolize more FOSS4G registrants with a darker shade of blue.

We're also using the showAll parameter to fetch all features at once, since we're initially zoomed out to a level where we can see almost the entire dataset. There's no sense in re-fetching this (quite large) dataset more than once.

Keep in mind that it could take a few seconds to load this dataset due to its large size.

geoiq_foss4g_reg = new gvector.GeoIQ({
        dataset: 147336,
        uniqueField: "state",
        showAll: true,
        infoWindowTemplate: '<div class="iw-content"><h3>{state}</h3><table class="condensed-table"><tr><th>Registrants</th><td>{count}</td></tr><tr><th>Percent of Total</th><td>{percent}</td></tr></table></div>',
        singleInfoWindow: true,
        symbology: {
            type: "range",
            property: "count",
            ranges: [
                {
                    range: [1, 1],
                    vectorOptions: {
                        fillColor: "#F1EEF6",
                        fillOpacity: 0.85,
                        strokeColor: "#333",
                        strokeWeight: 1,
                        strokeOpacity: 1
                    }
                },
                {
                    range: [2, 10],
                    vectorOptions: {
                        fillColor: "#BDC9E1",
                        fillOpacity: 0.85,
                        strokeColor: "#333",
                        strokeWeight: 1,
                        strokeOpacity: 1
                    }
                },
                {
                    range: [11, 20],
                    vectorOptions: {
                        fillColor: "#74A9CF",
                        fillOpacity: 0.85,
                        strokeColor: "#333",
                        strokeWeight: 1,
                        strokeOpacity: 1
                    }
                },
                {
                    range: [21, 126],
                    vectorOptions: {
                        fillColor: "#0570B0",
                        fillOpacity: 0.85,
                        strokeColor: "#333",
                        strokeWeight: 1,
                        strokeOpacity: 1
                    }
                }
            ]
        }
    });
});

Mecklenburg County Parks

This example has features styled using the unique symbology type where values of a particular attribute ("prktype" in this example) have a specific style.

We're also using a function based infoWindowTemplate to format our data so it's a little easier to read - In this case convert attributes to Proper Case instead of UPPER CASE.

geoiq_parks = new gvector.GeoIQ({
    dataset: 181235,
    uniqueField: "prkid",
    infoWindowTemplate: function(properties) {
        var properCase = function(s) {
            return s.replace(/_/gi, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
        };
        var html = '<div class="iw-content"><h3>' + properCase(properties.name) + '</h3><table class="condensed-table">';
        html += '<tr><th>Address</th><td>' + properCase(properties.prkaddr) + '</td></tr>';
        html += '<tr><th>Size</th><td>' + properties.prksize + ' acres</td></tr>';
        return html += '</table></div>';
    },
    symbology: {
        type: "unique",
        property: "prktype",
        values: [
            {
                value: "REGIONAL PARK",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/park.png"
                }
            },
            {
                value: "NEIGHBORHOOD PARK",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/park.png"
                }
            },
            {
                value: "COMMUNITY PARK",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/park.png"
                }
            },
            {
                value: "NATURE PRESERVE",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/nature-preserve.png"
                }
            },
            {
                value: "RECREATION CENTER",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/recreation-center.png"
                }
            },
            {
                value: "GOLF COURSE",
                vectorOptions: {
                    icon: "../../docs-demo/img/markers/golf.png"
                }
            }
        ]
    }
});