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.
Unfortunately, activation email could not send to your email. Please try again.

Showing tooltips on a deeper layer in a drill-down map

Thread ID:

Created:

Updated:

Platform:

Replies:

120574 Sep 27,2015 07:57 AM Sep 30,2015 12:51 AM ASP.NET MVC 4
loading
Tags: Map
Matthias
Asked On September 27, 2015 07:57 AM

Hi

I currently have tooltips displaying on my top layer but when I drill down one layer, the tooltips for the second layer don't display.


Here is my map code:

@(Html.EJ().Map("maps")
                          .ZoomSettings(zm => { zm.EnableZoomOnSelection(true); })
                          .ClientSideEvents(eve =>
                          {
                              eve.OnRenderComplete("onLoad");
                              eve.ShapeSelected("OnDrilled");
                          })
                          .Layers(lr =>
 
                          {
                              lr.LayerType(LayerType.Geometry)
                                  .EnableMouseHover(true)
                                  .ShapeSettings(sp =>
                                  {
                                      sp.Stroke("black")
                                          .Fill("#C3E6ED")
                                          .HighlightColor("#63B7B7")
                                          .SelectionColor("#207BB2")
                                          .StrokeThickness(0.5);
                                  })
                                  .ShapeData(districtMapData).Add();
                              lr.LayerType(LayerType.Geometry)
                                  .EnableSelection(true)
                                  .ShapeDataPath("name")
                                  .EnableMouseHover(true)
                                  .ShapePropertyPath("PR_NAME")
                                  .ShowMapItems(false)
                                  .DataSource(provinceDatasource)
                                  .ShapeSettings(sp =>
                                  {
                                      sp.Fill("#C3E6ED")
                                          .StrokeThickness(0.5)
                                          .AutoFill(false)
                                          .Stroke("white")
                                          .HighlightColor("#63B7B7")
                                          .HighlightStroke("white")
                                          .ValuePath("name")
                                          .ColorValuePath("name")
                                          .EqualColorMappings(cm =>
                                          {
 
                                              cm.Value("Gauteng").Color("#D84444").Add();
 
                                              cm.Value("Obama").Color("#316DB5").Add();
 
                                          })
                                          ;
                                  })
                                  .ShapeData(provincialMapData)
                                  .ShowTooltip(true)
                                  .TooltipTemplate("template")
                                  .Add();
 
                              lr.LayerType(LayerType.Geometry)
                                  .EnableSelection(true)
                                  .EnableMouseHover(true)
                                  .ShapeDataPath("name")
                                  .ShapePropertyPath("Q11_DC_NAM")
                                  .DataSource(districtDatasource)
                                  .ShowMapItems(false)
                                  .ShapeSettings(sp =>
                                  {
                                          sp.Stroke("black")
                                          .Fill("#C3E6ED")
                                          .AutoFill(false)
                                          .HighlightColor("#63B7B7")
                                          .SelectionColor("#207BB2")
                                          .StrokeThickness(0.5)
                                          .ValuePath("name");
                                  })
                                  .ShapeData(districtMapData)
                                  .ShowTooltip(true)
                                  .TooltipTemplate("template")
                                  .Add();
                          })
 
 
 
                          )
function OnDrilled(event) {
            if (event.model.baseMapIndex === 1) {
 
                var mapObj = $("#maps").data("ejMap");
                mapObj.model.enableAnimation = true;

                mapObj.option("baseMapIndex", 0);

                var button = document.getElementById("button1");
                $(button).css('background-color', '#0F77B7');
                $(button).fadeIn(500);
                var title = document.getElementById("title");
                $(title).css("display", "none");
            }
        }


Any help will be appreciated.

Regards,

Matthias


Matthias
Replied On September 27, 2015 08:11 AM

Sorry I spotted a mistake in my map code. Here is an update:

@(Html.EJ().Map("maps")
                          .ZoomSettings(zm => { zm.EnableZoomOnSelection(true); })
                          .ClientSideEvents(eve =>
                          {
                              eve.OnRenderComplete("onLoad");
                              eve.ShapeSelected("OnDrilled");
                          })
                          .Layers(lr =>
 
                          {
                              lr.LayerType(LayerType.Geometry)
                                  .EnableSelection(true)
                                  .EnableMouseHover(true)
                                  .ShapeDataPath("name")
                                  .ShapePropertyPath("Q11_DC_NAM")
                                  .DataSource(districtDatasource)
                                  .ShowMapItems(false)
                                  .ShapeSettings(sp =>
                                  {
                                      sp.Stroke("black")
                                      .Fill("#C3E6ED")
                                      .AutoFill(false)
                                      .HighlightColor("#63B7B7")
                                      .SelectionColor("#207BB2")
                                      .StrokeThickness(0.5)
                                      .ValuePath("name");
                                  })
                                  .ShapeData(districtMapData)
                                  .ShowTooltip(true)
                                  .TooltipTemplate("template")
                                  .Add();
                            
                              lr.LayerType(LayerType.Geometry)
                                  .EnableSelection(true)
                                  .ShapeDataPath("name")
                                  .EnableMouseHover(true)
                                  .ShapePropertyPath("PR_NAME")
                                  .ShowMapItems(false)
                                  .DataSource(provinceDatasource)
                                  .ShapeSettings(sp =>
                                  {
                                      sp.Fill("#C3E6ED")
                                          .StrokeThickness(0.5)
                                          .AutoFill(false)
                                          .Stroke("white")
                                          .HighlightColor("#63B7B7")
                                          .HighlightStroke("white")
                                          .ValuePath("name")
                                          .ColorValuePath("name")
                                          .EqualColorMappings(cm =>
                                          {
 
                                              cm.Value("Gauteng").Color("#D84444").Add();
 
                                              cm.Value("Obama").Color("#316DB5").Add();
 
                                          })
                                          ;
                                  })
                                  .ShapeData(provincialMapData)
                                  .ShowTooltip(true)
                                  .TooltipTemplate("template")
                                  .Add();
 
                        
                          })
 
 
 
                          )

Mohana V [Syncfusion]
Replied On September 28, 2015 08:39 AM

Hi Matthias,

Query : "currently have tooltips displaying on my top layer but when I drill down one layer, the tooltips for the second layer don't display."

We have created simple drilldown map sample and added separate tooltip template for the layers since we are using separate datasource to each layers.

In that sample we have added tooltip template "template1" for "Asia" continent and when we drill into Asia, the respective country name will be displayed in tooltip data.


Please find the Map sample link:

http://www.syncfusion.com/downloads/support/directtrac/general/DRILLD~2-976769435.ZIP

Please let us know in case of any query.

Regards,
Mohana V

Matthias
Replied On September 29, 2015 04:41 PM

Thanks for the help!

Mohana V [Syncfusion]
Replied On September 30, 2015 12:51 AM

Hi Matthias,

Thanks for your update and please let us know if you need any further assistance.

Regards,
Mohana V

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.

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.

;