Why do my ArcGIS API for JavaScript maps not load?

5586
6
11-20-2016 08:15 PM
DevinBartley2
New Contributor III

I have tried to load a variety of web maps through the ArcGIS API for Javascript, however when I try to view the page the map displays totally blank with only the zoom (plus and minus) buttons showing in gray. I am developing on a Mac using Brackets and Chrome. I should note that the maps work fine in the same browser if I view the normal map through ArcGIS online, and they also load great if I plug in the portal item ID into the sandbox environment that is hosted on the ESRI website. I am getting no errors in the developers console when I try to load the maps, just a blank white page with the zoom in and zoom out icons.

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

GIS Canmore,

   Is there a certain sample you are using or some code that you can share?

thejuskambi
Occasional Contributor III

Is there any error in the console?

0 Kudos
DevinBartley
New Contributor II

There is no console error. I've pasted an example below (I have tried many variations all with the same problem). This is actually copied and pasted directly from the "Load a Web Map" sandbox sample that ESRI provides online, just with my own web map id pasted in. When I load this map in their sandbox environment it works great, but it doesn't load in my Brackets preview. For some background - I've used Brackets to create maps using the Leaflet API and CartoDB API and never experienced a similar problem. I also tried loading the webpage by opening it in safari with no success. Thanks for your help! 

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

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

  <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">

  <script src="https://js.arcgis.com/4.1/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {


      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "041e09975b594319be9abc2b4aeed030"
        }
      });


      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
    });
  </script>
</head>

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

</html>

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Devin,

   I copied that exact code you posted and pasted it into a html file using Atom.io and ran using my IIS on my laptop (windows) and it produced a map just fine. Are you running the html page from a web server (Apache) on your mac? The JS API 4.1 can not be run from the file system as previous version could.

SteveCole
Frequent Contributor

How are you opening the HTML code in your browser? Does the address bar say "file:X:\...." or is it an actual "http:\\.." address? Many API versions ago, you could load your HTML file (and JS code) as a locally based file but that has since changed. Now, your HTML code must be located on a web server.

Steve

DevinBartley
New Contributor II

I am using the Brackets.io live preview function which I was under the impression was a simulated web server. The live preview does open it up in chrome at a web address, but it still doesn't work. I will try setting it up in a legitimate web server environment as I suspect that is the problem here. 

Steve - Its just loading with the file location on the hard drive and not the http: address when I open it directly in Safari.

Thanks everyone for their help.

0 Kudos