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

8 posts, 0 answers
  1. Andre
    Andre avatar
    14 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2014 Link to this post

    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
  2.
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 26 Jun 2014 Link to this post

    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!
     
  5. Andre
    Andre avatar
    14 posts
    Member since:
    Jun 2014

    Posted 26 Jun 2014 in reply to Hristo Germanov Link to this post

    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 #"
                        }
                    }]



  7. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 30 Jun 2014 Link to this post

    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!
     
  8.
  9. Andre
    Andre avatar
    14 posts
    Member since:
    Jun 2014

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

    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









  11. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 07 Jul 2014 Link to this post

    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!
     
  13. Andre
    Andre avatar
    14 posts
    Member since:
    Jun 2014

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

    Thanks Hristo! I'll work off of your example.
  14.
  15. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 09 Jul 2014 Link to this post

    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!
     
Back to Top