require(['dojo/_base/declare'], function(declare){ delcare("mapManager", null, { sourceMapNode: null, maxZoomResolution: 10, constructor: function(params){ this.params = params || {}; // Returns a object literal if undefined // specifiy class defaults this.sourceMapNode = params.sourceMapNode; this.maxZoomResolution = params.maxZoomResolution; // Hook up map movement events alert("Hooking up map move events!"); } }); });
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Simple Map</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css"> <style> html, body, #map { height:100%; width:100%; margin:0; padding:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } </style> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script> <script src="script/class/mapManager.js"></script> <script> dojo.require("mapManager"); function init() { var parameters = { sourceMapNode : "map", mapZoomResolution: 12 }; // Give map to map manager var mapManager = new omega.mapManager(parameters); } dojo.ready(init); </script> </head> <body class="claro"> <div id="map"></div> </body> </html>
Solved! Go to Solution.
define([ "dojo/_base/declare" ], function( declare ) { return declare("omega.mapManager", null, {
<script> var dojoConfig = { packages: [{ name: "omega", location: location.pathname.replace(/\/[^/]+$/, "") }] } </script>
define([ "dojo/_base/declare" ], function( declare ) { return declare("omega.mapManager", null, {
<script> var dojoConfig = { packages: [{ name: "omega", location: location.pathname.replace(/\/[^/]+$/, "") }] } </script>
Bunch of things...
You had "delcare" instead of "declare" in your code.
Use define instead of require in mapManager.js and return the result from declare like so:define([ "dojo/_base/declare" ], function( declare ) { return declare("omega.mapManager", null, {
Tell Dojo where mapManager is via dojoConfig.packages. Something like this:<script> var dojoConfig = { packages: [{ name: "omega", location: location.pathname.replace(/\/[^/]+$/, "") }] } </script>
If you're curious about that location.pathname part, read up on using custom modules from a CDN hosted version of Dojo (it's a quick read). Since Dojo knows where to find mapManager, do not include it with a script tag.
Finally, since you're creating an AMD module, load it with require instead of the (legacy) dojo.require.
Here's a working example: http://dl.dropboxusercontent.com/u/2654618/simple-class/index.html
And here's a direct link to mapManager: http://dl.dropboxusercontent.com/u/2654618/simple-class/mapManager.js
Thanks, Derek. That spelling error is shameful. I appreciate the links.
You're welcome...definitely the thing where a second set of eyes helps. Hope you find the additional info helpful as well.
Indeed. One question, why in the mapManager.js do you not provide a class name with the declare? How does DOJO "know" that the omega.mapManager is the class defined there in /mapManager.js? Is the file name important as well?