GitSpatial
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.
gitspatial_parks = new lvector.GitSpatial({
user: 'JasonSanford',
repo: 'mecklenburg-gis-opendata',
featureSet: 'parks',
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.address) + '</td></tr>';
return html += '</table></div>';
},
symbology: {
type: "unique",
property: "type",
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"
})
}
}
]
}
});
Cambridge Neighborhoods
This example has a simple, single symbology and uses the showAll parameter to fetch all features at once since there are only a handful.
We're also using a simple string based popupTemplate and have singlePopup set to true so that the map isn't too cluttered.
gitspatial_neighborhoods = new lvector.GitSpatial({
user: 'JasonSanford',
repo: 'cambridgegis_data',
featureSet: 'neighborhoods',
showAll: true,
symbology: {
type: 'single',
vectorOptions: {
fillColor: '#ff7800',
color: '#46461f',
weight: 3,
opacity: 1
}
},
popupTemplate: '<h3>{NAME}</h3>',
singlePopup: true
});
Cambridge Utility Poles
This example uses a range symbology type to display utility poles with three different ranges of height using different colored markers.
gitspatial_utility_poles = new lvector.GitSpatial({
user: 'JasonSanford',
repo: 'cambridgegis_data',
featureSet: 'utility_poles',
scaleRange: [16, 18],
popupTemplate: '<h4>Height: {ELEV}\'</h4>',
singlePopup: true,
symbology: {
type: 'range',
property: 'ELEV',
ranges: [
{
range: [0, 12],
vectorOptions: {
icon: new customMarker({
iconUrl: '../../docs-demo/img/markers/utility-blue.png'
})
}
},
{
range: [12.000001, 20],
vectorOptions: {
icon: new customMarker({
iconUrl: '../../docs-demo/img/markers/utility-orange.png'
})
}
},
{
range: [20.000001, 100],
vectorOptions: {
icon: new customMarker({
iconUrl: '../../docs-demo/img/markers/utility-red.png'
})
}
}
]
}
});