Bruins Geospatial: ArcGIS Server Based Web Application for Oil Seepage Impact Assessment in Los Angeles

The web application is designed using the ArcGIS JavsScript API that consumes map and geoprocessing services. It is designed using Esri provided web template at resources.esri.com. It has a header section at the top to display title, footer to display messge, left pane, right pane, and a middle map area. Information being displayed in all these areas is presented below. A complete view of the web map is shown below. When the user visits the website to view the web application on oil seepage, the user is presented with a view of the map of the Los Angeles area with legend. The right pane of the web page is empty, and is a placeholder for results from geoprocessing.

Add an image of the full map without the impact area.

User can pan and zoom to areas of interest, and can click at a location to calculate impact of oil seepage on people and properties. The click on the map invokes a geoprocessing service at the ArcGIS server. This sets the message in the footer area as "Geoprocessing in progress...". At the ArcGIS server where the service is published, the geoprocessing service first creates a buffer of 1 miles around the point of interest, and then finds out people by their age, sex and race. The geoprocessing service further identifies roads and institutions within the buffered area of impact, and returns them to the web page. The features (roads, institutions) processed are returned as FeatureSet object. A feature set object is a collected of graphics (like row in a table), and each graphic has geometry and attributes (like attributes of table). The ArcGIS Javascript API is used on the web page to parse the returned values in feature set from the server, the geometry values are collected from the feature set and are displayed as graphic on the map. The geoprocessing service also computes the number of people impacted in the buffer aera and these are returned to the web page as RecordSet. These are similar to feature set except that they do not have geometry. ArcGIS JavaScript is used to parse the recordset returned to get number of people impacted in the buffer area, and this information is written on the right pane of the web page. The footer area of the web page is updated stating that the "Geoprocessing service has successfully completed!". The web page is shown below.

The following is a view of the legend in the left pane of the web page.

The following shows the point clicked on the map as red dot at the center of the buffered circle. Roads and institutions affected are found within the buffer area, and these are displayed as line and point graphics.

The footer of the web page shows the status of the geoprocessing service. It could be successful or end in a failure. In the following case, the geoprocessing service ended successfully.

The following is an enlarged view of the results on people affected from the geoprocessing service. People have been classified on sex, age and race.

Source code for the HTML web page is given below:

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Oil Seeps Impact Assessment in Los Angeles</title>

dojo.require("esri.map");

dojo.require("esri.tasks.gp");

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("dijit.layout.AccordionContainer");

dojo.require("esri.dijit.Legend");

dojo.require("esri.arcgis.utils");

dojo.require("dijit.form.CheckBox");

var map, gp;

var legendLayers = [];

/*Initialize map, GP*/

function init() {

//Initial extent

var initialExtent = new esri.geometry.Extent({ "xmin": -13188846.440349087, "ymin": 3989005.3098947424, "xmax": -13157184.09861146, "ymax": 4003136.032764758, "spatialReference": { "wkid": 102100 } });

map = new esri.Map("map", { extent: initialExtent });

//Add map service

var baseLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

var seepLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://yourURL:6080/arcgis/rest/services/SeepImpacts/MapServer", { "opacity": 1.0 });

//Legend

legendLayers.push({layer:seepLayer,title:"seep"});

dojo.connect(map,'onLayersAddResult',function(results){

var legend = new esri.dijit.Legend({

map:map,

layerInfos:legendLayers

},"legendDiv");

legend.startup();

});

//Add layers to map

map.addLayers([baseLayer, seepLayer]);

//gp = new esri.tasks.Geoprocessor("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed");

gp = new esri.tasks.Geoprocessor("http://yourURL:6080/arcgis/rest/services/ImpactAssessments/GPServer/Impact%20Assessment");

gp.setOutputSpatialReference({ wkid: 102100 });

dojo.connect(map, "onClick", computeViewShed);

}

function computeViewShed(evt) {

//alert ("computeViewShed");

map.graphics.clear();

var pointSymbol = new esri.symbol.SimpleMarkerSymbol();

pointSymbol.setSize(8);

pointSymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 8));

pointSymbol.setColor(new dojo.Color([0, 255, 0, 0.25]));

var graphic = new esri.Graphic(evt.mapPoint, pointSymbol);

map.graphics.add(graphic);

var features = [];

features.push(graphic);

var featureSet = new esri.tasks.FeatureSet();

featureSet.features = features;

var vsDistance = new esri.tasks.LinearUnit();

vsDistance.distance = 1;

vsDistance.units = "esriMiles";

var params = { "Point_of_Interest": featureSet, "Buffer_Distance": vsDistance };

//var params = { "Input_Observation_Point": featureSet, "Viewshed_Distance": vsDistance };

gp.execute(params, drawViewshed, OnFailed);

dojo.byId("footer").innerHTML = "Status: Geoprocessing in progress ...";

}

function OnFailed(error) {

dojo.byId("footer").innerHTML = "Status: Geoprocessing Service failed";

alert("Geoprocessing Service failed");

}

function drawViewshed(results, messages) {

//alert("Geoprocessing service has successfully completed");

dojo.byId("footer").innerHTML = "Status: Geoprocessing service has successfully completed";

// var features = results[4].value.features;

// featnum = features.length;

// alert (featnum);

//Create symbols for display

var polySymbol = new esri.symbol.SimpleFillSymbol();

polySymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.5]), 1));

polySymbol.setColor(new dojo.Color([255, 127, 0, 0.5]));

var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));

var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 2);

//Impacted_area - this is the buffered area

var features = results[0].value.features;

for (var f = 0, fl = features.length; f < fl; f++) {

var feature = features[f];

feature.setSymbol(polySymbol);

map.graphics.add(feature);

}

//Impacted blocks

var features = results[1].value.features;

for (var f = 0, fl = features.length; f < fl; f++) {

var feature = features[f];

feature.setSymbol(polySymbol);

map.graphics.add(feature);

}

//Impacted Institutes

var features = results[2].value.features;

for (var f = 0, fl = features.length; f < fl; f++) {

var feature = features[f];

feature.setSymbol(pointSymbol);

map.graphics.add(feature);

}

//Impacted Major Roads

var features = results[3].value.features;

for (var f = 0, fl = features.length; f < fl; f++) {

var feature = features[f];

feature.setSymbol(lineSymbol);

map.graphics.add(feature);

}

//Summary table

var features = results[4].value.features;

for (var f = 0, fl = features.length; f < fl; f++) {

var feature = features[f];

//example: feature.attributes['POP2000'];

var popsum = "" +

"WHITE: " + feature.attributes['SUM_WHITE'] + "<br />" +

"BLACK: " + feature.attributes['SUM_BLACK'] + "<br />" +

"ASIAN: " + feature.attributes['SUM_ASIAN'] + "<br />" +

"HISPANIC: " + feature.attributes['SUM_HISPANIC'] + "<br />" +

"MALES: " + feature.attributes['SUM_MALES'] + "<br />" +

"FEMALES: " + feature.attributes['SUM_FEMALES'] + "<br />" +

"AGE_UNDER5: " + feature.attributes['SUM_AGE_UNDER5'] + "<br />" +

"AGE_18_21: " + feature.attributes['SUM_AGE_18_21'] + "<br />" +

"AGE_UNDER5: " + feature.attributes['SUM_AGE_UNDER5'] + "<br />" +

"AGE_22_29: " + feature.attributes['SUM_AGE_22_29'] + "<br />" +

"AGE_30_39: " + feature.attributes['SUM_AGE_30_39'] + "<br />" +

"AGE_40_49: " + feature.attributes['SUM_AGE_40_49'] + "<br />" +

"AGE_50_64: " + feature.attributes['SUM_AGE_50_64'] + "<br />" +

"AGE_65_UP: " + feature.attributes['SUM_AGE_65_UP'] + "<br />"

//alert(popsum);

//dojo.byId("summary").innerHTML = popsum;

dojo.byId("rightPane").innerHTML = popsum;

}

dojo.ready(init);

</script>

</head>

<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer"

data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">

Oil Seepage Impact Assessment in Los Angeles

<div id="subheader">Click on map to execute Oil Seepage Impact Assessment Task</div>

</div>

</div>

<p>Content for pane 2</p>

</div>

<p>Content for pane 3</p>

</div>

</div>

<p>Summary of People Impacted</p>

</div>

this is the footer section

</div>

</body>

</html>

Bruins Geospatial

Sunday, February 3, 2013

ArcGIS Server Based Web Application for Oil Seepage Impact Assessment in Los Angeles

No comments:

Post a Comment

Go Bruins!