Arcgis Online - Finder Template

2383
1
06-15-2014 11:18 PM
Labels (1)
francoiserhel
New Contributor
Hello,

I am currently using the template Finder with json file for configuration settings, I managed to integrate the measurement widget in my application but it is permanently displayed.

I can not find the code to make it appear or disappear depending on the click of a button located in the icon bar. I can do it for the search button but I just need to measure this action.

Here is the code for the action of measurement
{
"classname": "js.LGMapDijitContainer",
"styles": ".mapDijitContainer{position:absolute;width:200px;height:120px;margin:0px;padding:0px;font-size:12px;background-color:white}",
"config": {
"rootId": "mapDijitContainer",
"parentDiv": "contentFrame",
"rootClass": "mapDijitContainer",
"horizOffset": -8,
"vertOffset": [8, -8],
"trigger": "dijitMeasure",
"dependencyId": "map",
"dijitAmd": "esri/dijit/Measurement",
}
}

and the button command to
{
"classname": "js.LGCommand",
"config": {
"rootId": "mesure",
"tooltip": "@tooltips.mesure",
"iconUrl": "images/mesure.png",
"parentDiv": "commandPanel",
"rootClass": "commandButton",
"iconClass": "commandIcon",
"dependencyId": "dijitMeasure",
"publish": "mesure"
}
}

What should I add to appear or disappear the measurement widget?
0 Kudos
1 Reply
MikeTschudi
Occasional Contributor
This is a splendid idea, but it is not something that can be handled by configuration alone. You would have to host the app so that you can make some small code changes.

When a js.LGCommand button is clicked, it broadcasts a message--in your example, the "publish" parameter "mesure". The app has a class js.DropdownBox that listens for its configured "trigger" message and appears and disappears in response. Class js.LGMapBasedMenuBox inherits this capability and adds a dependency on the map identified by the "dependencyId" parameter. The various boxes that appear when a command button is clicked inherit from js.DropdownBox directly or through js.LGMapBasedMenuBox depending on the capability that they need.  (Internally, a js.LGCommand also publishes a private message when clicked; this message contains the trigger message value. When a js.DropdownBox receives the private message, if the trigger message value does not match its own trigger, it closes itself. This is how it is possible to click on the Search button and have the Search box open and every other command box close without requiring each command to know about each of its neighbors.)

The js.LGMapDijitContainer is a simple graphical item that displays an ArcGIS for JavaScript dijit all the time (e.g., the Home and Locate buttons)--it does not inherit from js.DropdownBox and does not know about the command messages, so the "trigger" parameter does not have an effect. As you demonstrated, however, it can hold a Measure dijit. Some suggestions for your example: the value for its final parameter "dijitAmd" has a trailing comma which should be removed--some browsers will fail with this; if you want to have the container resize to include the latitude and longitude display, remove the "height:120px;" from the CSS and change the "vertOffset" parameter to 8.

If you were to create a new class that inherits from js.LGMapBasedMenuBox (because you want 1. js.DropdownBox' command-handling and 2. js.LGMapBasedMenuBox' dependency on the map), js.LGMapDijitContainer and js.LGDigitLegendBox will provide guidance. Some changes: in the JSON configuration, be sure that the command button's publish message and the measure box' trigger message exactly match and be sure that the command button's dependencyId and the measure box's rootId parameters exactly match (the command depends on the measure box saying that it is ready, and the measure box depends on the map saying it is ready--these dependencies keep the command button from appearing until it has something to work on). Also, classes that use dependency have a this.setUpWaitForDependency() call in their constructor; this call's parameter is the name of the class. This call is needed to keep a superclass from executing its onDependencyPrep or onDependencyReady calls independently of the invoking subclass.
0 Kudos