This is a migrated thread and some comments may be shown as answers.
Marker colour
6 Answers 219 Views
Map
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 22 Nov 2013, 10:05 AM
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

6 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 22 Nov 2013, 12:24 PM
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!
0
Ian
Top achievements
Rank 1
answered on 22 Nov 2013, 01:47 PM
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
0
T. Tsonev
Telerik team
answered on 22 Nov 2013, 02:03 PM
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!
0
Ian
Top achievements
Rank 1
answered on 22 Nov 2013, 03:48 PM
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
0
T. Tsonev
Telerik team
answered on 25 Nov 2013, 08:52 AM
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!
0
Troy
Top achievements
Rank 2
answered on 19 Dec 2013, 03:40 PM
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;
 }
Tags
Map
Asked by
Ian
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Ian
Top achievements
Rank 1
Troy
Top achievements
Rank 2
Share this question
or