Publish wms service from geoserver using javascript API

2380
5
02-06-2011 11:54 AM
New Contributor
Hi ALL,

I have loaded a shape file to geoserver and publish it as wms layer. now I' m trying to add this as a wms layer in my code, I'm not making head way about this.

my code currently loads wms layer service ana not the actual polygons l loaded into geoserver

here is my code...... can anyone help please.....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Map with WMS</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
   
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.layers.wms");
     
      dojo.declare("myWMSLayer", esri.layers.DynamicMapServiceLayer, {
                constructor: function() {
                    this.initialExtent = this.fullExtent = new esri.geometry.Extent({
                        xmin: -179.151,
                        ymin: 18.91,
                        xmax: 179.773,
                        ymax: 71.391,    
spatialReference: {
                            wkid: 2278
                        }
                    });
                    this.spatialReference = new esri.SpatialReference({
                        wkid: 4326
                    });
                    this.loaded = true;
                    this.onLoad(this);
                },
              
                getImageUrl: function(extent, width, height, callback) {
                    var params = {
                        request: "GetMap",
                        transparent: true,
                        format: "image/jpeg",
                        bgcolor: "111111",
                        version: "1.1.0",
                        layers: "cite:Prod_Fieldst",
                        styles: "default",
                      
                        //changing values
                        bbox: extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax,
                        srs: "EPSG:" + extent.spatialReference.wkid,
                        width: width,
                        height:height
                    };
                    callback("http://localhost:8080/geoserver/wms?" + dojo.objectToQuery(params));
                }
            })                   

            function init() {
                var startExtent = new esri.geometry.Extent({"xmin":-180,"ymin":-90,"xmax":180,"ymax":90,"spatialReference":{"wkid":4326}});
                var map = new esri.Map("map",{extent:startExtent});
                map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"));         
                map.addLayer(new myWMSLayer());
            }
          
            dojo.addOnLoad(init);
        </script>
  </head>
 
  <body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
      <div id="details" dojotype="dijit.layout.ContentPane" region="left" splitter="true" style="overflow:auto; width:200px;" >
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>
Reply
0 Kudos
5 Replies
New Contributor
Me too, this code did not work .

I hope to find some one could manage to do.
Reply
0 Kudos
New Contributor
hi,i can load the wms layer successfully,but if changed the api as 3.x,it doesn't work,so i want to konw wheather you have solve this problem,any suggestions would be thankful !
Reply
0 Kudos
New Contributor
i have solved the issue,but the map is dynamaticlayer,i want  to have the tiled map ,so how can i do ?
Reply
0 Kudos
New Contributor
Hi, I am trying to display a lyer from Geoserver using ESRI Javascript APi and it doesn't work.  please post a smaple code if anyone has done it succefully. thanks in advance
Reply
0 Kudos
New Contributor

This code it works. Have fun !

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>WMS</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

 

    <script src="http://js.arcgis.com/3.10/"></script>

    <script>

      dojo.require("esri.map");

      var map;

      dojo.ready(function() {

        dojo.declare("my.CityStatesRiversUSAWMSLayer", esri.layers.DynamicMapServiceLayer, {

          constructor: function() {

            this.initialExtent = this.fullExtent = new esri.geometry.Extent({"xmin":-16476154.32,"ymin":2504688.54,"xmax":-6457400.14,"ymax":7514065.62,"spatialReference":{"wkid":102100}});

            this.spatialReference = new esri.SpatialReference({wkid:102100});

            this.loaded = true;

            this.onLoad(this);

          },

          getImageUrl: function(extent, width, height, callback) {

            var params = {

              service:"WMS",

              request:"GetMap",

              transparent:true,

              format:"image/png",

              version:"1.3.0",

              layers:"Map1:planet_osm_line_Romania",

              styles:"",

              //changing values

              bbox:extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax,

              srs: "EPSG:900913",

              width: width,

              height: height

            };

            callback("http://localhost:8080/geoserver/Map1/wms?" + dojo.objectToQuery(params));

          }

        });

      });

      function init() {

        map = new esri.Map("map", {

          basemap: "satellite",

          center: [27, 45],

          zoom: 6

        });

        map.addLayer(new my.CityStatesRiversUSAWMSLayer());

      }

      dojo.ready(init);

    </script>

  </head>

  <body class="claro">

    <div id="map"  style="position:relative; width:1024px; height:512px; border:2px solid #000;"></div>

  </body>

</html>

Reply
0 Kudos