Add Title To Shape

7 posts, 0 answers
  1. Joe
    Joe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 10 Mar 2014 Link to this post

    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.
  2.
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2791 posts

    Posted 12 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  5. Joe
    Joe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 12 Mar 2014 in reply to T. Tsonev Link to this post

    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?
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2791 posts

    Posted 13 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  8.
  9. Yong Yong
    Yong Yong avatar
    2 posts
    Member since:
    Nov 2014

    Posted 23 Nov 2014 in reply to T. Tsonev Link to this post

    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?
  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2791 posts

    Posted 25 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Yong Yong
    Yong Yong avatar
    2 posts
    Member since:
    Nov 2014

    Posted 26 Nov 2014 in reply to T. Tsonev Link to this post

    Thanks. That works perfectly.
  14.
Back to Top