topic Re: creating javascript external file for map function in ArcGIS JavaScript Maps SDK Questions

creating javascript external file for map function

MayJeff — Wed, 17 Sep 2014 18:22:08 GMT

I try to create a simple javascript external file. I put all the require & function in one js file, it works. But how do you create another external js file for map function.

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">
    <script src="http://js.arcgis.com/3.10/"></script>
    <script type="text/javascript" src="script/init.js"></script>
</head>

---------------------------

layout.css

-------------------------------

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

body {

background-color: #FFF;

overflow: hidden;

font-family: "Trebuchet MS";

}

-----------------

init.js

---------------

var map;

      require(["esri/map", "dojo/domReady!"],function(Map) {
map = new Map("map", {
          basemap: "topo",
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
     });
        });

Thank you.

Re: creating javascript external file for map function

PaulCrickard1 — Wed, 17 Sep 2014 19:32:21 GMT

If you put it in an external file you will not have access to the libraries or variables (map) in your init.js because of how Require.js works. The require(); is wrapping all the libraries and files in to a big function. Everything you do with them needs to be in the function. Maybe look at require.js examples for how to do this.

Re: creating javascript external file for map function

SteveCole — Wed, 17 Sep 2014 20:45:23 GMT

Assuming you've declared variables representing your map related objects as global, could you just drop another require() structure in the second "external file" and reference any dojo/dijit items needed for that JS file?

Re: creating javascript external file for map function

PaulCrickard1 — Wed, 17 Sep 2014 22:58:40 GMT

sure can.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Simple Map</title>

</head>

<body>

</body>

</html>

init.js

var map;

require(["esri/map", "dojo/domReady!"],function(Map) {

map = new Map("map", {

basemap: "topo",

center: [-122.45, 37.75], // longitude, latitude

zoom: 13

});

CSS

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

body {

background-color: #FFF;

overflow: hidden;

font-family: "Trebuchet MS";

}

other.js

require(["esri/map", "dojo/domReady!"],function(Map) {

map.on("click", function(e){

alert("clicked");

});