Change size MarkersMap

8 posts, 0 answers
  1. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 06 Jan 2015 Link to this post

    Hey,

    I have a small problem with my Markers in Telerik , look: http://puu.sh/e9fCH/1b594764eb.jpg

    How can i change the size of my Makers Because it's really big to ...

    Cya !
  2. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 07 Jan 2015 in reply to Naografix Link to this post

    Up i need already !
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 08 Jan 2015 Link to this post

    Hi,

    Could you please define if the amount of the markers should be modified or the size?

    If the amount, you should further implement the binding of the markers, so to show less marker elements. 

    If the size is the issue, you can control the size of the markers via CSS's font-size property, but only in modern browsers as these are glyph-icons.

    Note that when modifying the size of the glyph-icon, the position and the tooltip appearance will break and further modifications to the HTML elements should be done to properly handle the cases. The following example shows how to modify the font-size of one pin-shaped marker and configure it to appear correctly on the map:
    <style type="text/css">
        /* Change font-size of the glyph icon and fix the marker appearance */
        .RadMap .k-marker-pin:before {
            font-size:12px;
            color:green;
            margin-left:-19px;
            margin-top: -16px;
        }
     
        /* Correct the width of the marker element to fix tooltip position */
        .RadMap .k-marker-pin {
            margin-top: -14px;
            height:14px;
        }
    </style>
     
    <telerik:RadMap runat="server" ID="RadMap1">
        <MarkersCollection>
            <telerik:MapMarker Shape="pin" Title="Marker">
                <LocationSettings Latitude="0" Longitude="0" />
            </telerik:MapMarker>
        </MarkersCollection>
    </telerik:RadMap>


    Regards,
    Ianko
    Telerik
  5. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 08 Jan 2015 in reply to Ianko Link to this post

    Ho thx dude, i will test it !

    Actually I have 608 pin, but I think never climb above 1000 !
  6. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 08 Jan 2015 Link to this post

    Ok work !

    But i dont udnerstand why i cant create my style.css

    If i use YOUR solution (css in the html page), it work
    But if i link my css script with :

    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style.css" type="text/css" />
        <title></title>
    </head>

    Its broken...

    style.css ->

    /* Change font-size of the glyph icon and fix the marker appearance */
    .RadMap .k-marker-pin:before {
        font-size: 12px;
        color: green;
        margin-left: -19px;
        margin-top: -16px;
    }
     
    /* Correct the width of the marker element to fix tooltip position */
    .RadMap .k-marker-pin {
        margin-top: -14px;
        height: 14px;
    }
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 09 Jan 2015 Link to this post

    Hi,

    Firstly, make sure the LINK element has a rel attribute set to stylesheet value.

    Further, using an external CSS files decreases the specificity of the selectors. Raising it, successfully overrides the RadMap's built-in rules (note the highlighted text):
    /* Change font-size of the glyph icon and fix the marker appearance */
    .RadMap span.k-marker-pin:before {
        font-size: 12px;
        color: green;
        margin-left: -19px;
        margin-top: -16px;
    }
      
    /* Correct the width of the marker element to fix tooltip position */
    .RadMap span.k-marker-pin {
        margin-top: -14px;
        height: 14px;
    }
     

    Regards,
    Ianko
    Telerik
  8. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 09 Jan 2015 Link to this post

    Hey, your solution not working :/

    CSS :
    http://puu.sh/ehbkf/c7df752a9b.png

    ASPX :
    http://puu.sh/ehbpd/c4f29ed605.png

    Result :
    http://puu.sh/ehbrt/7827e5ca91.jpg
  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Jan 2015 Link to this post

    Hello,

    You can find attached a sample that demonstrates the Custom CSS in a CSS file. You can examine it and compare the implementation.

    Regards,
    Ianko
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017