Map Markers Won't Show

[ww1711]

Pretty simple issue here: when my RadMap is rendered, the markers don't appear.

If I hover over the point where they should be, I see the pop-up, but I cannot get the physical pinTarget or pin markers to show on the map. I've tried implementing various ways according to the demos and nothing is working. I'm looking to implement via Server-Side Data Binding; I've literally copied the code exactly from the demo and pasted into my solution and it will not work. I am currently running Telerik version 2016.1.113.40

Any help would be greatly appreciated.

 

Thanks!

[ww1711]

An Update:

It's related to the fact that I've for a custom skin .dll in my project. When I remove the reference to it in the web.config file, all is well. How can I make these work while still using my custom skin? It appears that I've got the proper .css and .png files where they should be...

[Ianko]

Hello,

RadMap Markers are rendered by utilizing glyph icon. So, you should make sure that the custom skin created includes the Telerik font. 

Basically, you should make sure that you have all relevant resources in the skin assembly that is related to RadMap. 

Regards,
Ianko
Telerik

[ww1711]

The markers utilize glyph icon, so I need to ensure I have a font installed...?

I have map-marker.png in the location of Telerik.Web.UI.CustomSkins.Common, is that not correct?

What are "all relevant resources ... related to RadMap?" Is there documentation somewhere that I can refer to so I may ensure everything is ok on my side?

 

Thanks,

[Ianko]

Hello,

You can examine the Map.css or MapLite.css. At the beggining of the file you will see that a Telerik font is requested:

@font-face {
  font-family: 'TelerikWebUI';
  src: url('<%=WebResource("Telerik.Web.UI.Skins.Common.TelerikWebUI.woff")%>') format("woff"), url('<%=WebResource("Telerik.Web.UI.Skins.Common.TelerikWebUI.ttf")%>') format("truetype");
  /* Safari, Android, iOS */
}

These fonts are required for the Map markers to render, so you need to make sure that the woff files and ttf files are included in the assembly and that they are requested as per to the new assembly's namespace.

For these rules you can see how the glyph icons are rendered:

.RadMap .k-marker:before,
.RadMap .k-marker-Pin-target:before,
.RadMap .k-marker-pin-target:before {
  content: "\E124";
}

.RadMap span.k-marker-Pin:before,
.RadMap span.k-marker-pin:before {
  content: "\E125";
}

The map-marker.png is used only for cross-browser support, where glyph icons are not supported (e.g., IE8). 

Regards,
Ianko
Telerik

[ww1711]

I can confirm that the references to the .woff and .ttf files are where they're supposed to be and the that the files are in the locations referenced. I have two Map.css files in my assembly; Map.css and Map.CustomName.css.

Map.css is located at: Telerik.Web.UI.CustomSkins.Map.css whereas;

Map.CustomName.css is located at: Telerik.Web.UI.CustomSkins.CustomName.Map.CustomName.css

The two .css files are entirely different and the reference to the .woff and .ttf files are only made in the Map.css file while my solution is using the CustomName skin across the application:

<add key="Telerik.Web.SkinsAssembly" value="Telerik.Web.UI.CustomSkins" />
<add key="Telerik.Skin" value="CustomName" />

Is this expected behavior?

 

Thanks in advance!

[Ianko]

Hi,

Map.css is the base file where all common styles are applied. Whereas Map.CustomName.css is the style relevant for the skin-specific decorations.

Both files should be added to the page automatically when using a custom skin. 

Can you prepare an example with the custom skin only for the map and a page utilizing that custom skin so that I can take a better look at the problem? If you are concerned about sharing this in a public thread consider opening an official support ticket.

Regards,
Ianko
Telerik