Hey
I want to use your sample Marker to create mine.
I use your javascript file :
And your Default.aspx
Now i want to create my PinMarker in my codeBiehind, like this :
And now, how can I put the template of your ToolTipSetting etc on my PinTarget ?
But look, this is my result :
http://puu.sh/ehc4D/991a1123c6.png
Can you help me ?
I want to use your sample Marker to create mine.
I use your javascript file :
(
function
(global, undefined) {
function
OnMarkerCreated(e) {
var
marker = e.marker,
tooltip = marker.options.tooltip,
countryFlag = marker.dataItem.country.toLowerCase(),
newTemplate = tooltip.template;
countryFlag = countryFlag.replace(/\s/g,
""
);
newTemplate = newTemplate.replace(/class=
'flag'
/i,
"class='flag flag-"
+ countryFlag +
"'"
);
tooltip.template = newTemplate;
// The following custom functionality is built due to design decision that tooltips with autoHide="false"
// should hide previously opened tooltips.
setTimeout(
function
() {
addShowHandler(marker);
}, 0);
}
function
addShowHandler(marker) {
var
tooltip = marker.element.getKendoTooltip();
tooltip.bind(
"show"
, hideAllNonValidPopups);
}
function
hideAllNonValidPopups(e) {
var
shownPopup = e.sender.popup.element[0],
$ = $telerik.$,
tooltipCollection = $(
".k-tooltip"
);
tooltipCollection.each(
function
() {
var
that =
this
;
if
(that != shownPopup) {
$(that).getKendoPopup().close();
}
})
}
global.OnMarkerCreated = OnMarkerCreated;
})(window);
And your Default.aspx
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
>
</
asp:ScriptReference
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
>
</
asp:ScriptReference
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
>
</
asp:ScriptReference
>
</
Scripts
>
</
telerik:RadScriptManager
>
<
telerik:RadClientDataSource
runat
=
"server"
ID
=
"RadClientDataSource1"
>
<
DataSource
>
<
WebServiceDataSourceSettings
>
<
Select
DataType
=
"JSON"
Url
=
"JSON/MarkersData.json"
/>
</
WebServiceDataSourceSettings
>
</
DataSource
>
</
telerik:RadClientDataSource
>
<
div
class
=
"demo-container size-auto"
>
<
h2
class
=
"mapTitle"
>TELERIK OFFICES</
h2
>
<
telerik:RadMap
runat
=
"server"
ID
=
"RadMap1"
Zoom
=
"2"
CssClass
=
"MyMap"
LayersDataSourceID
=
""
>
<
CenterSettings
Latitude
=
"23"
Longitude
=
"10"
/>
<
LayersCollection
>
<
telerik:MapLayer
Type
=
"Tile"
Subdomains
=
"a,b,c"
UrlTemplate
=
"http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
Attribution="© <a
href
=
'http://osm.org/copyright'
title
=
'OpenStreetMap contributors'
target
=
'_blank'
>OpenStreetMap contributors</
a
>.">
</
telerik:MapLayer
>
<
telerik:MapLayer
Type
=
"Marker"
Shape
=
"PinTarget"
ClientDataSourceID
=
"RadClientDataSource1"
LocationField
=
"location"
>
<
TooltipSettings
AutoHide
=
"false"
Width
=
"300"
Template="<div
class
=
'leftCol'
><
div
class
=
'flag'
></
div
></
div
><
div
class
=
'rightCol'
><
div
class
=
'country'
>#= marker.dataItem.country #</
div
><
div
class
=
'city'
>#= marker.dataItem.city #</
div
><
div
class
=
'address'
>#= marker.dataItem.address #</
div
><
div
class
=
'address'
>#= marker.dataItem.address2 #</
div
><
div
class
=
'phone'
>p #= marker.dataItem.phone #</
div
><
div
class
=
'email'
>e <
a
href
=
'mailto:#= marker.dataItem.email #'
>#= marker.dataItem.email #</
a
></
div
><
div
class
=
'location'
>Location:#= location.lat #, #= location.lng #</
div
></
div
>">
<
AnimationSettings
>
<
OpenSettings
Duration
=
"300"
Effects
=
"fade:in"
/>
<
CloseSettings
Duration
=
"300"
Effects
=
"fade:out"
/>
</
AnimationSettings
>
</
TooltipSettings
>
</
telerik:MapLayer
>
</
LayersCollection
>
<
ClientEvents
OnMarkerCreated
=
"OnMarkerCreated"
/>
</
telerik:RadMap
>
<
div
id
=
"contactsContainer"
>
</
div
>
</
div
>
</
form
>
Now i want to create my PinMarker in my codeBiehind, like this :
protected
void
Page_Load(
object
sender, EventArgs e)
{
MapMarker myMarker =
new
MapMarker();
myMarker.Shape = MarkerShape.PinTarget.ToString();
myMarker.Title =
"Test"
;
myMarker.LocationSettings.Latitude = 0;
myMarker.LocationSettings.Longitude = 0;
RadMap1.MarkersCollection.Add(myMarker);
}
And now, how can I put the template of your ToolTipSetting etc on my PinTarget ?
But look, this is my result :
http://puu.sh/ehc4D/991a1123c6.png
Can you help me ?