Difficulty Adding Bubble Layer on Map

3 posts, 1 answers
  1. IT
    IT avatar
    2 posts
    Member since:
    Feb 2015

    Posted 16 Mar Link to this post

    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?

     

     




     

  2. IT
    IT avatar
    2 posts
    Member since:
    Feb 2015

    Posted 17 Mar in reply to IT Link to this post

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

     

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 17 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top