Custom Shape With Remote Data for Marker

[Jonathan]

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?

[Jonathan]

Sorry for the typos, you should let us edit our own post.

[Jonathan]

@(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.

[Jonathan]

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.

[Jonathan]

I have found a work around, I will be making a layer by Marker type. That way I can many shape css templates.

[Ianko]

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-image: url('http://demos.telerik.com/kendo-ui/content/shared/images/we-are-here.png');
        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

[Jonathan]

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.

[Jonathan]

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.