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

Customized markers for map

5 Answers 347 Views
Map
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 17 Jun 2014, 04:43 PM
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

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Jun 2014, 06:40 AM
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
 

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
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:

@{
    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
Hristo Germanov
Telerik team
answered on 17 Sep 2014, 08:01 AM
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
 

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
Hristo Germanov
Telerik team
answered on 17 Sep 2014, 12:36 PM
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
 

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
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
Tags
Map
Asked by
Craig
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Daniel
Top achievements
Rank 1
Hristo Germanov
Telerik team
Share this question
or