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

Kendo Map ASP MVC LocationField on Read

8 Answers 94 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:04 AM

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

 

 

8 Answers, 1 is accepted

Sort by
0
Stephen
Top achievements
Rank 1
answered on 31 Mar 2017, 11:47 AM

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; }
}
0
Boyan Dimitrov
Telerik team
answered on 03 Apr 2017, 07:21 AM

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
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.
0
Stephen
Top achievements
Rank 1
answered on 03 Apr 2017, 11:03 AM

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).

 

 

0
Stephen
Top achievements
Rank 1
answered on 03 Apr 2017, 11:23 AM

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.

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
Stephen
Top achievements
Rank 1
answered on 04 Apr 2017, 02:55 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
Boyan Dimitrov
Telerik team
answered on 05 Apr 2017, 07:34 AM

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
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.
0
Stephen
Top achievements
Rank 1
answered on 05 Apr 2017, 11:05 AM
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.
Tags
Map
Asked by
Stephen
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or