nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Noaa NowCoast WMS Layers? How to?

CharlesGant

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

Encuentra más publicaciones etiquetadas con

Accepted answers

AntGiles

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

All comments

CharlesGant

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

CharlesGant

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

AntGiles

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

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

AntGiles

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

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.