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

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

7 Answers 103 Views
Map
This is a migrated thread and some comments may be shown as answers.
Andre
Top achievements
Rank 1
Andre asked on 24 Jun 2014, 11:14 PM
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

7 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 26 Jun 2014, 03:32 PM
Hello Andre,

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

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
Andre
Top achievements
Rank 1
answered on 26 Jun 2014, 06:20 PM
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 #"
                    }
                }]



0
Hristo Germanov
Telerik team
answered on 30 Jun 2014, 02:52 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andre
Top achievements
Rank 1
answered on 03 Jul 2014, 08:46 PM
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









0
Hristo Germanov
Telerik team
answered on 07 Jul 2014, 03:03 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andre
Top achievements
Rank 1
answered on 07 Jul 2014, 06:18 PM
Thanks Hristo! I'll work off of your example.
0
Hristo Germanov
Telerik team
answered on 09 Jul 2014, 03:52 PM
Hi Andre,

Let us know if you have any questions.

Regards,
Hristo Germanov
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
Andre
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Andre
Top achievements
Rank 1
Share this question
or