How can I display Map-marker-style (pins) dependent on dataSource

6 posts, 2 answers
  1. Tobias
    Tobias avatar
    3 posts
    Member since:
    Apr 2014

    Posted 27 Jun 2014 Link to this post

    Hi,

    is it possible to set the pin type via datasource - as the first step?
    In my example I got something like this:

    data =[{"name": "test1", "shape":"pinTarget", "latlng":[30.268107, -97.744821]},
           {"name": "test2","shape":"pin", "latlng":[40.268107, -97.744821]}];
     
     
    $("#map").kendoMap({
        center : [ 30.268107, -97.744821 ],
        zoom : 3,
     
        layers : [ {
             type : "tile",
             urlTemplate : "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom     #/#= x #/#= y #.png",
             subdomains : [ "a", "b", "c" ],
             attribution : "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." + "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
        } ,{
             type: "marker",
             dataSource: data,
     
             locationField: "latlng",
             titleField: "name"}],
    });

    In the next step, I would like to set the markers via datasource and use my own style for the markers. Is that possible?
    In my second example I got something like this:

    data =[{"name": "test1", "shape":"pinTarget", "latlng":[30.268107, -97.744821]},
           {"name": "test2","shape":"mystyle", "latlng":[40.268107, -97.744821]}];
     
     
    $("#map").kendoMap({
        center : [ 30.268107, -97.744821 ],
        zoom : 3,
     
        layers : [ {
             type : "tile",
             urlTemplate : "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom     #/#= x #/#= y #.png",
             subdomains : [ "a", "b", "c" ],
             attribution : "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." + "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
        } ,{
             type: "marker",
             dataSource: data,
     
             locationField: "latlng",
             titleField: "name"}],
    });

    And in the css something like this:

    .k-marker-my-style {
        
        border: solid 5px #00f;
     
      }


    Thanks in advance!


  2. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 01 Jul 2014 Link to this post

    Hello Tobias,

    In the markerCreated event you can set the marker's shape from dataItem.

    e.marker.options.shape = e.marker.dataItem.shape;

    I hope this helps.

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tobias
    Tobias avatar
    3 posts
    Member since:
    Apr 2014

    Posted 17 Jul 2014 in reply to Hristo Germanov Link to this post

    Hello Hristo Germanov,

    thanks it work's fine!!!

    One more question:

    My datasource (json) looks like: 

    [{"status":"ERROR","lastTimeStamp":"2014-06-05T23:59:59.000+0200","name":"test","markerShape":"pinTarget","position":[48.2748206,8.849529799999999]}]

    How can I get data from the datasource, in example name and status? Like this:

    layerDefaults: {
                    marker: {
                        tooltip: {
                            template: "status:#= dataSource .status #, name:#= dataSource.name#"
                        }
                    }
                },

    Thanks in advance!
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 18 Jul 2014 Link to this post

    Hello Toblas,

    You can use dataItem from the marker in the tooltip. You need to do something similar like in the second example of the template: http://docs.telerik.com/kendo-ui/api/dataviz/map#configuration-layerDefaults.marker.tooltip.template

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Tobias
    Tobias avatar
    3 posts
    Member since:
    Apr 2014

    Posted 21 Jul 2014 in reply to Hristo Germanov Link to this post

    Hi, 

    I did something like this:

    layers : [ {
                        type : "tile",
                          
                        urlTemplate : "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
                        subdomains : [ "a", "b", "c" ],
                        attribution : "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." + "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
                    }, {
                        type : "marker",
                        dataSource : response,
                        tooltip: {
                            showOn: "click",
                            show: onShow,
                            template: "#= kendo.toString(marker.dataItem.guid) #"
                        },
                        locationField : "position"
                         
                    } ],
    and a function that is called when I click on a marker:

    function onShow(e){
                        alert(e);
                       alert("onShow");
                        var markertest = kendo.toString(e.marker.dataItem.guid);
                       alert(markertest);
                    }

    The template (template: "#= kendo.toString(marker.dataItem.guid) #") work's fine, but how can I get access to the marker.dataItem.guid in the onShow function?

    Thanks in advance!
  7. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 21 Jul 2014 Link to this post

    Hi,

    The marker data item can be accessed like this:
    function onShow(e) {
      var dataItem = e.sender.marker.dataItem;
    }


    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready