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
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
5 Answers, 1 is accepted
0
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
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
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
![](/forums/images/avatarimages/default.gif)
Daniel
Top achievements
Rank 1
answered on 15 Sep 2014, 02:36 AM
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:
​
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
>
0
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
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
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
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
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
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
![](/forums/images/avatarimages/default.gif)
Daniel
Top achievements
Rank 1
answered on 29 Sep 2014, 12:19 AM
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
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