This is a migrated thread and some comments may be shown as answers.

Kendo Map ASP MVC Scrolling with Mouse for Zoom Problem

5 Answers 210 Views
Map
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 31 Mar 2017, 11:21 AM

When I pull up my map (Center is on Michigan) and scroll in or out with my mouse, the map centers on Africa and starts scrolling in or out from there.  It doesn't matter where the map is, scrolling with the mouse always moves the map over to Africa.  How do I fix that so that the map scrolls in or out, based on where the mouse pointer is?

Here is my cshtml razor object:

@(Html.Kendo().Map()
      .Name("crimemapping_results")
      .Center(Model.DefaultLatitude, Model.DefaultLongitude)
      .Zoom(3)
      .MinZoom(3)
      .Wraparound(true)
      .Layers(layers =>
      {
          layers.Add()
              .Type(MapLayerType.Tile)
              .UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
              .Subdomains("a", "b", "c")
              .Attribution("© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");
 
          layers.Add().AutoBind(false)
              .Type(MapLayerType.Bubble)
              .Style(style => style
                  .Fill(fill => fill.Color("#00f").Opacity(0.4))
                  .Stroke(stroke => stroke.Width(0))
              )
              .DataSource(dataSource => dataSource
                  .Read(read => read.Action("CrimeMapping_Map", "Home").Data("map_get"))
              )
              .LocationField("latlng")
              .ValueField("DataCount");
      })
      .Events(events => events
          .ShapeMouseEnter("onShapeMouseEnter")
          .Reset("onReset")
      )
)

5 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 1
answered on 31 Mar 2017, 11:53 AM
A little more information, when I am looking at the console, scrolling causes an error.  I am attaching a screenshot.
0
Alex Hajigeorgieva
Telerik team
answered on 04 Apr 2017, 08:49 AM
Hello Stephen,

Unfortunately, I was not able to reproduce the scroll always moving to Africa by mocking the same configuration as shown in the provided snippet written in JavaScript in the Dojo below:

http://dojo.telerik.com/UroROv

This means that the described behaviour may be due to either of the event handlers attached to the reset or the shapeEnter events or to a third-party library. I mention a third-party library because the screenshot shows errors which are not from Kendo UI. Here is what I need so we can move forward:

- Are you possibly using Ext js?
- What is the relation between the Kendo UI Map and the item which is throwing errors in the console?
- Could you please provide a code snippet with the "onReset" and "onShapeMouseEnter" functions?

Hopefully, this will give us a good starting point to investigate. 

Regards,
Alex Hajigeorgieva
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Stephen
Top achievements
Rank 1
answered on 04 Apr 2017, 11:16 AM

We are not using Ext js.  I get the same behavior, even when I comment out the onShapeMouseEnter and onReset events.  So, it isn't related to those, but here is the code.

function onShapeMouseEnter(e) {
    console.log(e);
    $("#jurisdiction_highlighted").text(e.shape.dataItem.Jurisdiction + " - " + e.shape.dataItem.DataCount);
}
 
function onReset() {
    $("#jurisdiction_highlighted").text("");
}

 

I pasted your $("#map").kendoMap example into my page, and the one thing that is consistent is that when I scroll on the map, it moves to Africa, just like it does in my example.

When the map first comes up, scrolling doesn't throw any errors.  Once I load in a couple of data points, they are thrown into the upper left corner of the map.  If I scroll, at this point, I will see the errors.  If I move the map so that the dots are towards the middle I see that the dots are just a quarter of a circle, until I let go of the map after moving it with the mouse.  When I let go of the mouse, the 1/4 circle becomes a whole circle and I don't get the scroll error anymore.

If you look at my other open issue in the Map Forums, you will see the history there and I am pretty sure these two issues are related.  From what I have seen with other people's similar errors, it seems to be related to something with the data points on the map.  For me, all of my dots on the map go to the same place, even though their lat and long coordinates should put them somewhere else.  I think if we can figure out the data point issue, this other issue will go away.

0
Stephen
Top achievements
Rank 1
answered on 04 Apr 2017, 02:54 PM

I found the root file problem that causes this issue, but I don't know why.  Including this file in my js bundle is the issue:

"~/scripts/kendo/kendo.web.js"

When I remove this from my bundle, everything works.

0
Alex Hajigeorgieva
Telerik team
answered on 06 Apr 2017, 08:50 AM
Hello Stephen,

I am glad to hear that you have found the root cause of the issue. I believe that you may have included more than one of the Kendo UI combined scripts which could be a reason for errors and unexpected behaviour due to duplications. This is noted in the second important section of the article at:

http://docs.telerik.com/kendo-ui/intro/installation/what-you-need#combined-scripts

I noticed that my colleague has already responded to you in the other thread, however, I am adding the response here in case someone else stumbles upon either error.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualisation (charts) and form elements.
Tags
Map
Asked by
Stephen
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or