This is a migrated thread and some comments may be shown as answers.

Change size MarkersMap

7 Answers 189 Views

Map

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 08 Jan 2015, 11:13 AM

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

answered on 08 Jan 2015, 03:54 PM

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;

}

answered on 09 Jan 2015, 09:51 AM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Change size MarkersMap

7 Answers, 1 is accepted