Hi User,
I have a toolbar and I have added some more tools into it. The issue is coming when I am using my added tools.By default all the other tools should get disabled when I am using any one tool.But for the tools I have added its not working.
How to make it work?
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
on(map, "update-start", showLoading);
on(map, "update-end", hideLoading);
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("buffer").on("click", function () {
//document.getElementById('bufferdiv').style.display = "block";
var e = document.getElementById('bufferdiv');
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
});
registry.byId("identify").on("click", function () {
//document.getElementById('bufferdiv').style.display = "block";
var e = document.getElementById('polygondiv');
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
<div id="navToolbar" data-dojo-type="dijit/Toolbar">
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">
</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">
</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">
</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">
</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">
</div>
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">
</div>
<input type="image" class="measure" onclick="show(titlePane)" src="http://localhost/map/measure.jpg"
alt="HTML5" />
<input type="image" class="maptips" onclick="maptips()" src="http://www.computerhope.com/jargon/r/refresh.jpg"
alt="HTML5" />
<!--input type="image" class="buffer" onclick="buffer()" src="http://graffitialphabet.org/letter-b/blue-graffiti-alphabet-b.jpg"
alt="HTML5" /-->
<div data-dojo-type="dijit/form/Button" id="buffer" data-dojo-props="iconClass:'buffer'">
</div>
<div data-dojo-type="dijit/form/Button" id="identify" data-dojo-props="iconClass:'identify'">
</div>
<input type="image" class="remove" onclick="map.graphics.clear(graphic)" src="http://rebuildcreditscores.com/wp-content/uploads/2013/02/charge-remove-question-from-consumer.jpg"
alt="HTML5" />
<div data-dojo-type="dijit/form/Button" id="deactivate" onclick="hide(titlePane)"
data-dojo-props="iconClass:'deactivateIcon'">
</div>
</div>
Thanks
Aditya Kumar
Aditya,
You would have to use "dijit/form/ToggleButton" and not "dijit/form/Button" then.