widget.js
/// <reference path="Widget.html" />
/// <reference path="Widget.html" />
///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////
define([
'dojo/_base/declare',
'jimu/BaseWidget', 'dojo/_base/html',
'dojo/on',
"esri/toolbars/navigation",
'jimu/utils',
'jimu/portalUtils',
"dojo/dom-style", "dijit/Toolbar",
, "dijit/form/Button",'dojo/domReady!'
],
function (
declare,
BaseWidget, html, on,
utils,
PortalUtils,Navigation,
domStyle
) {
var clazz = declare([BaseWidget], {
name: 'NavigationToolbar',
baseClass: 'jimu-widget-navigationtoolbar',
startup: function () {
this.inherited(arguments);
var navToolbar;
/*var element = document.createElement("input");
//Assign different attributes to the element.
element.type = "Button";
element.value = "zoom in";
//element.class = "zoominIcon";
element.name = "kimo"; // And the name too?
element.onclick = function () { // Note this is a function
alert("blabla");
};
html.place(element, this.domNode);*/
navToolbar = new esri.toolbars.Navigation(this.map);
on(navToolbar, "extent-history-change", extentHistoryChangeHandler);
on(document.getElementById("zoomin"), "click", function (e) {
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
});
on(document.getElementById("zoomout"), "click", function (e) {
navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
});
on(document.getElementById("zoomfullext"), "click", function (e) {
navToolbar.zoomToFullExtent();
});
on(document.getElementById("zoomprev"), "click", function (e) {
navToolbar.zoomToPrevExtent();
});
on(document.getElementById("zoomnext"), "click", function (e) {
navToolbar.zoomToNextExtent();
});
on(document.getElementById("pan"), "click", function (e) {
navToolbar.activate(esri.toolbars.Navigation.PAN);
});
on(document.getElementById("deactivate"), "click", function (e) {
navToolbar.deactivate();
});
function extentHistoryChangeHandler() {
document.getElementById("zoomprev").disabled = navToolbar.isFirstExtent();
document.getElementById("zoomnext").disabled = navToolbar.isLastExtent();
}
}
});
clazz.inPanel = false;
clazz.hasUIFile = true;
return clazz;
});
widget.html
<div class="nav_gis">
<div id="navToolbar" data-dojo-type="dijit/Toolbar" style="float: left;width:700px">
<button data-dojo-type="dijit/form/Button" id="zoomin" class="zoominIcon">Zoom In</button>
<button data-dojo-type="dijit/form/Button" id="zoomout" class="zoomoutIcon">Zoom Out</button>
<button data-dojo-type="dijit/form/Button" id="zoomfullext" class="zoomfullextIcon">Full Extent</button>
<button data-dojo-type="dijit/form/Button" id="zoomprev" disabled class="zoomprevIcon">Prev Extent</button>
<button data-dojo-type="dijit/form/Button" id="zoomnext" disabled class="zoomnextIcon">Next Extent</button>
<button data-dojo-type="dijit/form/Button" id="pan" class="panIcon">Pan</button>
<button data-dojo-type="dijit/form/Button" id="deactivate" class="deactivateIcon">Deactivate</button>
</div>
</div>
