Add Title To Shape

[Joe]

Is there anyway to add a descriptive text based title to the map shapes when using GEOjson data?  I have a fill color but want to put a text overlay on the shape as well, i.e. the two letter state abbreviation.

[T. Tsonev]

Hi,

Adding text to shapes is possible with HTML elements. We can attach the labels to the map "scrollElement" which is automatically scrolled with the map layers.

      shapeCreated: function(e) {  
        // Create the label
        var label = $("<span class='label'></div>")
        .html(e.shape.dataItem.properties.abbrev)
        .appendTo(e.sender.scrollElement);        
        
        // Position the label
        ...      
      }

-- Live demo --

Positioning is a bit trickier, as we need to have the bounding box of the shape. We'll add a public method for this saving you a good part of the demo code.

We intend to make this much easier, possibly with built-in templates for the shapes.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Joe]

This is a great solution thanks!

How would you work this for MultiPolygon shapes to prevent the label from being added more than once, for instance Alaska and Hawaii?

[T. Tsonev]

Hi,

That's a good point. Items bound through the Data Source have unique ID's that we can use for this purpose:

shapeCreated: function(e) {
  if (document.getElementById(e.shape.dataItem.uid)) {
    return;
  }
  ...  
  label.html(e.shape.dataItem.properties.abbrev)

-- Updated demo --

Thank you for your patience.

Regards,
T. Tsonev
Telerik

 

 

[Yong Yong]

Hi, the links for the demo show "Failed to load snippet". Can you fix it? Also, have you added the public methods for that feature?

[T. Tsonev]

Hello,

We've updated the snippet to the latest Q3'14 release.
This simplified the code somewhat, as bounding boxes are now calculated automatically.

We've also published a How To: Add Shape Titles article that accomplishes the same goal without using overlay elements.
This is the recommended solution for the current version.

Regards,
T. Tsonev
Telerik

 

 

[Yong Yong]

Thanks. That works perfectly.