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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Print values in the tooltip template

Thread ID:

Created:

Updated:

Platform:

Replies:

140809 Nov 7,2018 07:12 PM UTC Nov 12,2018 05:10 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Maps
Daniel
Asked On November 7, 2018 07:12 PM UTC

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 [Syncfusion]
Replied On 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. 


Daniel
Replied On 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!


Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 
 


Daniel
Replied On November 9, 2018 04:57 PM UTC

Hi!

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

Regards!

Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon