Noaa NowCoast WMS Layers? How to?

CharlesGant · ‎06-23-2014

All,

Has anyone had any luck importing the NowCoast WMS layers into the API? I'm not exactly sure how I'm supposed to set it up. Do I use the "Get Capabilities" server, do I not? Anyone have any code snippets? Below is what I have, after trying to piece it together from the sample provided on the reference page. Went the resource info route since I don't have a proxy page. Thanks in advance!

//Add Web Mapping Services (WMS) var layer1 = new WMSLayerInfo({name: '1',title: 'name1}); var layer2 = new WMSLayerInfo({name: '2',title: 'name2'}); var resourceInfo = {extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {wkid: 4326}),layerInfos: [layer1, layer2]}; var wmsLayer = new WMSLayer('http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs', {resourceInfo: resourceInfo,visibleLayers: ['1', '2']}); map.addLayers([wmsLayer]);

AnthonyGiles · ‎06-30-2014

Charles,

I think you need to actually specify your layer names in the visible layers (1 & 2 do not exist). Get your layer names from the capabilities file http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?service=wms&version=1.1.1&request=GetCapabilit...

The following code works in the sandbox (http://developers.arcgis.com/javascript/sandbox/sandbox.html)

<!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>Map with WMS</title>       <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>      <script src="http://js.arcgis.com/3.9/"></script>       <script>     var map;     require([       'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',       'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser',        'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dojo/domReady!'     ],      function(Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser) {         parser.parse();          map = new Map('map', {           basemap: 'streets',           center: [-96, 37],           zoom: 4         });          var layer1 = new WMSLayerInfo({});                 var resourceInfo = {          extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {             wkid: 4326}),          layerInfos: [layer1]        };         var wmsLayer = new WMSLayer('http://nowcoast.noaa.gov:80/wms/com.esri.wms.Esrimap/obs?', {           resourceInfo: resourceInfo,           visibleLayers: ['world_countries_label','world_countries','RAS_RIDGE_NEXRAD','OBS_MET_TEMP'],         });         wmsLayer.version = "1.1.1";         map.addLayers([wmsLayer]);               });     </script>    </head>       <body class="claro">       <div id="map"             data-dojo-type="dijit.layout.ContentPane"             data-dojo-props="region:'center'"             style="overflow:hidden;">        </div>       </div>    </body>  </html>

Regards

Anthony

View solution in original post

CharlesGant · ‎06-24-2014

Any help that anyone could provide would be greatly appreciated. Thanks!

CharlesGant · ‎06-30-2014

Any help that anyone could provide would be greatly appreciated. Thanks!

AnthonyGiles · ‎06-30-2014

Charles,

I think you need to actually specify your layer names in the visible layers (1 & 2 do not exist). Get your layer names from the capabilities file http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?service=wms&version=1.1.1&request=GetCapabilit...

The following code works in the sandbox (http://developers.arcgis.com/javascript/sandbox/sandbox.html)

<!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>Map with WMS</title>       <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>      <script src="http://js.arcgis.com/3.9/"></script>       <script>     var map;     require([       'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',       'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser',        'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dojo/domReady!'     ],      function(Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser) {         parser.parse();          map = new Map('map', {           basemap: 'streets',           center: [-96, 37],           zoom: 4         });          var layer1 = new WMSLayerInfo({});                 var resourceInfo = {          extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {             wkid: 4326}),          layerInfos: [layer1]        };         var wmsLayer = new WMSLayer('http://nowcoast.noaa.gov:80/wms/com.esri.wms.Esrimap/obs?', {           resourceInfo: resourceInfo,           visibleLayers: ['world_countries_label','world_countries','RAS_RIDGE_NEXRAD','OBS_MET_TEMP'],         });         wmsLayer.version = "1.1.1";         map.addLayers([wmsLayer]);               });     </script>    </head>       <body class="claro">       <div id="map"             data-dojo-type="dijit.layout.ContentPane"             data-dojo-props="region:'center'"             style="overflow:hidden;">        </div>       </div>    </body>  </html>

Regards

Anthony

CharlesGant · ‎06-30-2014

Anthony,

Works like a charm! Thanks a million!

Charles

Charles,

I think you need to actually specify your layer names in the visible layers (1 & 2 do not exist). Get your layer names from the capabilities file http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?service=wms&version=1.1.1&request=GetCapabilit...

The following code works in the sandbox (http://developers.arcgis.com/javascript/sandbox/sandbox.html)

<!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>Map with WMS</title> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style> 
      html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style> 
    <script src="http://js.arcgis.com/3.9/"></script> 

    <script>
    var map;
    require([
      'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
      'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser', 
      'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', 'dojo/domReady!'
    ], 
    function(Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser) {
        parser.parse();

        map = new Map('map', {
          basemap: 'streets',
          center: [-96, 37],
          zoom: 4
        });

        var layer1 = new WMSLayerInfo({});
       
        var resourceInfo = {
         extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {
            wkid: 4326}),
         layerInfos: [layer1]
       };
        var wmsLayer = new WMSLayer('http://nowcoast.noaa.gov:80/wms/com.esri.wms.Esrimap/obs?', {
          resourceInfo: resourceInfo,
          visibleLayers: ['world_countries_label','world_countries','RAS_RIDGE_NEXRAD','OBS_MET_TEMP'],
        });
        wmsLayer.version = "1.1.1";
        map.addLayers([wmsLayer]);

        
    });
    </script>

  </head> 
  
  <body class="claro"> 
     <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'" 
           style="overflow:hidden;"> 
      </div> 

    </div> 
  </body> 
</html>

Regards

Anthony

AnthonyGiles · ‎06-30-2014

Charles,

No probs, glad you have got it working, please don't forget to mark the post as answered by checking the tick box on my post and hitting the up arrow,

Regards

Anthony

CharlesGant · ‎07-01-2014

Charles,

No probs, glad you have got it working, please don't forget to mark the post as answered by checking the tick box on my post and hitting the up arrow,

Regards

Anthony

Done! One more quick question however, how would I incorporate the following layerinfo link into the WMSLayerInfos? Cant seem to figure this out. Thanks.

link: http://nowcoast.noaa.gov/LayerInfo?layer=RAS_RIDGE_NEXRAD&data=timestamp

   var layers = new WMSLayerInfo({});
   var resourceInfo = {extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.5283203125, {wkid: 4326}),layerInfos: [layers]};
   
   var wmsRadarLayer = new WMSLayer('http://nowcoast.noaa.gov:80/wms/com.esri.wms.Esrimap/obs?', {resourceInfo: resourceInfo,visibleLayers: ['RAS_RIDGE_NEXRAD'],"visible":false, opacity:0.7});
   wmsRadarLayer.version = "1.1.1";