We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Print values in the tooltip template

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!

5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team November 8, 2018 09:46 AM UTC

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



DA Daniel November 8, 2018 03:55 PM UTC

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!



DD Dharanidharan Dharmasivam Syncfusion Team November 9, 2018 02:26 PM UTC

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. 
 
Thanks, 
Dharani. 
 



DA Daniel November 9, 2018 04:57 PM UTC

Hi!

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

Regards!


DD Dharanidharan Dharmasivam Syncfusion Team November 12, 2018 05:10 AM UTC

Hi Daniel, 
 
Most welcome. Kindly get in touch with us if you would require any further assistance. 
 
Thanks, 
Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon