Community

Basemap tiles disjointed - bad projection?

556
1
Jump to solution
11-19-2014 03:59 AM
NickMason
by
New Contributor
‎11-19-2014 03:59 AM

Hi all, 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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="MYDOMAINHERE.COM/3.11/esri/css/esri.css">
<style>
  html, body, #map {
  height: 100%; width: 100%; margin: 0; padding: 0;
  }
</style>

<script src="http://MYDOMAINHERE.COM/3.9compact"></script>
<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");
  map.addLayer(tiled);
  }
  );
  </script>
  </head>
  <body>
  <div id="map"></div>
  </body>
</html>

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

map.gif

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.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RandyJones2
by
New Contributor
‎11-19-2014 08:19 AM

Nick,

It looks to me like you have a bad path to the css. If you update the css path to the version used in 3.9 instead of 3.11 everything should work (just add /js after you change 3.11 to 3.9).

<!DOCTYPE html>


<html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


<title></title>


<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.9compact"></script>


<script>


  var map;






  require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],


  function(Map, Tiled) {


  map = new Map("map");






  var tiled = new Tiled("http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer");


  map.addLayer(tiled);


  }


  );


  </script>


  </head>


  <body>


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


  </body>


</html>

Randy

View solution in original post

0 Kudos
1 Reply
RandyJones2
by
New Contributor
‎11-19-2014 08:19 AM

Nick,

It looks to me like you have a bad path to the css. If you update the css path to the version used in 3.9 instead of 3.11 everything should work (just add /js after you change 3.11 to 3.9).

<!DOCTYPE html>


<html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


<title></title>


<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.9compact"></script>


<script>


  var map;






  require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],


  function(Map, Tiled) {


  map = new Map("map");






  var tiled = new Tiled("http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer");


  map.addLayer(tiled);


  }


  );


  </script>


  </head>


  <body>


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


  </body>


</html>

Randy

0 Kudos