<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>Home Extent Button Dijit</title> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="./ERMWidgets/css/HomeButton.css"> <style type="text/css"> body{ margin:40px; padding:20px; } .container{ position:relative; padding: 10px; border: 1px solid #eee; -webkit-border-radius: 3px; border-radius: 3px; } #map{ width:100%; height: 500px; position: relative; } #HomeButton{ position: absolute; top:95px; left: 20px; z-index: 50; } </style> </head> <body class="claro"> <div class="container"> <div id="map" class="map"> <div id="HomeButton"></div> </div> </div> <h2>All Options</h2> <script src="http://js.arcgis.com/3.7/" type="text/javascript"></script> <script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad: true, isDebug: true, packages:[{ "name": "ERMWidgets", "location": location.pathname.replace(/\/[^/]+$/, '') + "/ERMWidgets/" }] }; require(["esri/map", "ERMWidgets/HomeButton", "dojo/on"], function(Map, HomeButton, on){ var myMap = new Map("map", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); var myWidget = new HomeButton({ map: myMap },"HomeButton"); myWidget.on('home', function(obj){ console.log(obj); }); myWidget.startup(); }); </script> </body> </html>
<script> var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); var dojoConfig = { packages: [{ name: "ERMWidgets", location: package_path + "/ERMWidgets" }] }; </script> <script type = text/javascript src="http://js.arcgis.com/3.7/"></script> <script type="text/javascript">
An update to this, I have done some more digging and using the developer tools in IE9 I can see that the requests are going to the right places so I am certain that my relative paths etc are working correctly. I have also updated the code to an example from the API samples so it now looks like this:<script> var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); var dojoConfig = { packages: [{ name: "ERMWidgets", location: package_path + "/ERMWidgets" }] }; </script> <script type = text/javascript src="http://js.arcgis.com/3.7/"></script> <script type="text/javascript">
However I am still getting the 'Script445: Object doesn't support this action' error.
Any help would be gratefully recieved as I have been stuck on this for days!!
Peter
Seems like it's probably something in the module then. Is it returning a define function correctly?
define([ "dijit/_WidgetBase", "dijit/_OnDijitClickMixin", "dijit/_TemplatedMixin", "dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/on", // load template "dojo/text!ERMWidgets/templates/HomeButton.html", "dojo/dom-class", "dojo/dom-style" ], function ( Evented, declare, lang, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, on, dijitTemplate, domClass, domStyle ) { var Widget = declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, Evented], { declaredClass: "ERMWidgets.HomeButton", templateString: dijitTemplate, options: { theme: "HomeButton", map: null, extent: null, visible: true }, // lifecycle: 1 constructor: function(options, srcRefNode) { // mix in settings and defaults declare.safeMixin(this.options, options); // widget node this.domNode = srcRefNode; this._i18n = i18n; // properties this.set("map", this.options.map); this.set("theme", this.options.theme); this.set("visible", this.options.visible); this.set("extent", this.options.extent); // listeners this.watch("theme", this._updateThemeWatch); this.watch("visible", this._visible); // classes this._css = { container: "homeContainer", home: "home", loading: "loading" }; }, // start widget. called by user startup: function() { // map not defined if (!this.map) { this.destroy(); console.log('HomeButton::map required'); } // when map is loaded if (this.map.loaded) { this._init(); } else { on(this.map, "load", lang.hitch(this, function() { this._init(); })); } }, // connections/subscriptions will be cleaned up during the destroy() lifecycle phase destroy: function() { this.inherited(arguments); }, /* ---------------- */ /* Public Events */ /* ---------------- */ // home // load /* ---------------- */ /* Public Functions */ /* ---------------- */ home: function() { var defaultExtent = this.get("extent"); this._showLoading(); if(defaultExtent){ return this.map.setExtent(defaultExtent).then(lang.hitch(this, function(){ this._hideLoading(); this.emit("home", {extent: defaultExtent}); })); } else{ this._hideLoading(); console.log('HomeButton::no home extent'); } }, show: function(){ this.set("visible", true); }, hide: function(){ this.set("visible", false); }, /* ---------------- */ /* Private Functions */ /* ---------------- */ _init: function() { this._visible(); if(!this.get("extent")){ this.set("extent", this.map.extent); } this.set("loaded", true); this.emit("load", {}); }, _showLoading: function(){ domClass.add(this._homeNode, this._css.loading); }, _hideLoading: function(){ domClass.remove(this._homeNode, this._css.loading); }, _updateThemeWatch: function(attr, oldVal, newVal) { domClass.remove(this.domNode, oldVal); domClass.add(this.domNode, newVal); }, _visible: function(){ if(this.get("visible")){ domStyle.set(this.domNode, 'display', 'block'); } else{ domStyle.set(this.domNode, 'display', 'none'); } } }); return Widget; });
Hi Matt,
I think the module is working correctly. I have modified it slightly from your GitHub version (mostly changing the definedClass and I removed the esri namespace section at the bottom as I didnt think I needed that?). I have included the code below, would you mind taking a quick look at it?
Thanks for your help.
Peterdefine([ "dijit/_WidgetBase", "dijit/_OnDijitClickMixin", "dijit/_TemplatedMixin", "dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/on", // load template "dojo/text!ERMWidgets/templates/HomeButton.html", "dojo/dom-class", "dojo/dom-style" ], function ( Evented, declare, lang, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, on, dijitTemplate, domClass, domStyle ) { var Widget = declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, Evented], { declaredClass: "ERMWidgets.HomeButton", templateString: dijitTemplate, options: { theme: "HomeButton", map: null, extent: null, visible: true }, // lifecycle: 1 constructor: function(options, srcRefNode) { // mix in settings and defaults declare.safeMixin(this.options, options); // widget node this.domNode = srcRefNode; this._i18n = i18n; // properties this.set("map", this.options.map); this.set("theme", this.options.theme); this.set("visible", this.options.visible); this.set("extent", this.options.extent); // listeners this.watch("theme", this._updateThemeWatch); this.watch("visible", this._visible); // classes this._css = { container: "homeContainer", home: "home", loading: "loading" }; }, // start widget. called by user startup: function() { // map not defined if (!this.map) { this.destroy(); console.log('HomeButton::map required'); } // when map is loaded if (this.map.loaded) { this._init(); } else { on(this.map, "load", lang.hitch(this, function() { this._init(); })); } }, // connections/subscriptions will be cleaned up during the destroy() lifecycle phase destroy: function() { this.inherited(arguments); }, /* ---------------- */ /* Public Events */ /* ---------------- */ // home // load /* ---------------- */ /* Public Functions */ /* ---------------- */ home: function() { var defaultExtent = this.get("extent"); this._showLoading(); if(defaultExtent){ return this.map.setExtent(defaultExtent).then(lang.hitch(this, function(){ this._hideLoading(); this.emit("home", {extent: defaultExtent}); })); } else{ this._hideLoading(); console.log('HomeButton::no home extent'); } }, show: function(){ this.set("visible", true); }, hide: function(){ this.set("visible", false); }, /* ---------------- */ /* Private Functions */ /* ---------------- */ _init: function() { this._visible(); if(!this.get("extent")){ this.set("extent", this.map.extent); } this.set("loaded", true); this.emit("load", {}); }, _showLoading: function(){ domClass.add(this._homeNode, this._css.loading); }, _hideLoading: function(){ domClass.remove(this._homeNode, this._css.loading); }, _updateThemeWatch: function(attr, oldVal, newVal) { domClass.remove(this.domNode, oldVal); domClass.add(this.domNode, newVal); }, _visible: function(){ if(this.get("visible")){ domStyle.set(this.domNode, 'display', 'block'); } else{ domStyle.set(this.domNode, 'display', 'none'); } } }); return Widget; });