How do I use map tips within web app builder?

6930
13
05-20-2015 10:50 AM
BrandonKeinath1
Occasional Contributor III

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

0 Kudos
13 Replies
StanMcShinsky
Occasional Contributor III

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

BrandonKeinath1
Occasional Contributor III

Hi Stan,

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

Thanks,

Brandon

LarryStout
Occasional Contributor III

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): <b>{FULL_ADDR}</b><br><i>Click for more info</i>"

    }

  }

},

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

StanMcShinsky
Occasional Contributor III

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

-Stan

LarryStout
Occasional Contributor III

The devil is in the details.

BrandonKeinath1
Occasional Contributor III

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

0 Kudos
LarryStout
Occasional Contributor III

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

BrandonKeinath1
Occasional Contributor III

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

Brandon

0 Kudos
LarryStout
Occasional Contributor III

Here it is, Brandon.

Larry