ejscreenAPI1.html

﻿<!-- 
  ***************************************************************************************************
  * Title: EJScreenAPI
  * Description: This file serves a(API) which facilitates access for external users to request the EJScreen
  *              Community Report as well as to retrieve the underlying data in a raw JSON format.
  * 
  * Author: SAIC, EPA OMS Contractor
  * Creation Date: 01/22/2024
  * Last Updated: 01/22/2024
 
  ****************************************************************************************************
-->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>EJScreen Report API</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
    <link rel="SHORTCUT ICON" href="images/ej.ico" />
    <style>
        body {
            margin: 8px;
            font-family: Verdana;
        }

        #search {
            display: block;
            position: absolute;
            z-index: 2;
            top: 20px;
            left: 74px;
        }

        #loadingDiv {
            background-color: #FFFFFF;
            border: 1px solid #CCCCCC;
            display: none;
            z-index: 500;
            position: absolute;
            left: 40%;
            top: 50%;
        }

        .formTable {
            background-color: #d9edf7;
            width: 100%;
            font-family: Verdana;
            font-size: 11pt;
            padding-top: 4px;
        }

        .blackfont {
            color: Black !important;
        }

        .custompanel {
            margin: 4px 15px 4px 15px;
            word-wrap: break-word;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="https://js.arcgis.com/4.11/"></script>
    <script type="text/javascript" src="javascript/config.js"></script>
    <script type="text/javascript" src="javascript/tagmanager.js"></script>
    <!-- <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-32633028-1', 'auto');
        ga('send', 'pageview');
    </script> -->

    <script type="text/javascript">
        require(["dojo",
            "esri/views/MapView",
            "esri/Map",
            'esri/widgets/Sketch/SketchViewModel',
            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/PopupTemplate",
            "esri/widgets/Search",
            "esri/geometry/support/webMercatorUtils",
            "esri/geometry/geometryEngine",
            "esri/config",
            "esri/request",
            "dojo/on",
            "dojo/parser",
            "dijit/registry",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
        ], function (
            dojo,
            MapView, Map, SketchViewModel,
            QueryTask,
            Query,
            SpatialReference,
            Graphic,
            GraphicsLayer,
            Point,
            Polyline,
            Polygon,
            PopupTemplate,
            Search,
            webMercatorUtils,
            geometryEngine,
            esriConfig,
            esriRequest,
            on, parser, registry
        ) {
            var pointsym = { // symbol used for points
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                style: "cross",
                color: "rgba(255, 0, 255, 1.0)",
                size: "12px",
                outline: { // autocasts as new SimpleLineSymbol()
                    color: "rgba(255, 0, 255, 1.0)",
                    width: 1 // points
                }
            };
            var linesym = { // symbol used for polylines
                type: "simple-line", // autocasts as new SimpleMarkerSymbol()
                color: "#ff0000",
                width: "2",
                style: "solid"
            };
            var polysym = { // symbol used for polygons
                type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                color: "rgba(0, 255, 0, 0.25)",
                style: "solid",
                outline: {
                    color: "red",
                    width: 2
                }
            };
            var pname = location.pathname;
            var pos = pname.lastIndexOf("/");
            pname = pname.substr(0, pos);
            var rooturl = location.protocol + "//" + location.host + pname + "/";

            var ejscreenSOEbrokerurl = rooturl + "ejscreenRESTbroker1.aspx";
            var ejscreenReportfile = "EJscreen_SOE_report.aspx";

             var charLimit = 2048;      
            var typedesc = {
                "point": "Use the location box below to find an address or place and then click on the map or enter/paste a JSON geometry string in the Geometry box.",
                "polyline": "Use the location box below to find an address or place and then click on the map to draw a line or polyline (line segments cannot cross each other). Enter 'C' to end the drawing. Or enter/paste a JSON geometry string in the Geometry box.",
                "polygon": "Use the location box below to find an address or place and then click on the map to draw a polygon (lines cannot cross each other). Click on the starting point to end the drawing. Or enter/paste a JSON geometry string in the Geometry box.",
                "rectangle": "Use the location box below to find an address or place. Hold down the mouse and drag left to define a rectangle area. Release the mouse to finish dragging. Or enter/paste a JSON geometry string in the Geometry box.",
                "blockgroup": "Use the location box below to find an address or place. Click on the map to select a Census block group. Or you can enter a FIPS code for the Census block group.",
                "tract": "Use the location box below to find an address or place. Click on the map to select a Census tract. Or you can enter a FIPS code for the Census tract.",
                "city": "Use the location box below to find an address or place. Click on the map to select a city. Or you can enter a FIPS code for the city.",
                "county": "Use the location box below to find an address or place. Click on the map to select a county. Or you can enter a FIPS code for the county."
            };

            //valid areatypes for census based inputs
            var censusidtypes = ["blockgroup", "tract", "city", "county"];
            //track whether result are from identify, used to distinguish from text input
            var valsById = false;

            var ejscreenform = dojo.byId("ejform");
            //global id and namestr, set by identify or text input;
            var areaid;
            var namestr;
           

            on(dojo.byId("submitget"), "click", function (event) {
                submitAction("get");
            });
            on(dojo.byId("submitpost"), "click", function (event) {
                submitAction("post");
            });
            on(dojo.byId("copyurl"), "click", function (event) {
                selectText("urlcontent");
                document.execCommand('copy');
            });
            on(dojo.byId("copyjson"), "click", function (event) {
                selectText("resultjson");
                document.execCommand('copy');
            });
            var marginwidth = 28;
            var bwsWidth = getWinWidth() - marginwidth;

            dojo.byId("geometry").style.width = (bwsWidth - 120) + "px";
            window.onresize = function (event) {
                var bwsWidth = getWinWidth() - marginwidth;

                dojo.byId("geometry").style.width = (bwsWidth - 120) + "px";
            };
            var geomtype;
            var idconnect = null;

            var map = new Map({
                basemap: "gray"
            });
            var view = new MapView({
                container: "map",
                map: map,
               // center: [-100.11, 36.65],
                center: [-77.0369, 38.9072],
                zoom: 10
            });
            var drawGraphicsLayer = new GraphicsLayer();
            map.add(drawGraphicsLayer);
            var search = new Search({
                container: "search",
                view: view,
                popupEnabled: false,
                resultGraphicEnabled: false
            });
            //search.startup();
            var sketchViewModel;
            view.when(function () {
                ejscreenform.reset();
                sketchViewModel = new SketchViewModel({
                    view: view,
                    layer: drawGraphicsLayer,
                    pointSymbol: pointsym,
                    polylineSymbol: linesym,
                    polygonSymbol: polysym,
                    updateOnGraphicClick: false
                });

                sketchViewModel.on("create", function (event) {
                    if (event.state === "complete") {
                        drawGraphicsLayer.removeAll();
                        var g = event.graphic;
                        drawGraphicsLayer.add(g);
                        //console.log("is simple: " + geometryEngine.isSimple(g.geometry))
                        if (geometryEngine.isSimple(g.geometry)) {
                            var mgeometry = g.geometry;
                            var geometry = webMercatorUtils.webMercatorToGeographic(mgeometry);
                            var jstr = JSON.stringify(geometry.toJSON());

                            ejscreenform.geometry.value = jstr;
                            //clearRadio();
                            if (event.tool == "polygon") {
                                setTimeout(function () {
                                    sketchViewModel.create(event.tool);
                                }, 1000);
                            } else {
                                sketchViewModel.create(event.tool);
                            }

                        } else {
                            alert("The geometry is invalid. Please draw a new one.");
                        }
                    }

                });


                var radioObj = dojo.byId("rform").inmethod;
                var rl = radioObj.length;
                for (var k = 0; k < rl; k++) {
                    if (radioObj[k].checked) {
                        var s = radioObj[k].value;
                        geomtype = s;
                        activateTool(s);
                    }
                    on(radioObj[k], "click", function (e) {
                        var s = e.target.value;
                        geomtype = s;

                        //clear areatype when the radio button is clicked
                        ejscreenform.areatype.value = "";
                        //only send census based areatypes in for report, not needed for geometry types (point,line,poly,rect)
                        if (censusidtypes.includes(geomtype.toLowerCase())) {
                            ejscreenform.areatype.value = s;
                        }

                        activateTool(s);
                    });
                }
            });

            function clearRadio() {
                var radioObj = dojo.byId("rform").inmethod;
                var rl = radioObj.length;
                for (var k = 0; k < rl; k++) {
                    radioObj[k].checked = false;

                }
            }

            function submitAction(method) {

                //test if values are from identify task
                if (valsById == false) {
                    //if not, it's from the input text box, use that as the name string
                    ejscreenform.namestr.value = ejscreenform.areaid.value;
                } else {
                    //valsById == true
                    //values are from a previous identify
                    //if the value in text box does match the previous areaid, replace with current text box value
                    if (ejscreenform.areaid.value != areaid) {
                        areaid = ejscreenform.areaid.value;
                        //update name string and remove the flag for values by identify
                        ejscreenform.namestr.value = ejscreenform.areaid.value;
                        valsById = false;
                    }
                }


                var r = validateform(ejscreenform);
                dojo.byId("forjson").style.display = "block";
                if (r) {
                    var kvpairs = [];

                    for (var i = 0; i < ejscreenform.elements.length; i++) {
                        var e = ejscreenform.elements[i];
                        if (e.type != "submit") {
                            kvpairs.push(e.name + "=" + e.value);
                        }
                    }
                    var queryString = kvpairs.join("&");
                    var poststr = kvpairs.join("<br />");

                    if (ejscreenform.f.value == "report") {
                        dojo.byId("jsondiv").style.display = "none";
                        dojo.byId("reportdiv").style.display = "block";
                        if (!(dojo.byId("reportframe"))) {
                            var iframe = document.createElement('iframe');
                            iframe.id = "reportframe";
                            iframe.name = "reportframe";
                            iframe.src = ejscreenReportfile;
                            iframe.style.width = "100%";
                            iframe.style.height = "2140px";
                            iframe.style.overflow = "auto";
                            dojo.byId("reportdiv").appendChild(iframe);
                        }
                        if (method == "get") {
                            //dojo.byId("urlcontent").innerHTML = rooturl + ejscreenReportfile + "?" + queryString;
							var urlcon = rooturl + ejscreenReportfile + "?" + queryString;
                            if(urlcon.trim().length > charLimit){
                                 alert("2048 character limit exceeded for GET. Consider using POST.");
                                 return false; 
                            }else{
                                dojo.byId("urlcontent").innerHTML = urlcon;
                            }
                        } else {

                            var postcontent = "HTTP POST URL: " + rooturl + ejscreenReportfile + "<br />HTTP POST Body:<div style='padding-left: 10px;'>" + poststr + "</div>";
                            dojo.byId("urlcontent").innerHTML = postcontent;
                        }
                        ejscreenform.action = ejscreenReportfile;
                        ejscreenform.target = "reportframe";
                        ejscreenform.method = method;
                        ejscreenform.submit();
                        document.getElementById('urlcontent').scrollIntoView();
                    } else {
                        if (dojo.byId("reportframe")) {
                            dojo.byId("reportdiv").removeChild(dojo.byId("reportframe"));
                        }
                        dojo.byId("jsondiv").style.display = "block";
                        dojo.byId("reportdiv").style.display = "none";

                        if (method == "get") {
                            //dojo.byId("urlcontent").innerHTML = ejscreenSOEbrokerurl + "?" + queryString;
							var urlcon = ejscreenSOEbrokerurl + "?" + queryString;
                            if(urlcon.trim().length > charLimit){
                                 alert("2048 character limit exceeded for GET. Consider using POST.");
                                 return false; 
                            }else{
                                dojo.byId("urlcontent").innerHTML = urlcon;
                            }
                        } else {
                            var postcontent = "HTTP POST URL: " + ejscreenSOEbrokerurl + "<br />HTTP POST Body:<div style='padding-left: 10px;'>" + poststr + "</div>";
                            dojo.byId("urlcontent").innerHTML = postcontent;
                        }
                        dojo.byId("resultjson").innerHTML = "Loading...Please wait";
                        document.getElementById('resultjson').scrollIntoView();
                        if (!method) {
                            method = "POST";
                        }
                          $.ajax({
                            type: method,
                            url: ejscreenSOEbrokerurl,
                            data: $('#ejform').serialize(),
                            dataType: 'json',
                            success: function (response) {
                                //alert(JSON.stringify(response));
                                //dojo.byId("resultjson").innerHTML = JSON.stringify(response, undefined, 2);
								 if (ejscreenform.f.value == "json"){
							       dojo.byId("resultjson").innerHTML = JSON.stringify(response);
								 
							      }else if (ejscreenform.f.value == "pjson"){
							      dojo.byId("resultjson").innerHTML = JSON.stringify(response, undefined, 2);
							     }	
								
                            },
                            error: function (err) {
                                dojo.byId("resultjson").innerHTML = JSON.stringify(err, undefined, 2);
                            }
                        });
                        
                  
                       /* $.ajax({
                            type: method,
							 url:ejscreendemogservice + "/exts/EJScreen_DemogReports/Get2021DemogACS",
                            //url: "https://ejscreen.epa.gov/arcgis/rest/services/ejscreen/ejquery/MapServer/exts/EJScreen_DemogReports/Get2021DemogACS",
                            data: $('#ejform').serialize(),
                            dataType: 'json',
                            success: function (response) {                             
                              var demogObj ={};                          
                              var respData = response.statGroupList[0].statList;
                                             $.each( respData, function( index, entry ) {       
                                                 if(includeEntryArr.includes(entry.name)){
                                                  demogObj[entry.name]= entry.value;
                                                 }
                                               });  
                              var sortedDemogObject ={};
                                               $.each( includeEntryArr, function( index, entry ) {       
                                                 if(demogObj.hasOwnProperty(entry)){
                                                    sortedDemogObject[entry]= demogObj[entry];
                                                 }
                                               });
                              if (ejscreenform.f.value == "pjson"){
							      demog = JSON.parse(JSON.stringify({'demographics':sortedDemogObject}, undefined, 2));  
								 
							    }else if (ejscreenform.f.value == "json"){
							      demog = JSON.parse(JSON.stringify({'demographics':sortedDemogObject}));  
							   }											   
                              //demog = JSON.parse(JSON.stringify({'demographics':sortedDemogObject}, undefined, 2));                       
                                            $.ajax({
                                            type: method,
											 url:ejscreenservice + "/exts/EJCensusReports/GetEJScreen",
                                            //url: "https://ejscreen.epa.gov/arcgis/rest/services/ejscreen/ejscreen_v2023_with_as_cnmi_gu_vi/MapServer/exts/EJCensusReports/GetEJScreen",
                                            data: $('#ejform').serialize(),
                                            dataType: 'json',
                                            success: function (response) {
                                            // alert(JSON.stringify(response));
                                            // dojo.byId("resultjson").innerHTML = JSON.stringify({'main':response}, undefined, 2);;
                                            
                                             //main = JSON.parse(JSON.stringify({'main':response}, undefined, 2));
											 if (ejscreenform.f.value == "pjson"){
											  main = JSON.parse(JSON.stringify({'main':response}, undefined, 2));
											 
											}else if (ejscreenform.f.value == "json"){
											  main = JSON.parse(JSON.stringify({'main':response}));
										   }	
											 //06/22/2023 Setting NA for EPA IRA Disadvantaged 
                                           //if( main.main.YESNO_IRADIS ){
                                            // main.main.YESNO_IRADIS = 'N/A'
                                           //}
                                                        $.ajax({
                                                        type: method,
														 url:ejscreenextraservice + "/exts/EJCensusReports/GetEJExtra",
                                                       // url: "https://ejscreen.epa.gov/arcgis/rest/services/ejscreen/ejscreen_extra/MapServer/exts/EJCensusReports/GetEJExtra",
                                                        data: $('#ejform').serialize(),
                                                        dataType: 'json',
                                                        success: function (response) {
                                                        // alert(JSON.stringify(response));
                                                        //  dojo.byId("resultjson").innerHTML = JSON.stringify({'':response}, undefined, 2);;
                                                       // extras = JSON.parse(JSON.stringify({'extras':response}, undefined, 2));
										   if (ejscreenform.f.value == "pjson"){
											 extras = JSON.parse(JSON.stringify({'extras':response}, undefined, 2));
											 
											}else if (ejscreenform.f.value == "json"){
											 extras = JSON.parse(JSON.stringify({'extras':response}));
										   }	
                                                        const mergedObject = {
                                                                                ...demog,
                                                                                ...main,
                                                                                ...extras
                                                                                };
                                                        dojo.byId("resultjson").innerHTML = JSON.stringify({'data':mergedObject}, undefined, 2);
														if (ejscreenform.f.value == "pjson"){
											dojo.byId("resultjson").innerHTML = JSON.stringify({'data':mergedObject}, undefined, 2);
											 
											}else if (ejscreenform.f.value == "json"){
											dojo.byId("resultjson").innerHTML = JSON.stringify({'data':mergedObject});
										   }	
														
                                                        },
                                                        error: function (err) {
                                                            dojo.byId("resultjson").innerHTML=  JSON.stringify(err, undefined, 2);
                                                        }
                                                    });
                                                
                                            },
                                            error: function (err) {
                                                dojo.byId("resultjson").innerHTML=  JSON.stringify(err, undefined, 2);
                                            }
                                        });

                            },
                            error: function (err) {
                                dojo.byId("resultjson").innerHTML = JSON.stringify(err, undefined, 2);
                            }
                        }); */
                       
                       
                        /*    esriRequest(ejscreenSOEbrokerurl, {
                                query: queryString,
                                responseType: "json",
                                callbackParamName: "callback"
                            }, {
                                "usePost": true
                            }).then(function (result) {
                                dojo.byId("resultjson").innerHTML = JSON.stringify(result.data, undefined, 2);
                            }).catch(function (err) {
                                dojo.byId("resultjson").innerHTML = "error occurred: " + err;
                            });*/
                    }
                }
            }

            function activateTool(mtype) {

                ejscreenform.reset();
                drawGraphicsLayer.removeAll();
                if (dojo.byId("reportframe")) {
                    var iframe = dojo.byId("reportframe");
                    dojo.byId("reportdiv").removeChild(iframe);
                }
                dojo.byId("censusdiv").style.display = "none";
                dojo.byId("geomdiv").style.display = "none";
                dojo.byId("forjson").style.display = "none";
                if (idconnect != null) {
                    idconnect.remove();
                    idconnect = null;
                }
                dojo.byId("methodnote").innerHTML = "Note: " + typedesc[mtype];
                switch (mtype.toLowerCase()) {
                    case "blockgroup":
                    case "tract":
                    case "city":
                    case "county":
                        sketchViewModel.cancel();;
                        if (idconnect == null) {
                            idconnect = on(view, "click", doIdentify);
                        }
                        dojo.byId("censusdiv").style.display = "block";
                        break;
                    case "point":
                        sketchViewModel.create("point");
                        ejscreenform.distance.value = "1";
                        dojo.byId("geomdiv").style.display = "block";
                        break;
                    case "line":
                    case "polyline":
                        sketchViewModel.create("polyline");;
                        ejscreenform.distance.value = "1";
                        dojo.byId("geomdiv").style.display = "block";
                        break;
                    case "polygon":
                        sketchViewModel.create("polygon");
                        dojo.byId("geomdiv").style.display = "block";
                        break;
                    case "rectangle":
                        sketchViewModel.create("rectangle");
                        dojo.byId("geomdiv").style.display = "block";
                        break;
                }
            }


            function doIdentify(evt) {
                console.log("identify")
                showLoading();
                drawGraphicsLayer.removeAll();
                var lindex = typelookup[geomtype].layer;
                var idfield = typelookup[geomtype].idfield;
                var namefld = typelookup[geomtype].namefield;
                var layerurl = typelookup[geomtype].url;
                var bgurl = layerurl + "/" + lindex;
                var queryfields = [idfield];
                if (idfield != namefld) queryfields.push(namefld);


                var query = new Query();
                query.returnGeometry = true;
                query.outFields = queryfields;
                query.geometry = evt.mapPoint;
                query.geometryPrecision = 1;
                query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;

                var queryTask = new QueryTask(bgurl);

                queryTask.execute(query).then(function (results) {
                    if (results.features.length > 0) {

                        var feature = results.features[0];


                        var featureAttributes = feature.attributes;
                        areaid = featureAttributes[idfield];
                        namestr = featureAttributes[namefld];

                        ejscreenform.areaid.value = areaid;


                        ejscreenform.namestr.value = namestr;
                        ejscreenform.geometry.value = "";
                        ejscreenform.distance.value = "";

                        var graphic = new Graphic(feature.geometry, polysym);
                        drawGraphicsLayer.add(graphic);
                        //track if vals by identify vs text input
                        valsById = true;

                    } else {
                        alert("Did not find a feature!");
                    }
                    hideLoading();
                }).catch(function (err) {
                    alert("error occurred when querying block group: " + err);
                    hideLoading();

                });
            }

            function showLoading() {
                dojo.byId("loadingDiv").style.display = "block";
            }

            function hideLoading() {
                dojo.byId("loadingDiv").style.display = "none";
            }

            function getWinWidth() {
                var myWidth = 0;
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    myWidth = window.innerWidth;
                } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                }
                return myWidth;
            }

            function validateform(frm) {
                if (dojo.byId("censusdiv").style.display == "block") {
                    var idvalue = dojo.trim(frm.areaid.value);
                    var idtype = frm.areatype.value;
                    //var idtype= geomtype;
                    if (idvalue == "") {
                        alert("Please input FIPS code!");
                        return false;
                    } else {

                        if (idtype == "blockgroup") {
                            var bgreg = /^\d{12}$/;
                            if (bgreg.test(idvalue)) {
                                return true;
                            } else {
                                alert("Invalid blockgroup ID. It needs to be 12 digits.");
                                return false;
                            }
                        } else if (idtype == "tract") {
                            var trreg = /^\d{11}$/;
                            if (trreg.test(idvalue)) {
                                return true;
                            } else {
                                alert("Invalid tract ID. It needs to be 11 digits.");
                                return false;
                            }
                        } else if (idtype == "city") {
                            var cityreg = /^\d{7}$/;
                            if (cityreg.test(idvalue)) {
                                return true;
                            } else {
                                alert("Invalid city FIPS code. It needs to be 7 digits.");
                                return false;
                            }
                        } else if (idtype == "county") {
                            var cnreg = /^\d{5}$/;
                            if (cnreg.test(idvalue)) {
                                return true;
                            } else {
                                alert("Invalid county FIPS code. It needs to be 5 digits.");
                                return false;
                            }
                        } else {
                            alert("Invalid type!");
                            return false;
                        }
                    }
                } else {

                    var gvalue = dojo.trim(frm.geometry.value);
                    if (gvalue == "") {
                        alert("Please input geometry string!");
                        return false;
                    } else {
                        try {
                            var gobj = JSON.parse(gvalue);
                            var bdist = dojo.trim(frm.distance.value);

                            if (((gobj.x) || (gobj.paths)) && ((bdist == "") || (bdist == "0"))) {
                                alert("For point or line geometry, a buffer > 0 is required!");
                                return false;
                            } else {
                                var distreg = /[a-z]/i;
                                if (distreg.test(bdist)) {
                                    alert("Buffer Size needs to be numeric value!");
                                    return false;
                                }
                                var geometry, gtype;
                                if (gobj.x) {
                                    gtype = "point";
                                    geometry = new Point(gobj);
                                } else if (gobj.paths) {
                                    gtype = "polyline";
                                    geometry = new Polyline(gobj);
                                } else if (gobj.rings) {
                                    gtype = "polygon";
                                    geometry = new Polygon(gobj);
                                } else {
                                    alert("Invalid geometry.");
                                    return false;
                                }
                                var bunit = dojo.trim(frm.unit.value);
                                var showArea = checkArea(geometry, gtype, bdist, bunit);
                                if (showArea) {
                                    return true;
                                } else {
                                    alert("The area is too large to run the analysis report. Please refine the study area.");
                                    return false;
                                }

                            }
                        } catch (e) {
                            alert("Invalid geometry json string.");
                            return false;
                        }
                    }

                }
            }

            function checkArea(cgeom, gtype, radius, unit) {

                var arealimit = 500;
                var showanalysis = true;
                var geom, mgeom;
                var unitnumber="";
                if (cgeom.spatialReference.wkid == 4326) {
                    geom = cgeom;
                    mgeom = webMercatorUtils.geographicToWebMercator(cgeom);
                } else {
                    geom = webMercatorUtils.webMercatorToGeographic(cgeom);
                    mgeom = cgeom;
                }
                
                if(unit='mile'){
                    unitnumber='9035'
                }else if(unit='kilometer'){
                    unitnumber='9036'
                }
                if (Number(radius) > 0) {
                    var bufGeoms;
                    if (gtype == "point") {
                        bufGeoms = geometryEngine.geodesicBuffer([geom], [radius], unitnumber, true);
                    } else {
                        bufGeoms = geometryEngine.buffer([mgeom], [radius], unitnumber, true);
                    }
                    if (bufGeoms.length == 1) {
                        var polyarea = geometryEngine.geodesicArea(bufGeoms[0], "square-miles");
                        console.log("area: " + polyarea);
                        if (parseFloat(polyarea) > arealimit) {
                            showanalysis = false;
                        } else {
                            showanalysis = true;
                        }
                    } else {
                        showanalysis = false;
                    }
                } else {
                    var polyarea = geometryEngine.geodesicArea(geom, "square-miles");
                    if (parseFloat(polyarea) > arealimit) {
                        return false;
                    } else {
                        return true;
                    }

                }
                return showanalysis;
            }

            function selectText(containerid) {
                if (document.selection) {
                    var range = document.body.createTextRange();
                    range.moveToElementText(document.getElementById(containerid));
                    range.select();
                } else if (window.getSelection) {
                    window.getSelection().removeAllRanges();
                    var range = document.createRange();
                    range.selectNode(document.getElementById(containerid));
                    window.getSelection().addRange(range);
                }
            }
        });
    </script>
</head>

<body>

    <div class="container-fluid">
        <div class="row padding">
            <div class="custompanel">
                <h4>EJScreen Report API
                    <a href="EJAPIinstructions.pdf" class="btn btn-link btn-sm" role="button" target="_blank"
                        title="Instruction">Help</a>
                </h4>

                <form id="rform" onsubmit="return false;">
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="point" checked />Point
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="polyline" />Line
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="polygon" />Polygon
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="rectangle" />Rectangle
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="blockgroup" />Blockgroup
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="tract" />Tract
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="city" />City
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inmethod" value="county" />County
                    </label>
                </form>

                <div id="methodnote" style="background-color: #EEEEEE; font-size: 10pt; margin: 8px 0px 8px 0px;"></div>
            </div>
        </div>
        <div class="row padding">
            <div class="custompanel">
                <div id="map" style="position: relative;width: 100%; height: 450px; margin-bottom: 4px;">
                    <div id="search"></div>
                    <div id="loadingDiv">Please wait...</div>
                </div>
            </div>
        </div>
        <div class="row padding">
            <div class="custompanel">
                <form id="ejform" onsubmit="return false;">
                    <input type="hidden" name="namestr" value="" />

                    <table id="geomdiv" class="formTable">
                        <tr valign="top">
                            <td width="90px">Geometry:</td>
                            <td align="left">
                                <textarea id="geometry" name="geometry" rows="3"></textarea>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td nowrap>Buffer Size:</td>
                            <td align="left">
                                <input type="text" name="distance" value="" />
                            </td>
                        </tr>
                        <tr valign="top">
                            <td nowrap>Buffer Unit:</td>
                            <td align="left">
                                <select name="unit" size="1">
                                    <option value="9035" selected>mile</option>
                                    <option value="9036">kilometer</option>
                                </select>
                            </td>
                        </tr>
                    </table>

                    <table id="censusdiv" class="formTable">

                        <tr>
                            <td width="90px" nowrap>FIPS Code:</td>
                            <td align="left">
                                <input type="hidden" name="areatype" value="" />
                                <input type="text" name="areaid" value="" />
                            </td>
                        </tr>
                    </table>

                    <table class="formTable">
                        <tr>
                            <td width="90px">Format:</td>
                            <td align="left">
                                <select name="f">
                                    <option value="json" selected>json</option>
                                    <option value="pjson">pjson</option>
                                    <option value="report">report</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <button id="submitget" title="Get result (GET)">Submit (GET)</button>
                                <button id="submitpost" title="Get result (POST)">Submit (POST)</button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="row padding" id="forjson" style="display: none;">
            <div class="custompanel">
                <div class="panel panel-info">
                    <div class="panel-heading blackfont">API Url<button style="float: right; cursor: pointer;"
                            id="copyurl">Copy</button></div>
                    <div class="panel-body" id="urlcontent">Panel Content</div>
                </div>
                <div class="panel panel-info" id="jsondiv" style="display: none;">
                    <div class="panel-heading blackfont">Results (<a href="ejsoefielddesc1.html" target="_blank">Field
                            Description</a>)<button style="float: right; cursor: pointer;" id="copyjson">Copy</button>
                    </div>
                    <pre class="panel-body" id="resultjson">Panel Content</pre>
                </div>
                <div class="panel panel-info" id="reportdiv" style="display: none;">
                    <div class="panel-heading blackfont">Results</div>

                </div>
            </div>
        </div>
    </div>
</body>

</html>