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" } } ] } });