Kendo Map ASP MVC LocationField on Read

[Stephen]

I am trying to implement a Kendo Map, using ASP MVC, using Read, called from javascript.  The call works, I get my data back through the Controller, but no matter what I try, I can't seem to get the right value into the LocationField, so the bubbles on my map do not work.

Here is the cshtml:

@(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")
      )
)

 

In the javascript, I just do a read:  $("#crimemapping_results").data("kendoMap").layers[1].dataSource.read();

This goes through my controller to my object model, where I return a single record, with the following fields:

public List<MapData> GetMap(string pJSON, int pUserId)
{
    dynamic _Json = JObject.Parse(pJSON);
    var _Results = new List<MapData>();
    var _Result = new MapData();
    _Result.Jurisdiction = "Holland City";
    _Result.lat = Convert.ToString(42.787523);
    _Result.lng = Convert.ToString(-86.108930);
    _Result.latlng = "[" + _Result.lat + "," + _Result.lng + "]";
    _Result.DataCount = 25;
    _Results.Add(_Result);

    return _Results;
}

 

I have tried all kinds of formats for the latitude and longitude.  The values lat and lng are doubles, but I have also tried them as strings, but I get the same result.  LocationField in the cshtml control only takes one argument.  I have tried "latitude,longitude" as a string, then I tried it with [ ] 's on it.  What happens is the whole latlng value ends up in the object under the location, lat value, if I look at the map control during runtime.

I put a console.log on hover to see what 'e' is, for the point on the map and here is what that looks like (file attached).  It shows my object, with my latlng value all thrown into location lat.  What value should go into LocationField, so that it ends up a latitude and l

 

 

[Stephen]

I was able to get a little further.  I realized LocationField was looking for an array.  So, I tried an array of doubles and a list of doubles and it did cause it to put a value into both location lat and long, which is a step in the right direction.  The problem is that my bubble on the map is still no where near where it should be, so something is still wrong.  Here is a new screen print of my e object, when I hover over my map bubble.

Also, here is my object model:

public class CrimeMapModel
{
    public List<MapData> GetMap(string pJSON, int pUserId)
    {
        try
        {
            dynamic _Json = JObject.Parse(pJSON);
            var _Results = new List<MapData>();
            var _Result = new MapData();
            _Result.Jurisdiction = "Holland City";
            _Result.lat = 42.787523;
            _Result.lng = -86.108930;
            _Result.latlngs = new List<double>();
            _Result.latlngs.Add(_Result.lat);
            _Result.latlngs.Add(_Result.lng);
            _Result.latlng = new double[2];
            _Result.latlng = _Result.latlngs.ToArray();
            _Result.DataCount = 25;
            _Results.Add(_Result);
            return _Results;
        }
        catch (Exception ex)
        {
            return null;
        }


    }
}

public class MapData
{
    public string Jurisdiction { get; set; }
    public List<double> latlngs { get; set; }
    public double[] latlng { get; set; }
    public double lat { get; set; }
    public double lng { get; set; }
    public int DataCount { get; set; }
}

[Boyan Dimitrov]

Hello Stephen,

Indeed in general your observations are absolutely correct - localization field should be an array of decimals indicating the location on the map. I am not sure that what issue you are facing after implementing the field to be array of decimals. Could you please elaborate on the problem? 

Regards,
Boyan Dimitrov
Telerik by Progress

[Stephen]

It isn't putting the dot on the map anywhere near where it should be.  I just throws it up in the upper left.  I doesn't really matter what I use for the latitude and longitude.  So whatever is showing in the map window, when I fetch a map coordinate object, it is placed in the upper left corner (seen in screenshot in attached file).

 

 

[Stephen]

Also, just to prove the points on the map always go to the upper corner, I put in multiple records (with different latitudes and longitudes) and they are all stacked on top of each other in the upper left hand corner.

When the map is first drawn, it correctly plots the center of the map, using the Center values in the Kendo Map Control.  If I use those same coordinates as one of the map data points in the collection, that also gets a dot in the upper left hand corner of the map.

[Stephen]

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.

[Stephen]

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.

[Boyan Dimitrov]

Hello Stephen,

I guess the problem here is duplicating combined scripts. As explained in the Combined Scripts article this should be avoided because can cause an expected behavior. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Stephen]

Ok, that is what I was looking for, something that says I shouldn't have both the all file and the web file included.  Thank you.