Latest Contributions by PeterMcBride

‎11-10-2013

Hi All, I am trying to customise the Basic Viewer template from AGOL. One of the things I am trying to do is to load a custom module. However when I call the custom module I get an error message to say that it is 'undefined'. From doing a bit of research I see that the calls to custom modules need to be wrapped in a dojo.ready function but I am not sure where to put this in my code. To add a bit of detail to the post: With the Basic Viewer template the main thrust of UI and map creation is carried out within a separate template.js file. The call to these functions are already wrapped in a dojo.ready function within the index.html page (would this cause any issues if I put another dojo.ready function in the template.js file? The code is attached, so far I have tried: - wrapping the createApp() function in a dojo.ready function, but it never gets called - wrapping the addXYZoom() function in a dojo.ready function but again it never seems to get called Can anyone suggest where this dojo.ready function should be placed, or if this is even the solution! Thanks Peter

‎11-04-2013

Does anyone have any ideas about this one? Really need to get this working urgently for a client. Cheers Peter

‎10-25-2013

Hi All, My second issue of the day so far! I have managed to get my Zoom to XY widget page to load (thanks again to odoe for pointing out my errors!). However now when I click on the toolbar button the widget does not appear. I know I am probably missing something crucial to make this happen so if anyone has time to have a quick look over my code that would be very much appreciated. The code samples are attached. Many Thanks Peter

‎10-25-2013

HI, I am having some trouble making the navigation toolbar work in an application that I am porting to AMD. Everything loads fine but when I try to use the Zoom In and Zoom Out buttons I get the following error: Error: Object doesn't support property or method 'activate' Can anyone see any issues with the code below? Peter <!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>Navigation toolbar</title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <style> @import "http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"; .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; } .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; } .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; } .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; } .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; } .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; } .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; } </style> <script> var dojoConfig = { parseOnLoad: false, packages: [ { name: "ERMWidgets", location: location.pathname.replace(/\/[^/]+$/, '') + '/ERMWidgets' }] }; </script> <script src="http://js.arcgis.com/3.7/"></script> <script> var map; require([ "esri/map", "dojo/parser", "esri/dijit/BasemapGallery", "esri/toolbars/navigation", "esri/arcgis/utils", "ERMWidgets/ZoomToXY", "dojo/dom", "dijit/form/TextBox", "dijit/form/Button", "dijit/Toolbar", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!" ], function (Map, parser, BasemapGallery, Navigation, arcgisUtils, ZoomToXY) { parser.parse(); map = new Map("map", { basemap: "satellite", center: [-56.953, 57.472], zoom: 3 }); var basemaps = []; //Basemap 1 var oceanLayer = new esri.dijit.BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" }); var OceanBasemap = new esri.dijit.Basemap({ layers: [oceanLayer], title: "ESRI Oceans Basemap", thumbnailUrl: "images/ocean.png" }); basemaps.push(OceanBasemap); //Basemap 2 var imageryLayer = new esri.dijit.BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" }); var ImageryBasemap = new esri.dijit.Basemap({ layers: [imageryLayer], title: "World Imagery", thumbnailUrl: "images/imagery.png" }); basemaps.push(ImageryBasemap); //Basemap 3 var physicalLayer = new esri.dijit.BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer" }); var PhysicalBasemap = new esri.dijit.Basemap({ layers: [physicalLayer], title: "Physical Imagery", thumbnailUrl: "images/physical.png" }); basemaps.push(PhysicalBasemap); var basemapGallery = new esri.dijit.BasemapGallery({ showArcGISBasemaps: false, basemaps: basemaps, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function (msg) { console.log("basemap gallery error: ", msg); }); var navToolbar = new Navigation(map); navToolbar.on("extent-history-change", extentHistoryChangeHandler); function extentHistoryChangeHandler() { dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent(); dijit.byId("zoomnext").disabled = navToolbar.isLastExtent(); } newXY = new ZoomToXY({ map: map }, dojo.byId('zoomXYDiv')); newXY.startup(); }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" region="top"> <div id="navToolbar" data-dojo-type="dijit.Toolbar"> <div data-dojo-type="dijit.form.Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div> <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div> <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div> <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div> <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div> <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div> <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div> <div data-dojo-type="dijit.form.DropDownButton" id="zoomXYButton" data-dojo-props="iconClass:'dijitIconEdit'"><span>Zoom to XY</span> <div data-dojo-type="dijit.TooltipDialog"><div id="zoomXYDiv"></div></div> </div> </div> </div> <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" region="right" style="width:25%"> <div data-dojo-type="dijit.layout.AccordionContainer"> <div data-dojo-type="dijit.layout.ContentPane" id="layerControlPane" title="LayerControl" selected="true" > This pane will contain the layer control functions. </div> <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" title="Legend" > This pane will contain the legend. </div> <div data-dojo-type="dijit.layout.ContentPane" id="basemapPane" title="Select Basemap" > <div id="basemapGallery"></div> </div> <div data-dojo-type="dijit.layout.ContentPane" id="metadataPane" title="Metadata" > This pane will contain metadata information. </div> <div data-dojo-type="dijit.layout.ContentPane" id="analysisPane" title="Analysis" > This pane will contain data analysis functions. </div> </div> </div> <div id="map" style="width:100%; height:512px; top:200px" region="center"> </div> </div> </div> </body> </html>

‎10-25-2013

Thanks odoe, that worked perfectly! Peter

‎10-24-2013

Hi, I am trying to create a widget which will allow a user to enter a lat and long value, click a button and the map will zoom to that location. I have set up the widget and I am trying to call it in my page but I get an error message which says 'Error: declare: mixin #0 is not a callable constructor.constructor' I have posted my complete code for the HTML page and for the ZoomtoXY widget as attachments as I can't seem to figure out what is wrong here. Many thanks in advance for your help. Peter

‎10-17-2013

Seems like it's probably something in the module then. Is it returning a define function correctly? 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. Peter 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; });

‎10-17-2013

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

‎10-16-2013

Hi All, I am trying to practice accessing content from custom modules using the Home Button sample from the API tutorials. I have saved the HomeButton.js and the HTML page in the folder structure which is attached as images. I have written the following HTML page to load the HomeButton but I get an "Object doesn't support this action" error when the page attempts to create a new HomeButton object. I suspect that the issue is with the way I have entered the path to my custom module but I have tried loads of combinations and cant seem to find a solution. The code is below and any help would be greatly appreciated! Peter <!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>

Online Status	Offline
Date Last Visited	‎11-11-2020 02:23 AM

My Ideas

Latest Contributions by PeterMcBride

Custom Module Not Loading (dojo.ready issue???)

Re: Custom Widget not Loading in Drop Down Button

Custom Widget not Loading in Drop Down Button

Navigation Toolbar post AMD

Re: Custom Module Issue

Custom Module Issue

Re: Problem with custom modules

Re: Problem with custom modules

Problem with custom modules