Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Trifee
245
How to put label for individual states ( VA, NY, PA, OH, etc) in the USA map
posted

I have the USA map displayed ( .shp ).  How do I place label for individual States on the USA map  ( VA, NY, PA, OH, etc) ?

Sample code using jQuery, html please.

Thank you in advance.

 

trifee

Parents
  • 1775
    Suggested Answer
    posted

    Hi, trifee

    First, a very simple solution: Use the default background content (OpenStreetMap) and configure the shape brush with semi-transparent color (for example, rgba(173,216,230, 0.5)). The OpenStreetMap background contains the states abbreviations and they will be visible behind the semi-transparent shape fill.

    Of course, that might not suit you and that is why there is a more flexible solution in Ignite UI. Use the SimpleTextMarkerTemplate class. You may see details about it in the Configuring the Visual Features: Configuring the Marker Template With the SimpleTextMarkerTemplate topic In the online help. Here follows an example of how to do it. Add the following code in your series definition in the map control:

    1. markerTemplate: new $.ig.SimpleTextMarkerTemplate({
    2.     font: "8pt Verdana",
    3.     textColor: "black",
    4.     backgroundColor: "rgba(250,250,250,0)",
    5.     borderColor: "rgba(250,250,250,0)",
    6.     borderThickness: 0,
    7.     padding: 0,
    8.     getText: function (item) {
    9.         return item.fieldValues.STATE;
    10.     }
    11. })

    This example assumes that the state abbreviation is contained in an attribute called STATE in your DBF file. This is set in the getText member of the SimpleTextMarkerTemplate.

    Cheers, Lazar

Reply Children