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 popupTemplate has also been provided as well as a single symbology type that shows a custom marker.

var customMarker = L.Icon.extend({
    options: {
        iconUrl: "../../docs-demo/img/markers/ski-lift.png",
        shadowUrl: null,
        iconSize: new L.Point(32, 37),
        iconAnchor: new L.Point(16, 37),
        popupAnchor: new L.Point(0, -35)
    }
});

geoiq_ski_areas = new lvector.GeoIQ({
	dataset: 164880,
	uniqueField: "NAME",
	scaleRange: [6, 20],
	popupTemplate: '<div class="iw-content"><h3>{NAME}</h3></div>',
	singlePopup: true,
	symbology: {
	    type: "single",
	    vectorOptions: {
		    icon: new customMarker()
	    }
	}
});

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 lvector.GeoIQ({
    dataset: 147336,
    uniqueField: "state",
    showAll: true,
    popupTemplate: '<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>',
    singlePopup: true,
    symbology: {
        type: "range",
        property: "count",
        ranges: [
            {
                range: [1, 1],
                vectorOptions: {
                    fillColor: "#F1EEF6",
                    fillOpacity: 0.85,
                    color: "#333",
                    weight: 1,
                    opacity: 1
                }
            },
            {
                range: [2, 10],
                vectorOptions: {
                    fillColor: "#BDC9E1",
                    fillOpacity: 0.85,
                    color: "#333",
                    weight: 1,
                    opacity: 1
                }
            },
            {
                range: [11, 20],
                vectorOptions: {
                    fillColor: "#74A9CF",
                    fillOpacity: 0.85,
                    color: "#333",
                    weight: 1,
                    opacity: 1
                }
            },
            {
                range: [21, 126],
                vectorOptions: {
                    fillColor: "#0570B0",
                    fillOpacity: 0.85,
                    color: "#333",
                    weight: 1,
                    opacity: 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 popupTemplate 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 lvector.GeoIQ({
    dataset: 181235,
    uniqueField: "prkid",
    popupTemplate: function(properties) {
        var properCase = function(s) {
            if (s){
                return s.replace(/_/gi, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
            } else {
                return "";
            }
        };
        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: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/park.png"
                    })
                }
            },
            {
                value: "NEIGHBORHOOD PARK",
                vectorOptions: {
                    icon: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/park.png"
                    })
                }
            },
            {
                value: "COMMUNITY PARK",
                vectorOptions: {
                    icon: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/park.png"
                    })
                }
            },
            {
                value: "NATURE PRESERVE",
                vectorOptions: {
                    icon: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/nature-preserve.png"
                    })
                }
            },
            {
                value: "RECREATION CENTER",
                vectorOptions: {
                    icon: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/recreation-center.png"
                    })
                }
            },
            {
                value: "GOLF COURSE",
                vectorOptions: {
                    icon: new customMarker({
                        iconUrl: "../../docs-demo/img/markers/golf.png"
                    })
                }
            }
        ]
    }
});