Add Labels on GeoJSON Shapes

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 12 Feb 2015 Link to this post

    Requirements

    Telerik Product and Version

    		 UI for ASP.NET AJAX (version 2014.3 1209 and above)

    Supported Browsers and Platforms

    		 All browsers and platforms supported by Telerik UI for ASP.NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    PROJECT DESCRIPTION 
    ​
    GeoJSON shapes in RadMap do not support labels out of the box. You can, however, manually create such labels by replacing the markers with the desired text as follows:

    1. Bind a MapLayer Type="Shape" to a GeoJSON  data source.
    2. Include the text you want to display over the shapes in the marker.title field of the GeoJSON data.
    3. Attach to the shapeCreated event of the map and then:
      1. Reference the current marker through the dataItem properties of the shape.
      2. Set a custom marker shape. Marker shapes are implemented as CSS classes on the marker element (span.k-marker).
      3. Add the marker to the markers collection.
      4. Get the title of the marker element and add it as text to the span element.
    4. Hide the original marker image with CSS by cascading through the class defined in 3.2 step.


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.