topic How do I use map tips within web app builder? in Web AppBuilder Custom Widgets Questions

How do I use map tips within web app builder?

BrandonKeinath1 — Wed, 20 May 2015 17:50:06 GMT

Does anyone know how I use map tips within web app builder? I see the option within the properties of the layer and we've been using them a lot in our ArcReader maps. The pop-ups works well but for some quick information I'd like to explore using the map tips. I see Robert Scheitlin has a flex app that uses them but I'm not sure how to get started. Any information would be great.

And here is the link to the flex example http://www.arcgis.com/home/item.html?id=ce63f1bdd5e64068b9a4fadd2028e379

Thanks,

Brandon

Re: How do I use map tips within web app builder?

StanMcShinsky — Wed, 20 May 2015 20:53:22 GMT

Brandon Keinath,

I know Larry Stout has done map tips in this application

ArcGIS Web Application

Maybe he can shed some light on this with out us having to reinvent it.

-Stan

Re: How do I use map tips within web app builder?

BrandonKeinath1 — Wed, 20 May 2015 20:58:39 GMT

Hi Stan,

That would be great. I like not reinventing things...or more correctly asking others to reinvent things for me.

Thanks,

Brandon

Re: How do I use map tips within web app builder?

LarryStout — Thu, 21 May 2015 16:49:26 GMT

Brandon,

The trickiest part of map tips is where to put the code. I have a "headless" widget that does the map tips and lots of other things. It does so many things that I'm having trouble finding the time to document it so I can post it. In it's config file, I have something like this:

"featureLayerMapTips": {

"layers": {

"Address Points (E911)": {

"mapTip": "Address Point (E911): {FULL_ADDR} Click for more info"

}

If map tips are configured, we need to create a popup:

// Create the MapTip dialog

this.mapTip = new TooltipDialog({

id: "mapTipDialog",

style: "position:absolute; max-width:300px; z-index:100;",

"class": 'mapTipDialog'

});

this.mapTip.startup();

Then, I have this code (looping through all of the feature layers to see if map tips are configured):

var mapTipTemplate = lang.getObject(layerLabel + '.mapTip', false, this.config.featureLayerMapTips);

if (mapTipTemplate) {

on(layer, 'mouse-out', lang.hitch(this, function() {

if (this.savedSettings.showMapTips) {

clearTimeout(this.mapTipDelay);

clearTimeout(this.mapTipLife);

this._hideMapTip();

}

}));

on(layer, 'mouse-over', lang.hitch(this, function(evt) {

if (this.savedSettings.showMapTips) {

clearTimeout(this.mapTipDelay);

clearTimeout(this.mapTipLife);

this.mapTipDelay = setTimeout(

lang.hitch(this, '_showMaptip', mapTipTemplate, evt),

this.mapTipTimes.delay

);

}

}));

}

Finally, the functions to show and hide the map tips:

_showMaptip: function(mapTipTemplate, evt) {

// If the user is drawing, don't show the mapTip

if (this.drawToolActive) {

return;

}

// If there is an info window showing don't show a MapTip.

if (this.map.infoWindow.isShowing) {

return;

}

var content = lang.replace(mapTipTemplate, evt.graphic.attributes);

if (this.nullValue && this.nullValueReplacement) {

content = content.replace(this.nullValue, this.nullValueReplacement);

}

this.mapTip.setContent(content);

popup.open({

popup: this.mapTip,

x: evt.pageX + 10,

y: evt.pageY + 10

});

// Fade in the MapTip

baseFx.animateProperty({

node: this.mapTip.domNode,

duration: this.mapTipTimes.fadeIn,

properties: {

opacity: 0.85

onEnd: lang.hitch(this, function() {

this.mapTipLife = setTimeout(lang.hitch(this, '_hideMapTip'), this.mapTipTimes.life);

})

}).play();

_hideMapTip: function() {

// Fade out the MapTip

baseFx.animateProperty({

node: this.mapTip.domNode,

duration: this.mapTipTimes.fadeOut,

properties: {

opacity: 0

onEnd: lang.hitch(this, function() {

popup.close(this.mapTip);

})

}).play();

Keep in mind that map tips can be very annoying. I give my users a way to turn them off completely, and I have a system where other widgets can publish a topic to turn them on and off (e.g. the Draw Widget). The hide automatically a few seconds after the cursor leaves the map tip. The don't show at all if an infoWindow is open.

Larry

Re: How do I use map tips within web app builder?

StanMcShinsky — Thu, 21 May 2015 16:55:36 GMT

Way to go Larry! That looks like it took a lot of work.

-Stan

Re: How do I use map tips within web app builder?

LarryStout — Thu, 21 May 2015 16:56:48 GMT

The devil is in the details.

Re: How do I use map tips within web app builder?

BrandonKeinath1 — Thu, 21 May 2015 17:20:31 GMT

Thanks Larry!

I don't have a "headless" widget, or sometimes a head it feels like, so where would you suggest I put the code? Or is it easy to create my own "headless" widget that could house just the code you wrote?

Thanks,

Brandon

Re: How do I use map tips within web app builder?

LarryStout — Thu, 21 May 2015 17:26:27 GMT

Now that you ask, I think I'll write a very simple example and post it. I'll let you know, but it shouldn't take but a few hours, and I think it might be useful for lots of folks.

Larry

Re: How do I use map tips within web app builder?

BrandonKeinath1 — Thu, 21 May 2015 17:29:32 GMT

That would be great Larry! I look forward to taking a look when you have time to post it.

Brandon

Re: How do I use map tips within web app builder?

LarryStout — Fri, 22 May 2015 18:01:42 GMT

Here it is, Brandon.

Larry

Re: How do I use map tips within web app builder?

BrandonKeinath1 — Sat, 23 May 2015 12:15:40 GMT

Thanks Larry,

Am I understanding you correctly that all of the code you posted above goes into the config file for the headless widget?

Brandon

Re: How do I use map tips within web app builder?

LarryStout — Sun, 24 May 2015 00:09:20 GMT

Brandon,

The first part (7 lines) is all that goes into the config file. The rest goes into the widget. If you like, I could put the map tips together in the Anvil Widget I posted and you could download it. I can help as little or as much as you need.

Larry

Re: How do I use map tips within web app builder?

BrandonKeinath1 — Mon, 25 May 2015 15:26:35 GMT

Hi Larry,

I think it would be helpful to see it inside of the anvil widget. That way I can compare your original code to how you put it into the files. Thanks for the help!

Brandon

Re: How do I use map tips within web app builder?

LarryStout — Mon, 25 May 2015 17:57:00 GMT

Brandon,

I added a bit of code to make it stand alone. You will find it here.

Larry