akirti

ArcGIS Geomtry Service Configuration & Response publishing in different web App

Discussion created by akirti on Jun 6, 2013
Latest reply on Jun 6, 2013 by svakil-esristaff
Hello All,
Background : I am new to ArcGIS. Currently I'm working on Migration of 1 Web Application which was build upon WebADF , Vb.Net using Ajaxcontrolles,*.acmx,*.aspx etc. Now we are migrating this Applicaiton to ArcGIS Javascript API.
Problem : When I'm using Online Geometry Service with :http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer giving me issue like following:

Issues :

  1. XMLHttpRequest cannot load http://services.arcgisonline.com/ArcGIS/rest/info?f=json. Origin http://localhost:49236 is not allowed by Access-Control-Allow-Origin. mainform.aspx:1 1.  Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:235 XMLHttpRequest cannot load http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer/�?�atialReference%22%3A%7B%22wkid%22%3A102113%7D%7D%5D%7D&transformation=4326. Origin http://localhost:49236 is not allowed by Access-Control-Allow-Origin.

  2. http://localhost:49236/arcgisserver/apis/javascript/proxy/proxy.ashx?http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer/project (404 not found) -- Here I  have no proxy.aspx etc in my project



/* Map code*/
/// <reference path="esri-jsapi-vsdoc.js" />

dojo.require("esri.map");
dojo.require("esri.tasks.geometry");
dojo.require("esri.arcgis.utils");

var map, geometryService;
var LATLANGS;
var gsvc;
var xmin=-144.13584773952124;
var ymin = 7.981485927970198;
var xmax = -52.76454682003924;
var ymax = 68.8956865409582;
var wkid_base = 4326;
var fromWKID = 102113;
var toWKID = 4326; 
var gometry_url_base = "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";
var pin_width = 16;
var pin_height = 16;
var base_center_map = [-75.67, 39.69];
var defaultZoom = 12;
var map_uiid = "basemapid";
var temp_layers = [];
function init() {
   
}
/* Runs when full document get Loaded */
//dojo.ready(init);

/* create Base Map if <map> parameter is null*/
function mapProxySettings() {
    
    esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
    esri.config.defaults.io.alwaysUseProxy = false;
    esri.config.defaults.io.corsEnabledServers.push("tasks.arcgisonline.com");
    esri.config.defaults.io.corsDetection = true;      
   
}
/* Main Function Called From DataManagerWithMap.ascx */
function rscMap(json) {
   
    createMap(json);
    var prms = transformMultiPoints(json, fromWKID, toWKID);
    var symbol = defaultSymbol();
    projectPointsOnMap(prms, toWKID, symbol,false);
    
}

/* FUNCTION FOR MARKER HIGHLIGHT*/
function rscMapselectedrows(jsonSelete) {    
    var prms = transformMultiPoints(jsonSelete, fromWKID, toWKID);
    var symbol = defaultSymbol();
    projectPointsOnMap(prms, toWKID, symbol, true);  
}
/* Responsible for Creating Base Map*/
function createMap(json) {
   
    if (map == null) {
        map = new esri.Map(map_uiid, {
            basemap: "streets",
            center: base_center_map, //long, lat
            zoom: defaultZoom
        });
        createGeometryService(gometry_url_base);
    }    
    
}
/* create geometry Service */
function createGeometryService(gmurl) {
   
    geometryService = new esri.tasks.GeometryService(gmurl);
    console.log(geometryService);
    mapProxySettings();
   
}
/*Transform Points from JSON */
function transformMultiPoints(json, fromwkid, towkid) {   
    var PrjParams = null;
    if (json) {
          if (json.points) {
             if (fromwkid != towkid) {
                var outSR = new esri.SpatialReference({ wkid: towkid });
                var mp = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid: towkid }));
                mp.points = json.points;
                PrjParams = new esri.tasks.ProjectParameters();
                PrjParams.geometries = [mp];
                PrjParams.outSR = outSR;
                PrjParams.transformation = {
                    wkid: parseInt(towkid)
                }
            }
        }
    }   
    return PrjParams;
}
function projectPointsOnMap(projectionParams, towkid, symbol, selection) {
 
    if (symbol == null) {
        symbol = defaultSymbol();
    }
    if (selection) {
        symbol = highlightSymbol(); 
    }   
    if (selection ==false && map != null && temp_layers.length > 0) {
        clearLayers();
    }
    geometryService.project(projectionParams, function (outputpoint) {
        var mp = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid: towkid }));
        mp.points = outputpoint[0].points;       
        mp = esri.geometry.geographicToWebMercator(mp);
        var graphic = new esri.Graphic(mp, symbol);
        var layer = new esri.layers.GraphicsLayer();
        layer.add(graphic);
        map.addLayer(layer);
        temp_layers.push(layer);       
        if (outputpoint[0].points.length > 0) {
            map.centerAndZoom(outputpoint[0].points[0], defaultZoom);          
        } else {
            map.centerAndZoom(base_center_map, defaultZoom);          
        }
    });   
}

function clearLayers() {
   
    dojo.forEach(temp_layers, function (layer) {
        map.removeLayer(layer);
    });
    temp_layers = [];    
}

/* Default Symbol Marker Green Color PIN*/
function defaultSymbol() {
    
    var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0, "xoffset": 0, "yoffset": 12,
        "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Basic/SpringGreenStickpin.png",
        "imageData": "", 
        "contentType": "image/png", "width": 24, "height": 24 });
   
    return symbol;
}
/* High Light Symbol Marker Orange Color PIN*/
function highlightSymbol() {
   
    var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0, "xoffset": 0, "yoffset": 12,
        "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Basic/OrangeStickpin.png",
        "imageData": "", 
        "contentType": "image/png", "width": 24, "height": 24 });
    
    return symbol;
}



auto Map XHR Request :
http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer/project?f=json&outSR=4326&inSR=4326&geometries={%22geometryType%22%3A%22esriGeometryMultipoint%22%2C%22geometries%22%3A[{%22points%22%3A[[-75.656784%2C39.560282]%2C[-75.632698%2C39.58751]%2C[-75.65255%2C39.577474]%2C[-75.686066%2C39.547535]%2C[-75.682438%2C39.54095]%2C[-75.694216%2C39.575307]%2C[-75.651307%2C39.580395]%2C[-75.6482%2C39.575169]%2C[-75.648215%2C39.549923]%2C[-75.687168%2C39.57538]%2C[-75.629991%2C39.536007]%2C[-75.699769%2C39.567282]%2C[-75.645382%2C39.543401]%2C[-75.63618%2C39.571134]%2C[-75.6197%2C39.560688]%2C[-75.627753%2C39.529639]%2C[-75.677432%2C39.560432]%2C[-75.686516%2C39.593999]%2C[-75.677395%2C39.582762]%2C[-75.674255%2C39.572248]%2C[-75.619297%2C39.553027]%2C[-75.675617%2C39.515461]%2C[-75.650513%2C39.5791]%2C[-75.63412%2C39.587994]%2C[-75.638361%2C39.5767]%2C[-75.610946%2C39.544501]%2C[-75.617597%2C39.55509]%2C[-75.66168%2C39.561739]%2C[-75.653888%2C39.521338]]%2C%22spatialReference%22%3A{%22wkid%22%3A4326}}]}&transformation=4326

Response when I copy pase above in Browser
{"geometryType":"esriGeometryMultipoint","geometries":[{"points":[[-75.656784,39.560282],.. and more}]}

How to solve this X browser access origion policy issuse?
More about configuration i need to know:
1. Do I need to run some Geometry Service? / Do I need to have any ArcGIS sever On My side while I work with JS api?
2. How to Configure Proxy?
3. I looked into http://developers.arcgis.com/en/javascript/jshelp/inside_esri_request.html and tried setting proxy.ashx c# and proxy.config wit vb.net (My project stop running and gives different error).
Please help I have 24hrs to solve this else I'll be in big trouble. I already did enough from 2 days :( but no success.
Waiting for your kind reply
Kirti

Outcomes