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

[Tobias]

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!

[Hristo Germanov]

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

 

 

[Tobias]

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!

[Hristo Germanov]

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

 

 

[Tobias]

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!

[T. Tsonev]

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