how to configure proxy page - arcgis api for javascript in openlayers

InokaWijekoon · ‎01-11-2014

[HTML]<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers: Spherical Mercator</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .olControlAttribution {
            bottom: 0px;
            left: 2px;
            right: inherit;
            width: 400px;
        }
        /* conditionally position control differently for Google Maps */
        .olForeignContainer div.olControlMousePosition {
            bottom: 28px;
        }
        #map {
            height: 512px;
        }
    </style>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
   <script src="http://js.arcgis.com/3.7/"></script>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>

<script src="openlayers/lib/OpenLayers.js"></script>

</head>
<body>
    <h1 id="title">Grade one School Admission OpenLayers Spherical Mercator </h1>

    <div id="map" class="smallmap"></div>

    <script type="text/javascript">
//Arcgis API FOR JAVASCRIPTING
var map;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/config", "dojo/_base/Color", "dojo/dom", "dojo/domReady"
      ], function(
        map, FeatureLayer,
        Query, QueryTask,
        GeometryService, BufferParameters,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol,
        esriConfig, Color, dom
      ) {

        esriConfig.defaults.io.proxyUrl = "proxy.jsp";
});
         // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);
        map.addLayer(featureLayer);

// geometry service that will be used to perform the buffer
        var geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

   //when the map is clicked create a buffer around the click point of the specified distance.
        map.on("click", function(evt){
          //define input buffer parameters
          var params = new BufferParameters();
          params.geometries = [ evt.mapPoint ];
          params.distances = [ 1 ];
          params.unit = GeometryService.UNIT_STATUTE_MILE;

          geometryService.buffer(params);
        });

        geometryService.on("buffer-complete", function(result){
          map.graphics.clear();
          // draw the buffer geometry on the map as a map graphic
          var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
              new Color([105,105,105]),
              2
            ),new Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new Graphic(bufferGeometry, symbol);
          map.graphics.add(graphic);

          //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new Query();
          query.geometry = bufferGeometry;
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
            var totalPopulation = sumPopulation(results);
            var r = "";
            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
            dom.byId('messages').innerHTML = r;
          });
        });

        function sumPopulation(features) {
          var popTotal = 0;
          for (var x = 0; x < features.length; x++) {
            popTotal = popTotal + features.attributes['POP2000'];
          }
          return popTotal;
        }
      });


//Arcgis API FOR JAVASCRIPTING

    var map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:900913",
        displayProjection: "EPSG:4326",
        numZoomLevels: 18,
        // approximately match Google's zoom animation
        zoomDuration: 10
    });

    // create Google Mercator layers
    var gphy = new OpenLayers.Layer.Google(
        "Google Physical",
        {type: google.maps.MapTypeId.TERRAIN}
    );
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {numZoomLevels: 20}
    );
    var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );
    var gsat = new OpenLayers.Layer.Google(
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    );

    // create Bing layers

    // API key for http://openlayers.org. Please get your own at
    // http://bingmapsportal.com/ and use that instead.
    var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

    var veroad = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "Road",
        wrapDateLine: true
    });
    var veaer = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "Aerial",
        wrapDateLine: true
    });
    var vehyb = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "AerialWithLabels",
        wrapDateLine: true
    });

    // create OSM layers
    var mapnik = new OpenLayers.Layer.OSM();

//add school locations layer from geoserver
var kdistrict_schl = new OpenLayers.Layer.WMS(
        "School locations - Kandy", "http://localhost:8080/geoserver/wms",
        {
        layers: 'admission:kdistrict_schl',
        format:'image/png',
        transparent: true,
        styles: 'point'
        },
        {singleTile: true, buffer:0, ratio: 1}
);


// create a vector layer for drawing
    var vector = new OpenLayers.Layer.Vector("Editable Vectors");

// click event n get lat lon coordinates
   OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },

                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    );
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.trigger
                        }, this.handlerOptions
                    );
                },

                trigger: function(e) {
var toProjection = new OpenLayers.Projection("EPSG:4326");
       var lonlat = map.getLonLatFromPixel(e.xy).transform(map.getProjectionObject(), toProjection);
                    alert("You clicked near " + lonlat.lat + " N, " +
                                              + lonlat.lon + " E");
                }
            });


var click = new OpenLayers.Control.Click();
                map.addControl(click);
                click.activate();

//click event

// clustering

   map.addLayers([
        gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, vector,kdistrict_schl
    ]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.EditingToolbar(vector));
    map.addControl(new OpenLayers.Control.Permalink());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.zoomToMaxExtent();

// map.setCenter(new OpenLayers.LonLat(0,0),9);

// var map = new OpenLayers.Map("ch1_restricting_view", {
   // maxExtent: OpenLayers.Bounds.fromString
//      ("-190,-190,190,190"),
//    restrictedExtent: OpenLayers.Bounds.fromString
//       ("-190,-190,10,190")
// });

</script>

</body>
</html>
[/HTML]
I'm going to embed ArcGIS JavaScript API for j.s in openlayers sample (https://developers.arcgis.com/en/javascript/jssamples/query_buffer.html) to my Web application. using openlayer 2.13.1, ms4w .how to configure proxy page?? can anyone tell me why above code dose not work?

JonathanUihlein · ‎01-14-2014

Inoka, it helps to be as informative as possible when asking for help here.

What is the exact problem with this application?

I assume you've read the proxy page here:
https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html

At what part are you having trouble?

Please be as specific and verbose as possible. Thanks!

InokaWijekoon · ‎01-16-2014

Inoka, it helps to be as informative as possible when asking for help here.

What is the exact problem with this application?

I assume you've read the proxy page here:
https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html

At what part are you having trouble?

Please be as specific and verbose as possible. Thanks!

I'm try to configure proxy page as https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html. but it's not working. I'm using openlayer 2.13.1, ms4w in my web app. how to configure proxy page??

JonathanUihlein · ‎01-17-2014

Hi Inoka,

This is the forum for the Esri JSAPI, not the OpenLayer library.
If you have an OpenLayer issue specifically, you should make a post over at http://gis.stackexchange.com/

As far as the proxy goes, you haven't given enough information to troubleshoot the issue.
Which proxy are you using?
What error messages are you seeing?

Please give as much information as you can or it will not be possible to answer your question.