Customized markers for map

[Craig]

I am currently trying to add custom markers to a map in MVC C#.
Is there anyway of creating a different shape/image in MapMarkersShape to display it on the map?
My current code is as follows:

@(Html.Kendo().Map()
    .Name("map")
    .Center(30.268107, -97.744821)
    .Zoom(3)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Bing)
            .Shape(MapMarkersShape.Pin) // -< this line
            .Key("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"); 
    })
)

Thanks

[T. Tsonev]

Hi,

You can set the marker shape as a string as well:
.Shape("fooBar")

This will get applied as a "k-marker-foo-bar" class to the marker. Not the camelCase to kebab-case conversion.

This style can be used to style the marker using a suitable selector:
.k-map .k-marker-foo-bar {
    background-image: url("foo.png");
}

Make sure to include these styles after the Kendo UI skins as it has similar specificity.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Daniel]

I found issues with the position of a small marker as I zoomed out. I created a small marker 10px by 10px and embedded it in CSS coming from an SVG file. I have Kendo.Mvc version 2014.2.903.545. I think size is significant because I think the standard marker takes up a rectangle of 28px X 40px and if I make mine smaller, it does not properly center in that space and so is on the map incorrectly and changes vertically when zooming out. It appears to be top-aligned.

It seems like it is offset vertically by a height of 30px (40px - 10px). 

I made the marker smaller using height and width because otherwise the marker was getting vertically repeated inside of a rectangle defined in kendo.dataviz.min.css.  Here is the code for this experiment which comes from the example http://demos.telerik.com/aspnet-mvc/map/index but I changed the markers in the example:

​

@{
    ViewBag.Title = "KendoMap";
}

<h2>KendoMap</h2>


@(Html.Kendo()
    .Map()
    .Name("map")
    .Center(38.62049, -77.27287)
    .Zoom(12)
    .Layers(layers =>
    {
    layers.Add()
        .Type(MapLayerType.Tile)
        .UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
        .Subdomains("a", "b", "c")
        .Attribution("© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");
    })
    .Markers(markers =>
    {
    markers.Add()
        .Location(38.62049, -77.27287)
        .Shape("greenMarker")
        .Tooltip(tooltip => tooltip.Content("Woodbridge, VA"));

    markers.Add()
        .Location(38.62049, -77.37287)
        .Shape("redMarker")
        .Tooltip(tooltip => tooltip.Content("Woodbridge, VA"));
    })
)

<style>
    .k-map .k-marker-green-marker {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTAgMTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDEwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iIzAwRkYzMSIgY3g9IjUiIGN5PSI1IiByPSI1Ii8+DQo8L3N2Zz4NCg==');
        width: 10px;
        height: 10px;
    }

    .k-map .k-marker-red-marker {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTAgMTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDEwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgZmlsbD0iI0ZGMjUwMCIgY3g9IjUiIGN5PSI1IiByPSI1Ii8+DQo8L3N2Zz4NCg==');
        width: 10px;
        height: 10px;
    }
</style>

[Hristo Germanov]

Hello Daniel,

We need more time to investigate this issue. I will write you back as soon as I have information about it. Please excuse us for the inconvenience.

Regards,
Hristo Germanov
Telerik

 

 

[Hristo Germanov]

Hello Daniel,

The map will give to us the exact point point of the marker. Then with the css we will calculate the point for the marker but it depend of the shape of the marker. In your case you need to override the margin from .k-map .k-marker with your desired one. Here is my example: http://dojo.telerik.com/oseJ/2

Regards,
Hristo Germanov
Telerik

 

 

[Daniel]

Hello, Hristo,
Your solution worked wonderfully. I am grateful for the time you put into solving this for me and I am sorry I could not figure it out on my own. I appreciate your help,
Daniel