Print values in the tooltip template

[Daniel]

Hi!

I'm trying to print the name of the state and the value in a tooltip template but in the example I don´t see how to send these vales to the template. Can you provide me and example of this?

https://help.syncfusion.com/aspnetmvc/maps/customization#tooltip-template

Thanks, regards!

[Dharanidharan Dharmasivam]

Hi Daniel, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We have prepared sample to show the state and its population using tooltip template. Find the code snippet to achieve this requirement. 

 

[HomeController.cs] 

 

public ActionResult Index() 

        { 

            Datasource for tooltip 

            ViewBag.dataSource = Election_Result.GetUSPopulationData(); 

            //... 

            return View(); 

        } 

 

[Index.cshtml] 

 

Template for tooltip 

 

<div id="template" style="display:none"> 

    <div class="toolback"> 

        <div class="listing1"> 

            <center> 

                State: ${name} 

            </center> 

        </div> 

        <div class="listing1"> 

            <center> 

                Population: ${population} 

            </center> 

        </div> 

    </div> 

</div> 

 

@Html.EJS().Maps("container").Layers(layer => 

{ 

    layer.DataSource(ViewBag.dataSource).TooltipSettings(new MapsTooltipSettings{ Visible = true, Template = "#template", ValuePath = "name" }). 

}).Render() 

 

 

Here we need to bind the data source for tooltip to the DataSource property of map as highlighted above, so that the required filed can be displayed in the tooltip template. 

 

Screenshot: 

 

 

Sample for reference can be found below. 

http://www.syncfusion.com/downloads/support/forum/140809/ze/map1135976343  

 

Note: We have provided sample in EJ2, if you are using EJ1 map component kindly revert us, so that we can provide you the appropriate sample. EJ2 map component is having better performance and more features while comparing with EJ1 map component. Kindly find the online demo and user guide for EJ2 map component. 

 

Thanks, 

Dharani. 

[Daniel]

Hi!

Thanks for the reply, I tried the code but without success:

I think my version is the EJ1(this is the version: https://s3.amazonaws.com/files2.syncfusion.com/Installs/v15.2.0.46/ReadMe/ASPMVC.html). This is my current code:

Class:

    public class CountyInteractionData

    {

        public string name;

        public string Name

        {

            get { return name; }

            set { name = value; }

        }

        public double interaction;

        public double Interaction

        {

            get { return interaction; }

            set { interaction = value; }

        }

    }

Top of the view:

@{

    var mapData = ViewData["mapdata"];

    var datasource = ViewData["datasource"];

}

Code of map:

@(Html.EJ().Map("container")

                        .Layers(layer =>

                        {

                            layer.ShapeData(mapData)

                            .ShapeDataPath("name")

                            .ShapePropertyPath("name")

                            .DataSource(datasource)

                            .ShowMapItems(false)

                            .EnableSelection(false)

                            .EnableMouseHover(false)

                            .ShapeSettings(ss =>

                            {

                                ss.Fill("#F1ECD8")

                                .StrokeThickness(0.5)

                                .Stroke("White")

                                .HighlightStroke("White")

                                .HighlightColor("#BC5353")

                                .HighlightBorderWidth(1)

                                .ValuePath("interaction")

                                .EnableGradient(true)

                                .RangeColorMappings(cm =>

                                {

                                    cm.From(0).To(2).GradientColors(new List<string> { "#F1ECD8", "#DEE2B9" }).Add();

                                    cm.From(3).To(5).GradientColors(new List<string> { "#DEE2B9", "#CBD89A" }).Add();

                                    cm.From(6).To(8).GradientColors(new List<string> { "#CBD89A", "#B8CE7B" }).Add();

                                    cm.From(9).To(11).GradientColors(new List<string> { "#B8CE7B", "#9CBF4E" }).Add();

                                    cm.From(12).To(double.MaxValue).GradientColors(new List<string> { "#9CBF4E", "#9CBF4E" }).Add();

                                });

                            })

                            .ShowTooltip(true)

                            .TooltipTemplate("myTooltip")

                            .Add();

                        }).ZoomSettings(zoom =>

                        {

                            zoom.EnableZoom(false);

                        }).EnableAnimation(true).IsResponsive(true)

        )

Template:

<div id="myTooltip" style="display: none;">

    <div>

        <div style="height:60px;width:150px;background:#4586a0;border-radius:3px;">

            <div style="margin-top:-20px;margin-left:9px;padding-top:3px">

                <label style="margin-top:-20px;font-weight:normal;font-size:12px;color:white;font-family:Segoe UI;">${name}</label>

            </div>

            <div style="margin-top:-10px;margin-left:9px;">

                <label style="margin-top:-20px;font-weight:normal;font-size:12px;color:white;font-family:Segoe UI;">${interaction} veces</label>

            </div>

        </div>

    </div>

</div>

Thanks, regards!

[Dharanidharan Dharmasivam]

Hi Daniel, 

 

Thanks for the information. 

 

We have analyzed your requirement with the provided code snippet. We found that in the template section, you have obtained data as ${name}, this ill work for EJ2 map component and in EJ1 map component you need to specify it as highlighted below, so that tooltip will work properly. 

 

[Index.cshtml] 

 

 

<script id="template" type="application/jsrender"> 

    <div class="tip"> 

        <p class="small"> 

            <label style="color:white;font-size:11px;font-weight:normal;">{{:name}}</label> 

        </p> 

        <p class="big"> 

            <label style="color:white;font-size:11px;font-weight:normal;">{{:population}} veces</label> 

        </p> 

    </div> 

</script> 

 

 

 

We have attached the sample for your reference in EJ1 which can be found below. 

http://www.syncfusion.com/downloads/support/forum/140809/ze/SyncfusionMvcApplication-1197915585  

 

Thanks, 

Dharani. 

 

[Daniel]

Hi!

Yes, it is working with that example. Thanks for your help.

Regards!

[Dharanidharan Dharmasivam]

Hi Daniel, 

 

Most welcome. Kindly get in touch with us if you would require any further assistance. 

 

Thanks, 

Dharani.