Add Labels on GeoJSON Shapes

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1628 posts
    Member since:
    Oct 2004

    Posted 12 Feb 2015 Link to this post


    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.)


    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