Marker colour

7 posts, 0 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Nov 2013 Link to this post

    Hi,
    How do you change the colour of markers on the Map widget? They seem to be generated as images from the markers.png file included in the selected KendoUI theme.
    Is there a way to include additional marker symbols (with different colours) or to override the map widget methods used to add markers so that different custom images can be used?

    Regards, Ian
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 22 Nov 2013 Link to this post

    Hi,

    The markers are indeed implemented as predefined CSS backgrounds.
    Each skin contains a sprite with the predefined marker shapes in the [SkinName]/markers.png file. A separate high-resolution version is stored in markers_2x.png.
    Additional marker variations can be added to the sprite.

    Use the following steps for defining a new marker shape:
    1. Extend the existing PNG file height to accommodate the new shapes. Currently all shapes are 40px high (80px for the double-resolution file).
    2. Save the files as 8-bit PNG with opacity. You might want to work with 24-bit PNG and finally convert to 8-bit for better performance and compatibility.
    3. Define the CSS classes for the new shapes in kendo.dataviz.css:
    .k-map .k-marker-my-style {                                                                             
        background-position: 0px 80px;
    }                                                                                                         
                                                                                                              
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {                                                                           .k-map .k-marker-pin-target {                                                                         
            background-position: 0px 160px;                                                                    
        }                                                                                                     
    }

    A styling guide will be available as part of the documentation soon.
    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!
  3. Kendo UI is VS 2017 Ready
  4. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Nov 2013 Link to this post

    Hi,
    Thanks for the prompt reply. Your answer certainly explains how I can add additional marker images.

    Given that I can include additional marker images, how would I go about selecting a specific image for a specific marker? Is there a way of assigning a CSS class or a custom function to each marker so that the correct marker image can be rendered dynamically?

    Best regards, Ian
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 22 Nov 2013 Link to this post

    Hello,

    Whoops! I forgot the most important part. The marker CSS class is controlled by the shape option:
    Following the example from before:

    <div id="map"></div>
    <script>
        $("#map").kendoMap({
            layers: [{
                type: "tile",
                urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                attribution: "&copy; OpenStreetMap"
            }],
            markers: [{
                shape: "myStyle",
                location: [42, 27]
            }]
        });
    </script>

    You can also set default shape for all markers through markerDefaults.shape.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Nov 2013 Link to this post

    Hi,
    I tried setting the shape value to different values (eg. pin, pinTarget, myStyle) but the markers all seem to be rendered with the same default k-marker-pin-target class. Changing the shape setting for a marker doesn't seem to change the rendered Css class.
    See this jsBin example... JsBin

    Bets regards, Ian
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 25 Nov 2013 Link to this post

    Hello,

    This misbehavior is caused by a bug in the official release. The marker default settings are applied with higher priority.

    The latest internal build from Friday (2013.3.1122) already addresses this problem.
    A workaround is also available (updated demo):
        delete kendo.dataviz.ui.Map.fn.options.markerDefaults.shape;

    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Troy
    Troy avatar
    1 posts
    Member since:
    Aug 2008

    Posted 19 Dec 2013 Link to this post

    I just wanted to point out that the demo of the workaround includes a mistake.  The style definition for the custom marker is:

    .k-marker-myStyle {
      border: solid 1px #00f;
     }

    It should be:

    .k-marker-my-style{
      border: solid 1px #00f;
     }
Back to Top
Kendo UI is VS 2017 Ready