Does the map widget natively support using an SVG in place of a PNG marker?

[Andre]

Hi,

I was following the advice in this thread:
http://www.telerik.com/forums/marker-colour

Our use case is that we would like to use an SVG to represent a vehicle on the map, and using an SVG would allow us to rotate the truck depending on its current GPS heading. 

I was just wondering if the markers support the use of an SVG instead of a PNG? Following the thread above, I was able to use an SVG but it doesn't look quite right with the kendo way of displaying markers. At a certain pixel size, it edges get cut off.

Thanks in advance!

Andre

[Hristo Germanov]

Hello Andre,

Could you please give me an example that I can examine and advice you further?

Regards,
Hristo Germanov
Telerik

 

 

[Andre]

Hi Hristo,

This worked for me, but it was a bit of a kludge and I couldn't get the marker to be sized appropriately. So I was just wondering if there's a better way to do it.

Here is some of the code, I was using:

Step 1: .k-map .k-marker{background-image:url("Default/ /*previously markers.png */")}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2){.k-map .k-marker{background-image:url("Default/truck.svg/*previously markers_2x.png*/")}}

Step 2: .k-marker-my-style{
background-size: cover; /*The Image tiles twice if I don't set this property accordingly*/
width: 30px; /* Anything over 30px causes the image to cutoff at its right edge */
}

step 3: initialize the markers

markers: [{
                    location: [48.4250612, -123.3697199],
                    shape: "my-style",
                    tooltip: {
                        template: "Lon:#= location.lng #,<br /> Lat:#= location.lat #"
                    }
                }, {
                    location: [48.41869, -123.38533],
                    shape: "pinTarget",
                    tooltip: {
                        template: "Lon:#= location.lng #,<br /> Lat:#= location.lat #"
                    }
                }]

[Hristo Germanov]

Hello Andre,

Could you please give me a runnable test project/page or something that I can examine? Because I can't understand what is the problem here. Thank you for the understanding.

Regards,
Hristo Germanov
Telerik

 

 

[Andre]

Hi Hristo,

I'm unable to provide a runnable example at the moment. However, I the post below where you answered is related to my question. I may have just phrased it the wrong way.

Here's the link:
http://www.telerik.com/forums/how-can-i-display-map-marker-style-(pins)-dependent-on-datasource

So to rephrase: Is it possible to use custom marker shapes on the map? We would like to update the marker's position in real-time but use a different image as a marker/pin. I've noticed kendo comes with its own pin images, so I'm wondering if there is a way to use a custom image for the pin. The catch is that the use case is different from the images that come with Kendo, because each change in orientation (North, South, East, West) will need to be represented by a different image. Kendo has two marker images, one is a single pin, the other is two pins with different states.

So I just wondered if its possible to specify pin images in the code?

Thanks,
Andre

[Hristo Germanov]

Hi Andre,

You need to change the css background or if you have sprite like us you can update background-position or you can change the css class for a marker style. 

Here is the example how to change the marker position and background position manually: http://trykendoui.telerik.com/@germanov/UsOL/2

I hope this helps.

Regards,
Hristo Germanov
Telerik

 

 

[Andre]

Thanks Hristo! I'll work off of your example.

[Hristo Germanov]

Hi Andre,

Let us know if you have any questions.

Regards,
Hristo Germanov
Telerik