Customized markers for map

6 posts, 0 answers
  1. Craig
    Craig avatar
    16 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2014 Link to this post

    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
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 18 Jun 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    4 posts
    Member since:
    Jun 2011

    Posted 14 Sep 2014 in reply to T. Tsonev Link to this post

    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>
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 17 Sep 2014 Link to this post

    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.

     
  6. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 17 Sep 2014 Link to this post

    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.

     
  7. Daniel
    Daniel avatar
    4 posts
    Member since:
    Jun 2011

    Posted 28 Sep 2014 in reply to Hristo Germanov Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready