Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Change the markers text size when zooming the map

5 Answers 189 Views
Map
This is a migrated thread and some comments may be shown as answers.
Auvo
Top achievements
Rank 1
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">
 
<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

Sort by
0
Eyup
Telerik team
answered on 01 May 2020, 11:20 AM

Hello Auvo,

 

Are you looking for something like this?

https://docs.telerik.com/devtools/aspnet-ajax/controls/map/how-to/scale-to-markers

Could you share couple of screenshot demonstrating your map and what you want to achieve? This will enable us to provide the required solution.

 

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.
0
Auvo
Top achievements
Rank 1
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

0
Eyup
Telerik team
answered on 07 May 2020, 11:13 AM

Hi Auvo,

 

I will check whether this requirement will be possible and get back to you.

Thank you for your patience in advancce.

 

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.
0
Eyup
Telerik team
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.
0
Auvo
Top achievements
Rank 1
answered on 11 May 2020, 10:11 AM

Yes,this is what I'm looking for

 

Thank you!

Auvo

Tags
Map
Asked by
Auvo
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Auvo
Top achievements
Rank 1
Share this question
or