artinki

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

Discussion created by artinki on Jan 11, 2014
Latest reply on Jan 17, 2014 by JUihlein-esristaff
[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">
    <!--[if lte IE 6]>
        <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
    <![endif]-->
    <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>
  <!-- change this code -->
  <script src="openlayers/lib/OpenLayers.js"></script>

  </head>
  <body>
    <h1 id="title">Grade one School Admission OpenLayers Spherical Mercator </h1>
<!--
    <div id="tags">
        spherical, mercator, osm, xyz, google, virtual earth, tile
    </div>
    <p id="shortdesc">
    //    Shows the use of the Spherical Mercator Layers, for overlaying
        Google, Microsoft, and other layers with XYZ tiles.
    </p> 
-->
    <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[x].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?

Outcomes