I'm working within a corporate environment that is using ArcGIS Server (v10.2.2). I am a newbie trying to work with ArcGIS API for JavaScript (v3.9) to create custom map applications. I can't seem to get a basic map up and running. For example, when I write this code:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="MYDOMAINHERE.COM/3.11/esri/css/esri.css">
  html, body, #map {
    height: 100%; width: 100%; margin: 0; padding: 0; 
<script src="http://MYDOMAINHERE.COM/3.9compact"></script>
  var map;
  require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
    function(Map, Tiled) {
      map = new Map("map");
      var tiled = new Tiled("MYDOMAINHERE.COM/arcgis/rest/services/BaseMaps/OURCONTENT");
   <div id="map"></div>

I get the basemap map tiles all disjointed like so (re-created in Photoshop for illustration purposes):

enter image description here

Is it possible that the coordinates are wrong? Our server is using ArcGIS with 4326(WGS84). Again, I am an extreme newbie, so I am not sure I am using the correct language here. Thanks for any tips and advice on how to troubleshoot this.


i'd be willing to bet you're just missing the esri.css

<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

check out this sample

edit: after rereading your question, i can see clearly that you were already loading 'esri.css' from your own web server. does the network traffic show any indication that this wasn't successful?

you include 'http://' when loading the API itself, but only 'MYDOMAIN' when loading the CSS. for it to be a valid href, you either need 'http://' explicitly or '//:' to attempt to load the resource using the same protocol as the application itself.

  • This was the issue (lack of correct esri CSS). Thanks! Marked answered. – redshift Nov 22 '14 at 14:10

Change your code to use on of the ESRI basemaps, does this work? Then it is a problem wit your map service I think.

If so you can look at the rest endpoint javascript viewer to make sure are all the tiles there. Maybe the caching process didn't finish correctly: MYDOMAINHERE.COM/arcgis/rest/services/BaseMaps/OURCONTENT/MapServer?f=jsapi

If the caching worked OK then try using some developer tools like firebug or fiddler to see what is happening to the requests for the missing tiles. Are you getting 404 errors? Maybe some of the tile bundle files need to have their permissions changed.

  • When I test out the maps by using the REST endpoint javascript API link, it works fine. I dont' really see anything in the dev console. Note: When you zoom in on that map I showed above, it will reset the map tiles to another part of the globe. Seems to be a coordinates problem. – redshift Nov 19 '14 at 2:08
  • I don't see you explicitly setting a projection so I think the map will default to the projection of the first map service loaded. From your code it looks like you are referencing a local copy of the 3.11 style sheet but version 3.9compact of the API. Try changing these to be the same version. Also try changing them to the Esri hosted ones as a test to see if that fixes the problem. – Dowlers Nov 19 '14 at 17:56
  • Thanks. HOw would I set the projection in this case? DO i need to use an API function? – redshift Nov 19 '14 at 21:24
  • You explicitly set a projection using the extent parameter of the map object developers.arcgis.com/javascript/jsapi/extent-amd.html. But I don't think you have too, it should pick up the projection of the basemap layer when it is loaded. – Dowlers Nov 19 '14 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.