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 gvector.AGS({
url: "http://maps.rtd-denver.com/ArcGIS/rest/services/SystemMapLiteGoogleVectors/MapServer/1",
fields: "*",
scaleRange: [13, 20],
showAll: true,
symbology: {
type: "single",
vectorOptions: {
strokeWeight: 4,
strokeOpacity: 0.8,
strokeColor: "#004a00"
}
},
infoWindowTemplate: '<div class="iw-content"><h3>Light Rail Line</h3><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_director_districts = new gvector.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,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "B",
vectorOptions: {
fillColor: "#660066",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "C",
vectorOptions: {
fillColor: "#FF9900",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "D",
vectorOptions: {
fillColor: "#00FFFF",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "E",
vectorOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "F",
vectorOptions: {
fillColor: "#003333",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "G",
vectorOptions: {
fillColor: "#ff7800",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}, {
value: "H",
vectorOptions: {
fillColor: "#46461f",
fillOpacity: 0.6,
strokeColor: "#666666",
strokeOpacity: 0.8,
strokeWeight: 1
}
}
]
},
infoWindowTemplate: '<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>',
singleInfoWindow: 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 infoWindowTemplate, we're using a function that is passed feature attributes and returns a string for populating the infoWindow. This way we can do more complex things with our attributes, like create charts.
ags_census = new gvector.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: {
strokeWeight: 1,
strokeColor: "#666666",
strokeOpacity: 0.5,
fillOpacity: 0.8,
fillColor: "#FFFFCC"
}
},{
range: [32.0000001, 40],
vectorOptions: {
strokeWeight: 1,
strokeColor: "#666666",
strokeOpacity: 0.5,
fillOpacity: 0.8,
fillColor: "#C2E699"
}
},{
range: [44.0000001, 50],
vectorOptions: {
strokeWeight: 1,
strokeColor: "#666666",
strokeOpacity: 0.5,
fillOpacity: 0.8,
fillColor: "#78C679"
}
},{
range: [50.0000001, 100],
vectorOptions: {
strokeWeight: 1,
strokeColor: "#666666",
strokeOpacity: 0.5,
fillOpacity: 0.8,
fillColor: "#238443"
}
},{
range: [35.0000001, 48],
vectorOptions: {
strokeWeight: 1,
strokeColor: "#666666",
strokeOpacity: 0.5,
fillOpacity: 0.8,
fillColor: "#C2E699"
}
}
]
},
infoWindowTemplate: 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=285x150&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>';
},
singleInfoWindow: 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 gvector.AGS({
url: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0",
fields: "*",
uniqueField: "objectid",
esriOptions: true,
infoWindowTemplate: '<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>',
singleInfoWindow: 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 infoWindowTemplate. 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 gvector.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,
infoWindowTemplate: 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,
strokeWeight: 1,
strokeOpacity: 1,
strokeColor: "#666"
}
}
});