AnsweredAssumed Answered

Publish wms service from geoserver using javascript API

Question asked by obaseki123 on Feb 6, 2011
Latest reply on Sep 28, 2014 by sorin.andrei
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>

Outcomes