topic Re: Noaa NowCoast WMS Layers? How to? in ArcGIS JavaScript Maps SDK Questions

Noaa NowCoast WMS Layers? How to?

CharlesGant — Mon, 23 Jun 2014 09:41:23 GMT

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]);

Re: Noaa NowCoast WMS Layers? How to?

CharlesGant — Wed, 25 Jun 2014 02:29:32 GMT

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

Re: Noaa NowCoast WMS Layers? How to?

CharlesGant — Mon, 30 Jun 2014 11:29:32 GMT

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

Re: Noaa NowCoast WMS Layers? How to?

AnthonyGiles — Mon, 30 Jun 2014 12:44:06 GMT

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=GetCapabilities

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

Re: Noaa NowCoast WMS Layers? How to?

CharlesGant — Sat, 11 Dec 2021 08:39:37 GMT

Anthony,

Works like a charm! Thanks a million!

Charles

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

Re: Noaa NowCoast WMS Layers? How to?

AnthonyGiles — Mon, 30 Jun 2014 15:27:19 GMT

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

Re: Noaa NowCoast WMS Layers? How to?

CharlesGant — Sat, 11 Dec 2021 08:39:40 GMT

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