Javascript api

ChrisHolmes · ‎07-25-2014

Hello, I am new to working with the api so have started with the "Build your first application" https://developers.arcgis.com/javascript/jstutorials/intro_firstmap.html

I think I have all of the text correct, but what I end up with is the following in the browser:

var map; function init() { map = new esri.Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); } dojo.ready(init);

Here is a copy of my file:

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

</style>

dojo.require("esri.map");

function init() {

var map = new esri.Map("mapDiv", {

center: [-56.049, 38.485],

zoom: 3,

basemap: "streets"

});

}

dojo.ready(init);

</script>

</head>

</body>

</html>

Any ideas as to what I am missing are appreciated. Thanks!

TimWitt2 · ‎07-25-2014

Chris,

you should start using the following code (AMD), the code you are using is legacy, which will soon " go away".

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <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="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map;
    require(["esri/map", "dojo/domReady!"], function(Map) {
      map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });
    });
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Hope this helps!

Tim

View solution in original post

TimWitt2 · ‎07-25-2014

Chris,

you should start using the following code (AMD), the code you are using is legacy, which will soon " go away".

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <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="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map;
    require(["esri/map", "dojo/domReady!"], function(Map) {
      map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });
    });
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Hope this helps!

Tim

ChrisHolmes · ‎07-25-2014

Thanks for the help Tim!

BjornSvensson · ‎07-25-2014

Chris Holmes‌ - The following tutorial has the AMD version:

https://developers.arcgis.com/javascript/jstutorials/intro_firstmap_amd.html

ChrisHolmes · ‎08-06-2014

Thanks for the link Bjorn!