Kendo Map ASP MVC Scrolling with Mouse for Zoom Problem

6 posts, 0 answers
  1. Stephen
    Stephen avatar
    32 posts
    Member since:
    Dec 2013

    Posted 31 Mar Link to this post

    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")
          )
    )
  2. Stephen
    Stephen avatar
    32 posts
    Member since:
    Dec 2013

    Posted 31 Mar Link to this post

    A little more information, when I am looking at the console, scrolling causes an error.  I am attaching a screenshot.
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 04 Apr Link to this post

    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 visualization (charts) and form elements.
  4. Stephen
    Stephen avatar
    32 posts
    Member since:
    Dec 2013

    Posted 04 Apr Link to this post

    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.

  5. Stephen
    Stephen avatar
    32 posts
    Member since:
    Dec 2013

    Posted 04 Apr Link to this post

    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.

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 06 Apr Link to this post

    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.
Back to Top