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

Server Side Marker Setting

2 Answers 62 Views
Map
This is a migrated thread and some comments may be shown as answers.
Tim Larson
Top achievements
Rank 1
Tim Larson asked on 15 Oct 2014, 03:10 PM
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.

2 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 20 Oct 2014, 06:34 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Peter Milchev
Telerik team
answered on 09 Oct 2018, 03:16 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Map
Asked by
Tim Larson
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Peter Milchev
Telerik team
Share this question
or