Can the Parks Finder 10.1 app show tooltips over the parks?

[CraigMcDade]

Is there any way to modify the Parks Finder app so that when you hover over the park a tooltip appears with the name of the park? The 10.1 app uses a mapservice so I modified the config and JS files to include a FeatureService of the Parks data, thinking I could just overlay the featureservice on the mapservice. The app didn't like this and only the featureservice was loading.

I'm assuming adding the tooltips will be an easier customization in the upcoming 10.2 release of the app, since it will consume a FeatureService out of the box.

In any event, this is a feature that our parks department wants in place before we go live with the app, so I am trying to find a good solution.

[BrianLord1]

Craig,

I have set up my parks app to show the park name when the user hovers over the park, however it is when they hover over a point in the park and not the actual park boundary (polygon) since I actually have that in my basemap.  It is the same functionality though so hopefully this helps you.

First, I bring my park pts in as a feature service...

var devPlanLayer = new esri.layers.FeatureLayer(devPlanLayerURL, {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"],
                    id: devPlanLayerID,
                    displayOnPan: false
                });

Then, I set up the dojo.connect for when a user moves their mouse over the park pt...

dojo.connect(devPlanLayer, "onMouseMove", function (evt) {
                    if (evt.graphic) {
                        if (evt.graphic.attributes) {
                            ShowMapTip(evt, evt.graphic.attributes.NAME);
                        }
                    }
                });
                dojo.connect(devPlanLayer, "onMouseOut", CloseMapTip);

Finally, here are the functions used to actually create and close the map tips. (I think these were already in the template so you should have them as well in the utils.js file)

//function to show maptip
function ShowMapTip(evtArgs, content) {
    CloseMapTip();
    var dialog = new dijit.TooltipDialog({
        id: "toolTipDialog",
        content: '<span style="font-size:11px; font-family:Verdana;">' + content + '</span> ',
        style: "position: absolute; z-index:1000;"
    });
    dialog.startup();
    dojo.style(dialog.domNode, "opacity", 0.80);
    dijit.placeOnScreen(dialog.domNode, { x: evtArgs.pageX, y: evtArgs.pageY }, ["BL", "BR"], { x: 5, y: 5 });
}

//function to close maptip
function CloseMapTip() {
    if (dijit.byId('toolTipDialog')) {
        dijit.byId('toolTipDialog').destroy();
    }
}

Hope this helps!
Mark

[CraigMcDade]

Thanks! So are you overriding the config file where it has 'DevPlanLayer' set as a mapservice? And are you creating DevPlanLayerURL or is that located somwhere I haven't seen yet?

Thanks again.

[BrianLord1]

Yes, I did set 'DevPlanLayer' as a feature service instead of a map service.

//URL used for doing query task on the features.
 'DevPlanLayer' : "http://servername/arcgis/rest/services/foldername/servicename/MapServer/0",

devPlanLayerURL is populated with whatever you enter in the config file.

devPlanLayerURL = responseObject.DevPlanLayer;

I do find that using a feature service instead of a map service does decrease the speed of the app, but since it is just point features I am willing to deal with that.

Thanks,
Mark

Also, if you post some code from your app, specifically all the parts that involve creating 'devPlanLayer' than I might be able to get a better idea as to what is going on.

[CraigMcDade]

Mark,

I really appreciate your help. Here is what I've done:

In the config.txt file:

//URL used for doing query task on the features.
 'DevPlanLayer' : "https://myserver/arcgis/rest/services/myfolder/Parks/MapServer/0",

In the default.htm file within the MapInitFunction(map):

      dojo.connect(devPlanLayer, "onMouseMove", function (evt) {
                    if (evt.graphic) {
                        if (evt.graphic.attributes) {
                            ShowMapTip(evt, evt.graphic.attributes.NAME);
                        }
                    }
                });
                dojo.connect(devPlanLayer, "onMouseOut", CloseMapTip);

            var devPlanLayer = new esri.layers.FeatureLayer(devPlanLayerURL, {
                mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                outFields: ["*"],
                id: devPlanLayerID,
                displayOnPan: false
            });

I suspect the above is where I'm having issues, either putting it in the wrong spot or it is conflicting with the config file.

As you mentioned the code to create and close the maptips already exists. Not sure what is going on but I'm not getting any tooltips. Am I putting the code in the wrong spot?

[BrianLord1]

Not sure if it matters, but in my code I create the layer and then below that I have the code for the dojo.connect and then below that i have the line to add the layer to the map.

map.addLayer(devPlanLayer);

Have you tried setting a break point inside the dojo.connect function and then stepping through the function to see where it errors out?  In addition, if the breakpoint never gets called you know there is something wrong with either the code used to create the layer or the dojo.connect code.  For instance, maybe there is another graphics layer on top of the parks graphics layer in which case the app would not recognize when your mouse it over the parks graphic.

Another thing to just double check is the actual name of the attribute field you wish to use in the tooltip.  The code I provided uses a field called "NAME".  Does your parks layer use the same field or is it something different?

[RickeyFight]

They way i got this to work was by adding the above code and :

dojo.require("dijit.TooltipDialog");

In the homepage.js on line 30.

The css then needs to change because the text is white.

The easiest way is to set a background color

.dijitTooltipContainer {

    background-color: #2F4A24 !important;

}