ArcGIS Server
Light Rail Lines
This example has a simple, single symbology and uses the showAll parameter to fetch all features at once since there are only a handful.
ags_light_rail = new lvector.AGS({
url: "http://maps.rtd-denver.com/ArcGIS/rest/services/SystemMapLiteGoogleVectors/MapServer/1",
fields: "*",
scaleRange: [13, 20],
showAll: true,
symbology: {
type: "single",
vectorOptions: {
weight: 4,
opacity: 0.8,
color: "#004a00"
}
},
popupTemplate: '<div class="iw-content"><h3>Light Rail Line</h3><table class="condensed-table"><tr><th>Route</th><td>{ROUTE}</td></tr></table></div>'
});
RTD Director Districts
This example has features styled using the unique symbology type where values of a particular attribute ("DISTRICT" in this example) have a specific style. We also supply a where parameter to keep the feature count to a minimum for this demo.
ags_districts = new lvector.AGS({
url: "http://maps.rtd-denver.com/ArcGIS/rest/services/DirectorDistricts/MapServer/1",
fields: "OBJECTID,DISTRICT,URL,MAP",
showAll: true,
scaleRange: [8, 14],
where: "DISTRICT NOT IN('I','J','K','L','M','N','O')",
symbology: {
type: "unique",
property: "DISTRICT",
values: [
{
value: "A",
vectorOptions: {
fillColor: "#6600FF",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "B",
vectorOptions: {
fillColor: "#660066",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "C",
vectorOptions: {
fillColor: "#FF9900",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "D",
vectorOptions: {
fillColor: "#00FFFF",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "E",
vectorOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "F",
vectorOptions: {
fillColor: "#003333",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "G",
vectorOptions: {
fillColor: "#ff7800",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}, {
value: "H",
vectorOptions: {
fillColor: "#46461f",
fillOpacity: 0.6,
color: "#666666",
opacity: 0.8,
weight: 1
}
}
]
},
popupTemplate: '<div class="iw-content"><h3>District {DISTRICT}</h3><table><tr><th>Links</th><td><a target="_blank" href="{MAP}">Map</a>, <a href="{URL}" target="_blank">Director\'s Website</a></td></tr></table></div>',
singlePopup: true
});
Senior Citizens
This example has features styled using the range symbology type where values of a particular attribute ("MED_AGE" in this example) within a specific range have a specific style. Polygons with lighter shades have a population with a lower median age while the darker polygons have an older population.
Also, instead of a string-based popupTemplate, we're using a function that is passed feature attributes and returns a string for populating the Popup. This way we can do more complex things with our attributes, like create charts.
ags_census = new lvector.AGS({
url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3",
fields: "ObjectID,NAME,STATE_NAME,POP2000,MED_AGE,AGE_UNDER5,AGE_5_17,AGE_18_21,AGE_22_29,AGE_30_39,AGE_40_49,AGE_50_64,AGE_65_UP",
uniqueField: "ObjectID",
scaleRange: [6, 20],
symbology: {
type: "range",
property: "MED_AGE",
ranges: [
{
range: [0, 32],
vectorOptions: {
weight: 1,
color: "#666666",
opacity: 0.5,
fillOpacity: 0.8,
fillColor: "#FFFFCC"
}
},{
range: [32.0000001, 40],
vectorOptions: {
weight: 1,
color: "#666666",
opacity: 0.5,
fillOpacity: 0.8,
fillColor: "#C2E699"
}
},{
range: [44.0000001, 50],
vectorOptions: {
weight: 1,
color: "#666666",
opacity: 0.5,
fillOpacity: 0.8,
fillColor: "#78C679"
}
},{
range: [50.0000001, 100],
vectorOptions: {
weight: 1,
color: "#666666",
opacity: 0.5,
fillOpacity: 0.8,
fillColor: "#238443"
}
},{
range: [35.0000001, 48],
vectorOptions: {
weight: 1,
color: "#666666",
opacity: 0.5,
fillOpacity: 0.8,
fillColor: "#C2E699"
}
}
]
},
popupTemplate: function(atts) {
var totPop = atts.POP2000;
var percent_under_5 = (atts.AGE_UNDER5/totPop) * 100,
percent_5_17 = (atts.AGE_5_17/totPop) * 100,
percent_18_21 = (atts.AGE_18_21/totPop) * 100,
percent_22_29 = (atts.AGE_22_29/totPop) * 100,
percent_30_39 = (atts.AGE_30_39/totPop) * 100,
percent_40_49 = (atts.AGE_40_49/totPop) * 100,
percent_50_64 = (atts.AGE_50_64/totPop) * 100,
percent_65_up = (atts.AGE_65_UP/totPop) * 100;
var imageURL = "http://chart.googleapis.com/chart?cht=p&chs=280x150&chl=%3C5|5%20-%2017|18%20-%2021|22%20-%2029|30%20-%2039|40%20-%2049|50%20-%2064|%3E64&chdl=" + parseInt(percent_under_5) + "%|" + parseInt(percent_5_17) + "%|" + parseInt(percent_18_21) + "%|" + parseInt(percent_22_29) + "%|" + parseInt(percent_30_39) + "%|" + parseInt(percent_40_49) + "%|" + parseInt(percent_50_64) + "%|" + parseInt(percent_65_up) + "&chd=t:" + percent_under_5 + "," + percent_5_17 + "," + percent_18_21 + "," + percent_22_29 + "," + percent_30_39 + "," + percent_40_49 + "," + percent_50_64 + "," + percent_65_up;
return '<div class="iw-content"><h3>' + atts.NAME + ' County, ' + atts.STATE_NAME + '</h3><h4>Median Age: ' + atts.MED_AGE + '</h4><img style="height:150px;width:285px;" src="' + imageURL + '" /></div>';
},
popupOptions: {
maxWidth: 350
},
singlePopup: true
});
San Francisco 311 Incidents
This example makes use of the esriOptions parameter which, when used with an ArcGIS Server Feature Service, uses symbology and scaleRange options from ArcGIS Server.
This lets your write less code and use the symbology and scale dependent rendering you've spent many hours developing with ArcGIS Desktop.
ags_311 = new lvector.AGS({
url: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0",
fields: "*",
uniqueField: "objectid",
esriOptions: true,
popupTemplate: '<div class="iw-content"><h3>{address}</h3><table class="condensed-table"><tr><th>Date/Time</th><td>{req_date} {req_time}</td></tr><tr><th>Request Type</th><td>{req_type}</td></tr></table></div>',
singlePopup: true
});
Winter Weather
This example pulls from an ArcGIS Server instance that produces weather warnings and watches. Here we're using the where parameter to only show winter weather related watches and warnings ("EVENT LIKE 'WINTER%'").
Again, this demo uses a function based popupTemplate. In this case the function iterates through each property in properties and formats each to Proper Case for better looking output and skips properties that we don't want to display ("FIPS", "OBJECTID", "EVENT", "SHAPE.area", "SHAPE_Length").
Note that this demo might appear to be non-functional if there are no current winter weather warnings. I'll try to remember to change this demo to show thurerstorm warnings when the weather warms up.
ags_winter = new lvector.AGS({
url: "http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_weat/MapServer/0",
fields: "*",
uniqueField: "OBJECTID",
where: "EVENT LIKE 'WINTER%'",
scaleRange: [3, 15],
showAll: true,
popupTemplate: function(properties) {
var html = '<div class="iw-content"><h3>' + properties.EVENT.replace(/_/gi, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + '</h3><table class="condensed-table">';
for (var prop in properties) {
if (["FIPS", "OBJECTID", "EVENT", "SHAPE.area", "SHAPE_Length"].indexOf(prop) < 0) {
if (prop == "WEB") {
html += '<tr><th>Link</th><td><a href="' + properties[prop] + '" target="_blank">' + properties.EVENT.replace(/_/gi, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + '</a></td></tr>';
} else {
html += '<tr><th>' + prop.replace(/_/gi, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + '</th><td>' + properties[prop] + '</td></tr>';
}
}
}
return html + '</table></div>';
},
symbology: {
type: "single",
vectorOptions: {
fillColor: "#ffffff",
fillOpacity: 0.75,
weight: 1,
opacity: 1,
color: "#666"
}
}
});