Custom Shape With Remote Data for Marker

8 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 19 Jul Link to this post

    I've been fidleing around and can't seem to find exemple of how to customize Marker Shape base on Data Type with Remote Data.

    I does work fine with Hard Coded Markers but it seems like we Only can Bind Location and Title with Remote Data.

    Is there Any way to do this or will I have to do this the dirty way, with a foreach loop with the model collection n razor view?
  2. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 19 Jul in reply to Jonathan Link to this post

    Sorry for the typos, you should let us edit our own post.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 19 Jul Link to this post

    @(Html.Kendo().Map()
        .Name("map")
        .Center((double)ViewBag.Latitude, (double)ViewBag.Longitude)
        .Zoom(18)
        .Events(e =>
        {
            e.Click("onClick");
        })
        .Layers(layers =>
        {
            layers.Add()
                  .Type(MapLayerType.Bing)
                  .ImagerySet(MapLayersImagerySet.AerialWithLabels)
                .Key("Your Own Key Here");
            layers.Add()
                .Type(MapLayerType.Marker)
                .DataSource(ds =>
                {
                    ds.Read(read => read.Action("Read", "Home"));
                })
                .MarkerTemplateField("myMarkerTemplate") //Exemple of a cool Feature here that would fix my problem
                ;
        })
    )
     
    // Example of the template here
    <script id="myMarkerTemplate" type="text/kendo-tmpl">
        <div class="#= data.shape #">
            Something cool Here that fit's #= data.Title # or any other model field
        </div>
    </script>

    This is a proposed thing I would expect following many of your control in the MVC Wrapper. Thanks for any input.
  5. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 19 Jul Link to this post

    For more clarification I'm trying to make a map the show users submitted Geocaching Data. The Marker Shape would have to be custom based on the user selection type.
  6. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 20 Jul Link to this post

    I have found a work around, I will be making a layer by Marker type. That way I can many shape css templates.
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 Jul Link to this post

    Hi Jonathan,

    I am not quite sure what exactly you are after. 

    Typically, enabling the marker rendering to be a template will break the initial design of the element. Note that the marker has its own rendering and changing it will break its entire functionality, like: panning, zooming, tooltip, and possible CSS customization. 

    Typically, if you need to change the look of the marker you can do that by following this article: http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/custom-markers. Shortly, assign custom value to the shape option and create CSS that decorates the custom marker. 

    Indeed, there is no available field option for the shape and this might be a feature that you can suggest in the UserVoice portal: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback.

    However, a possible way to bind data field to the shape option is by handling the markerCreated event and change the ev.marker.options. 

    Here you are an example that shows how the shape option is changed from the data item:

    View:
    <style>
        .k-map .k-marker-my-shape {
            background-size: 50px;
            width: 50px;
            height: 50px;
        }
    </style>
     
    @(Html.Kendo().Map()
        .Name("map")
        .Center(30.268107, -97.744821)
        .Zoom(3)
        .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>");
     
            layers.Add()
                .Type(MapLayerType.Marker)
                .LocationField("location")
                .TitleField("title")
                .ValueField("value")
                .DataSource(ds =>
                {
                    ds.Read(read => read.Action("Get_Markers", "Home"));
                });
        })
        .Events(ev => ev.MarkerCreated("markerCreated"))
    )
     
    <script>
        function markerCreated(ev) {
            ev.marker.options.shape = ev.marker.dataItem.shape;
        }
    </script>

    Controller:
    public JsonResult Get_Markers()
    {
        List<object> result = new List<object>
        {
            new {
                location = new double[] { 30.268107, -97.744821 },
                title = "title",
                value = "value",
                shape = "myShape"
            }
        };
     
        return Json(result, JsonRequestBehavior.AllowGet);
    }


    I hope that helps.

    Regards,
    Ianko
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 22 Jul in reply to Ianko Link to this post

    Thanks for your replay Ianko!

    Yeah the template was not necessary for my need I'm using the custom css as you suggested.

    I initial thinking was to load all my different marker from the same layer, but I tried and it worked to make one marker layer per marker type. Going this route has an additional benefit, because I can let user filter marker type by hiding the layer that corresponds to the marker type.

    So Having a Custom Shape Field could be good but to benefit from it I think server filtering should be introduced at the same time.
  9. Jonathan
    Jonathan avatar
    11 posts
    Member since:
    Feb 2016

    Posted 22 Jul in reply to Jonathan Link to this post

    Also thanks for your example, I was wondering how to access the data from the marker I will need this for other stuff than custom markers.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready