Server Side Marker Setting

[Tim Larson]

I am trying to build a server side binding application where I have the customer (green marker) and suppliers (red marker) and I can't seem to get the markers to get set differently.  I would like to use the push pins from the custom markers on the client side datasource but I can not seem to get it figured out.  Any help would be appreciated.

[Ianko]

Hello Tim,

Thank you for contacting Telerik support.

The Markers have two built-in layouts - Pin and PinTarget. The Markers article explains more about their configuration. Maybe it would be useful for you to know, that actually the pins of the markers are rendered with a special font and rendered via CSS and the :before pseudo class of the span element that represents the marker in the DOM.

This is important, because to customize a Marker first you need to reset the pseudo class of the marker. There is already the mentioned Client-side Data Binding example that shows how custom marker can be added. I suggest following it to examine how the CSS styles, provided there affect the markers and use plain images as background images instead of the default font.

Basically, using the Shape property of the marker defines the class name of the element. Built-in options for this property are - pinTarget and pin. Defining a custom value e.g. CustomMarker would render a marker element with the following class k-marker-Custom-marker. Without further custom CSS classes for this element, a default pin target look will be applied.

Using this class you can further set rules to reset the :before pseudo class and clear the default look.

.RadMap .k-marker.k-marker-Custom-marker:before{
    content: "";
    color: none;
    text-shadow: none;
    height: auto;
    width: auto;
    padding: 0;
}

After this step, you can set your own background image to show up as a marker on the map.

.RadMap .k-marker.k-marker-Custom-marker {
    background-image: url('[path to image]');
    background-repeat: no-repeat;
    width: 16px;
    height: 21px;
    margin-top: -19px;
}

Note that the proper position of the marker on the map greatly depends on the element size. If needed, the position can be modified using the margin attribute.  In this case the margin-top: -19px; compensates the position calculations of the logic behind and shows the custom marker at the correct place. To verify the position you can simply use one built-in marker and one custom with the same Latitude and Longitude values and visually compare their position on the map.

You can also find an attached project that demonstrates simple example of custom markers, so that you could directly test and follow the changes needed to be done.

Let me know if you still have difficulties on configuring the desired custom markers.

Regards,
Ianko
Telerik

 

 

[Peter Milchev]

A quick update. 

As of R3 2018 release, the custom marker classes are created as k-i-marker-<marker.shape> and not k-marker-<marker.shape>.

With that said, the correct styles are as follows: 

<style>
    .RadMap .k-marker.k-i-marker-custom-marker {
        background-image: url('MarkerImages/custom-marker.png');
        background-repeat: no-repeat;
        width: 16px;
        height: 21px;
        margin-top: -19px;
    }

    .RadMap .k-marker.k-i-marker-school {
        background-image: url('MarkerImages/school-marker.png');
        background-repeat: no-repeat;
        width: 16px;
        height: 21px;
        margin-top: -19px;
    }

    .RadMap .k-marker.k-i-marker-competitor {
        background-image: url('MarkerImages/competitor-marker.png');
        background-repeat: no-repeat;
        width: 16px;
        height: 21px;
        margin-top: -19px;
    }

        .RadMap .k-marker.k-i-marker-custom-marker:before,
        .RadMap .k-marker.k-i-marker-school:before,
        .RadMap .k-marker.k-i-marker-competitor:before {
            content: "";
            color: none;
            text-shadow: none;
            height: auto;
            width: auto;
            padding: 0;
        }
</style>

Regards,
Peter Milchev
Progress Telerik