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

Change the markers text size when zooming the map

5 Answers 338 Views

Map

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

Auvo asked on 28 Apr 2020, 11:25 AM

I'm using marker to show text with polygon. This seems to work ok.
Is there possibility to resize the text when zooming the map? When zooming out, text shows smaller and when zoomin in, text size is bigger

Here's the code which shows the example text.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style type="text/css">

.RadMap .k-marker::before, .RadMap .k-marker-Pin-target::before, .RadMap .k-marker-pin-target::before {

content: none !important;

}

.RadMap .k-marker {

text-shadow: none !important;

}

.k-map.RadMap .k-marker {

width: auto !important;

height: auto !important;

text-shadow: none;

padding: 0;

background-image: none;

cursor: default;

margin: -11px 0 0 -2px !important;

color: black !important;

}

</style>

</head>

<body>

<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 Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadCodeBlock runat="server">

<script type="text/javascript">

var shapeData = [{

"type": "Feature",

"properties": {

"object": "seat",

"num": 2,

"marker": {

"title": "LONG MESSAGE TEXT",

"location": [4, 3]

}

},

"geometry": {

"type": "Polygon",

"coordinates": [

[

29.102396965026852,

62.7612086158975

],

[

29.109349250793457,

62.7612086158975

],

[

29.109349250793457,

62.762092508522215

],

[

29.102396965026852,

62.762092508522215

],

[

29.102396965026852,

62.7612086158975

]

}

];

function shapeCreated(e) {

try {

if (e.shape.dataItem.properties["marker"]) {

var map = e.sender;

var marker = e.shape.dataItem.properties.marker;

// make sure a custom shape title is added, so that the custom code could affect only these markers

// note that this affects the selector which customizes the markers (see the RenderTextNode function below)

marker["shape"] = "text-label";

// add the custom marker to the markers collection

var markerElement = map.markers.add(marker);

// // render the shape label

var markerElm = markerElement.element;

// // get the dynamically added title attribute and add it as text to the span element

var markerTitle = markerElm.attr("title");

markerElm[0].style.fontSize = "22px;"

markerElm.text(markerTitle);

var tooltip = markerElm.data("kendoTooltip");

tooltip.destroy();

}

catch (err) {

alert(err);

}

function OnInitialize(sender, args) {

var originalOptions = args.get_options();

originalOptions.layers[1].dataSource = { data: shapeData };

args.set_options(originalOptions);

}

</script>

</telerik:RadCodeBlock>

<div style="width: 100%; height: 100%;">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="500">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<asp:HiddenField runat="server" ID="HiddenGeoJSON" />

<telerik:RadMap runat="server" ID="RadMap2" Zoom="8" LayersDataSourceID="">

<ClientEvents OnInitialize="OnInitialize" OnShapeCreated="shapeCreated" />

<CenterSettings Latitude="5" Longitude="5" />

<LayerDefaultsSettings>

<ShapeSettings>

<StyleSettings>

</StyleSettings>

</ShapeSettings>

</LayerDefaultsSettings>

<LayersCollection>

<telerik:MapLayer Type="Tile" UrlTemplate="http://a.tile.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png">

</telerik:MapLayer>

<telerik:MapLayer Type="Shape">

</telerik:MapLayer>

</LayersCollection>

</telerik:RadMap>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

Regards,
Auvo

5 Answers, 1 is accepted

answered on 04 May 2020, 11:59 AM

zoom14_text_ok.png

zoomout_text_too_big.png

Here's some screenshots.

Issue is that when zooming out, the text size is still original and looks too big in some cases. Our needs is that text size scaling smaller when zooming out

Regards,

Auvo

answered on 09 May 2020, 10:43 PM

RadMapZoomText.zip

Hi Auvo,

I've created a sample RadMap web site using your own definition to demonstrate how you can achieve this requirement. You can run the Web site by following these steps:

1. Open Visual Studio
2. File menu
3. Open option
4. Select Web site and target the web site folder.
5. Include a Bin folder with the Telerik dll assemblies.

Regards,
Eyup
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.