Adding custom Markers to a MapLayer

6 posts, 0 answers
  1. Casto
    Casto avatar
    7 posts
    Member since:
    Nov 2014

    Posted 30 May Link to this post

    Hello,

    I am adding many MapLayer and RadClientDataSource controls dinamically from server side like this: 

     

    RadClientDataSource newDataSource = new RadClientDataSource();
    newDataSource.DataSource.WebServiceDataSourceSettings.ServiceType = ClientDataSourceServiceType.GeoJSON;
    newDataSource.DataSource.WebServiceDataSourceSettings.Select.Url = "GeoJsonConverter.ashx?id=" + SessionID;
    newDataSource.DataSource.WebServiceDataSourceSettings.Select.DataType = ClientDataSourceDataType.JSON;
    newDataSource.ID = SessionID;
    Map.Controls.Add(newDataSource);

     

    MapLayer mapLayer = new MapLayer();
    mapLayer.Shape = "redMarker";
    mapLayer.Type = LayerType.Shape;
    mapLayer.Opacity = 1;
    mapLayer.ClientDataSourceID = newDataSource.ID;
    Map.LayersCollection.Add(mapLayer);

     

    Everything is working as i expect but one thing, the CSS class for the markers being created are "pinTarget" and not my custom "redMarker"

    In firebug i can see the css class for the markers added to every mapLayer is: "k-marker k-marker-pin-target"

    when i was expecting: "k-marker k-marker-red-marker"

    What am i doing wrong? 

     

    Thanks for the support!

     

     

     

     

     

  2. Casto
    Casto avatar
    7 posts
    Member since:
    Nov 2014

    Posted 01 Jun in reply to Casto Link to this post

    anybody here?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 02 Jun Link to this post

    Hello Casto,

    On my end, using the code provided, the marker layer is not rendered at all. 

    Note that the code is configuring the layer to a Shape layer and not a Marker layer. 

    After setting the proper layer type:
    mapLayer.Type = LayerType.Marker;

    The markers rendered with class attribute set to k-marker k-marker-red-marker. 

    Regards,
    Ianko
    Telerik
  5. Casto
    Casto avatar
    7 posts
    Member since:
    Nov 2014

    Posted 02 Jun in reply to Ianko Link to this post

    Hello Ianko, thank you for the response. 

    I have tried that before but when i am setting the layerType to Marker, the points are not rendered at all. 

    Also, the intellisense of the mapLayer.Type, says "supported types tile and shape".. 

    If it helps, my data is coming in GeoJson format with a RadClientDataSource added also from code behind before the mapLayer, as i wrote in the code of the first post.

    any suggestion??

    Thanks!

  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Jun Link to this post

    Hello Casto,

    Not sure where do you get the message that only tile and shape layer is supported. In order to load markers, you need to have a Marker layer. And bind it to JSON formatted data, not GeoJSON. 

    the Shape property is taken into account only with Marker layer and it is expected with Shape layer not to work. 

    I am attaching a project showing the situation with the marker binding.  

    Regards,
    Ianko
    Telerik
  7. Casto
    Casto avatar
    7 posts
    Member since:
    Nov 2014

    Posted 15 Jun in reply to Ianko Link to this post

    Ianko, thank you for the response. My problem was in fact that my data was coming in GeoJson format, and so i could not use the "Marker" type for the layer. 

    I have found a solution to change the style of the markers coming from GeoJson with a layer of type "Shape". Just in case it helps someone i'll put an example here: 

    First - Create the points that will be markers and add the style as a feature property, this example is using GeoJson.NET library

    Point point = new Point(new GeographicPosition(p.Latitude, pLongitude));
    Feature feature = new Feature(point);
    feature.Properties.Add("style", style.ToString());
    featureCollection.Features.Add(feature);

    Second- In the javascript event "OnMarkerCreated", assign this style to the shape: 

    function OnMarkerCreated(e) {
        var marker = e.marker;

        marker.options.shape = marker.dataItem.properties.style;

    }

    Then the CSS class will be rendered as with the "Marker" type layer. 

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017