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