Using FEMA rest end point

jaykapalczynski · ‎12-13-2017

I am trying to add FEMA map service

FEMA: Mapping Information Platform: NOPAGETAB_NFHLWMS

Index number 28 from above link.

I am doing this:

I know there is an scale of 50,000 but no matter my zoom it does not render in my map. I dont see any errors associated with this in the console

Thoughts?

var FloodZonelayer = new FeatureLayer("https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer/28", {
    mode: FeatureLayer.MODE_SNAPSHOT,
    visible: true
});     
legendLayers.push({ layer: FloodZonelayer, title: 'Flood Zones' });



map.addLayers([FloodZonelayer]);
     
‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎12-14-2017

Jay,

Well you had a couple of issues in your code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/"></script>

<style>
html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

<script>
require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ImageParameters",
    "dojo/domReady!"
  ],
  function(
    Map,
    ArcGISDynamicMapServiceLayer,
    ImageParameters
  ) {

    var map = new Map("map", {
      basemap: "gray",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    var imageParameters = new ImageParameters();
    imageParameters.format = "PNG32"; //set the image type to PNG24, note default is PNG8.
    imageParameters.layerIds = [28];
    imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

    var FloodZonelayer = new ArcGISDynamicMapServiceLayer("https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer", {
      "opacity" : 0.5,
      "imageParameters" : imageParameters
    });
    map.addLayer(FloodZonelayer)

  });
</script>
</head>

<body>
  <div id="map"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎12-13-2017

Jay,

FEMA seems to be having issue with that Map Service. All requests to it are failing.

jaykapalczynski · ‎12-13-2017

OK thank you....was confused because I could open the Rest Endpoint in Chrome and query it and return data in the browser

RobertScheitlin__GISP · ‎12-13-2017

Jay,

My queries have all failed and the links on the REST page to view the Map Service in the JS Viewer fail as well.

jaykapalczynski · ‎12-13-2017

Yea my query attempts are failing now as well....hmmmm..

OK at least I am not going crazy here...lol...Patience I guess

jaykapalczynski · ‎12-14-2017

Confused because I can view the layers here....I am copying the Rest EndPoint from this app and putting it in my JS app and it does not render.

Specifically Flood Hazard Zones - index 28

https://fema.maps.arcgis.com/home/webmap/viewer.html?webmap=cbe088e7c8704464aa0fc34eb99e7f30

RobertScheitlin__GISP · ‎12-14-2017

Jay,

Which layer in that web map?..

jaykapalczynski · ‎12-14-2017

index 28

Layer: Flood Hazard Zones (ID: 28)

it shows up in their app but fails when queried via the link above.

It renders here: https://fema.maps.arcgis.com/home/webmap/viewer.html?webmap=cbe088e7c8704464aa0fc34eb99e7f30

RobertScheitlin__GISP · ‎12-14-2017

Jay,

Here is a sample that shows the layer does work it is just slo.....w:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/"></script>

<style>
html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

<script>
require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer
  ) {

    var map = new Map("map", {
      basemap: "gray",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    var featureLayer = new FeatureLayer("https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer/28");

    map.addLayer(featureLayer);

  });
</script>
</head>

<body>
  <div id="map"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎12-14-2017

OK it seems to be working sort of...missing all the blue area in the water...

Are you seeing the blue in your app?

My App

FEMA's App