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

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

5 Answers 368 Views
Map
This is a migrated thread and some comments may be shown as answers.
Tobias
Top achievements
Rank 1
Tobias asked on 27 Jun 2014, 05:50 AM
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!


5 Answers, 1 is accepted

Sort by
0
Accepted
Hristo Germanov
Telerik team
answered on 01 Jul 2014, 07:37 AM
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!
 
0
Tobias
Top achievements
Rank 1
answered on 17 Jul 2014, 06:05 AM
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!
0
Hristo Germanov
Telerik team
answered on 18 Jul 2014, 02:27 PM
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!
 
0
Tobias
Top achievements
Rank 1
answered on 21 Jul 2014, 09:53 AM
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!
0
Accepted
T. Tsonev
Telerik team
answered on 21 Jul 2014, 11:48 AM
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!
 
Tags
Map
Asked by
Tobias
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Tobias
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or