Difficulty Adding Bubble Layer on Map

[IT]

I am new to Kendo map but I can add tile layer, shape layer, marker layer.  I encounter some difficulty when I try to add bubble layer.

I start with bubble demo from http://demos.telerik.com/kendo-ui/map/bubble-layer

I add the following code,

    layers.Add()
             .Type(MapLayerType.Bubble)
             .Style(style => style
                                            .Fill(fill => fill.Color("#red").Opacity(0.4))
                                            .Stroke(stroke => stroke.Width(0))
                                        )
                                        .DataSource(dataSource => dataSource
                                            .GeoJson()
                                            .Read(read => read.Url(Url.Content("~/Content/urban-areas.json")))
                                        )                                        
                                        .LocationField("Location")
                                        .ValueField("Pop2010");

I try to find urban-areas.json from Internet and trim to two record. like following

[
  {
    "City": "Sofia",
    "Country": "Bulgaria",
    "Country_ISO3": "BGR",
    "Pop1950": 520,
    "Pop1955": 620,
    "Pop1960": 710,
    "Pop1965": 810,
    "Pop1970": 890,
    "Pop1975": 980,
    "Pop1980": 1070,
    "Pop1985": 1180,
    "Pop1990": 1190,
    "Pop1995": 1170,
    "Pop2000": 1130,
    "Pop2005": 1170,
    "Pop2010": 1180,
    "Pop2015": 1210,
    "Pop2020": 1230,
    "Pop2025": 1240,
    "Pop2050": 1236,
    "Location": [
      42.7,
      23.33
    ]
  },
  {
    "City": "Mandalay",
    "Country": "Myanmar",
    "Country_ISO3": "MMR",
    "Pop1950": 170,
    "Pop1955": 200,
    "Pop1960": 250,
    "Pop1965": 310,
    "Pop1970": 370,
    "Pop1975": 440,
    "Pop1980": 500,
    "Pop1985": 560,
    "Pop1990": 640,
    "Pop1995": 720,
    "Pop2000": 810,
    "Pop2005": 920,
    "Pop2010": 960,
    "Pop2015": 1030,
    "Pop2020": 1170,
    "Pop2025": 1310,
    "Pop2050": 1446,
    "Location": [
      21.97,
      96.08
    ]
  }
]

I ran it I see I don't see the Bubble and see an Error.

Uncaught TypeError: t is not a function in kendo.all.min.js:97

If I reload the web,  I got

Uncaught TypeError: t is not a function in kendo.all.js:144729

            _drawSymbol: function (shape) {
                var args = {
                    layer: this,
                    shape: shape
                };
                var cancelled = this.map.trigger('shapeCreated', args); <------- here
                if (!cancelled) {
                    this.surface.draw(shape);
                }
            }

I am using 2016.1.112

If I switch to another I I create.  I don't see the error but still not see the bubble.  

And I exam. $("#map").data("kendoMap"),  Look to me the bubble layer is created but not correctly.

I see.

layers:Array[2]

0: h.extend.init

1:o

Should I expect o.extend.init?

 

 

 

[IT]

I think at least I found an error,  Compare to Demo in http://demos.telerik.com/aspnet-mvc/map/bubble-layer

I should not have .GeoJson().

But in example,  there is no info about how Action("_UrbanAreas", "Map") should be implement.

Following is my not working version.

        public ActionResult _UrbanAreas()
        {
            string json = "[{"Pop2010": 1180, "Location": [ 42.7,  23.33 ]  },    { "Pop2010": 960, "Location": [ 21.97, 96.08 ] }]";
            return Content(json);
        }

 

 

 

@(Html.Kendo().Map()

.Name("map")

.Center(45, 45)

.Zoom(4)

.MinZoom(3)

.Wraparound(false)

.Layers(layers => { layers.Add() .Type(MapLayerType.Tile) .UrlTemplate("http://otile3.mqcdn.com/tiles/1.0.0/sat/#= zoom #/#= x #/#= y #.png") .Attribution("Tiles &copy; <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a>");

layers.Add() .

Type(MapLayerType.Bubble) .

Style(style => style .Fill(fill => fill.Color("#fff").Opacity(0.4))

.Stroke(stroke => stroke.Width(0)) )

.DataSource(dataSource => dataSource .Read(read => read.Action("_UrbanAreas", "Map")) )

.LocationField("Location")

.ValueField("Pop2010"); })

.Events(events => events .ShapeMouseEnter("onShapeMouseEnter") .Reset("onReset") )

 

[Patrick | Technical Support Engineer, Senior]

Hello IT Services,

Please take a look at the attached Kendo Bubble Map Sample.  I was unable to replicate the error you are receiving, and it is working as expected.

If the project does not help clarify things, please update the attached project to demonstrate the current errors you are receiving.

Please let me know the results.  Hope it helps.

Regards,
Patrick
Telerik