Publish wms service from geoserver using javascript API

Matildaobaseki · ‎02-06-2011

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">
    
    <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>

WaelSoltan · ‎03-27-2013

Me too, this code did not work .

I hope to find some one could manage to do.

jingyinghao · ‎07-30-2013

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 !

jingyinghao · ‎07-31-2013

i have solved the issue,but the map is dynamaticlayer,i want to have the tiled map ,so how can i do ?

surenderkaranam · ‎08-01-2013

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

SorinAndrei1 · ‎09-28-2014

This code it works. Have fun !

<!DOCTYPE html>

<html>

<head>

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

on iOS devices-->

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>

</html>