Hi
I'm trying to show the map so it fills the entire screen viewing the whole world. The Map element fills the entire viewport and i'm trying to use the Extent function with various positions to make the map properly zoom in.
Example:
var markerLocations = [[70, -179], [-60, -179], [-60, 179], [70, 179]]; //Also tried just the two corner locations var extent;for(var i = 0; i < markerLocations.length; i++) { var loc = new kendo.dataviz.map.Location(markerLocations[i][0], markerLocations[i][1]); if (!extent) { extent = new kendo.dataviz.map.Extent(loc, loc); } else { extent.include(loc); } }kendoMap.extent(extent);
This seems to work fine on some resolutions (1920x1080) but not on others (2560x1440)
The map element just doesn't zoom properly: it is zoomed out too far causing the map to contain an "empty" section to its right. The way i'm using the map is without a tile layer and using only shape layers. Since shape layers do not wrap around, it makes the whole thing look even worse: i'm using one shape layer to display the Day-Night boundary and if the map zooms incorrectly, that layer is being cut vertically at longitude 180 which gives a distinct "edge" to where the map ends.
I've tried using different locations for the extent function, but it seems that at some given "area" the extent function just stops doing zooming on the region given and just zooms out too far out. Trying to do the same with just the Zoom setting doesn't work since it only accepts integers.
Is there a way to get around this issue?
Is there also a way to get around the Shape Layer wrap around issue?(other than adding a second map next to the first to fake that)
6 Answers, 1 is accepted
Rank 1
Just for to add some interesting behavior: Even on 1920x1080 (browser displaying full screen), doing extent on [70,-179],[-73,179] kind of works (almost fills the entire viewport) but changing it to [70,-179],[-74,179] (just changed the latitude on the eastern corner by 1) causes the zoom to completely zoom out and display the size incorrectly. (neither of these work properly if the viewport is smaller than 1920x1080, like by opening the browsers developer panel)
Hi Ofer,
I am afraid I would need some more details on the current configuration. It would be very helpful if you could create a runnable sample that produces the error and share it with us. We can then debug it locally and identify the issue.
Kind regards,
Attila Antal
Progress Telerik
Rank 1
Hi Attila
So seems like attaching ZIP files is not an option, so below is just the code of an ASPX page needed to recreate the issue. You should be able to drop it into a page in any ASP.NET project and attach whichever GEOJSON file you have on hand (like the one on https://demos.telerik.com/kendo-ui/map/geojson)
I've placed two markers showing the region the extent is supposed to show, when in fact it zooms out way more than it should. Ideally both markers should exactly align with the edge of the displayed area (either on the horizontal axis or vertical axis constrained by the ratio of the display area of course. It should be centered on the axis where the markers don't align with the edges)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapTest.Default" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><style type="text/css"> html, body, form { margin: 0; padding: 0; height: 100%; } div.RadMap { font-size: 24px; height: auto; } .k-map{ height:auto; } .container { width: 100%; height: 100%; background-color: #003046; margin: 0px; /*overflow-y: hidden;*/ position: relative; overflow:auto; } .map { width: 100%; height: 100%; margin: 0px; position: absolute; top: 0; left: 0; z-index: 0; }</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script language="javascript" type="text/javascript"> function resizeMap() { var kendoMap = $find("<%=RadMap1.ClientID %>").kendoWidget; kendoMap.resize(); } var TO = false; $(window).resize(function () { if (TO !== false) { clearTimeout(TO); } TO = setTimeout(resizeMap, 200); }); function OnLoad() { if (RadMap1 !== null) { var kendoMap = $find("<%= RadMap1.ClientID %>").get_kendoWidget(); var markerLocations = [[70, -179], [-65, 179]]; var extent; for (var i = 0; i < markerLocations.length; i++) { kendoMap.markers.add(GetMarker(markerLocations[i][0], markerLocations[i][1])); var loc = new kendo.dataviz.map.Location(markerLocations[i][0], markerLocations[i][1]); if (!extent) { extent = new kendo.dataviz.map.Extent(loc, loc); } else { extent.include(loc); } } kendoMap.extent(extent); } } function GetMarker(lat, lon) { return marker = { location: [lat, lon], timestampField: new Date() }; } </script><body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> <div class="container"> <div class="map" runat="server" ID="MapContainer"> <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Wraparound="true" Width="100%" Height="100%" Pannable="true" Zoomable="true" zoom="5"> <CenterSettings Latitude="15" Longitude="30" /> <ControlsSettings Navigator="false" Zoom="false"> </ControlsSettings> <LayersCollection> <telerik:MapLayer Type="Shape" ClientDataSourceID="RadClientDataSource1" /> </LayersCollection> <ClientEvents OnLoad="OnLoad"/> </telerik:RadMap> <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1"> <DataSource> <WebServiceDataSourceSettings ServiceType="GeoJSON"> <Select Url="countries.json" DataType="JSON" /> </WebServiceDataSourceSettings> </DataSource> </telerik:RadClientDataSource> </div> </div> </form></body></html>
Hi Ofer,
Thank you for the sample code. It produces the exact behavior you have described. Please allow me some more time, I will take a deeper look into this and send you a follow up once I am ready.
Your patience is highly appreciated!
Kind regards,
Attila Antal
Progress Telerik
Rank 1
Hi Attila
Just wondering if the issue is still being looked at...
Hello Ofer,
We are sorry for the delayed reply.
We have been testing out the provided code and managed to replicate what we assume you are talking about, e.g. in bigger resolutions you see the Map as demonstrated below and the markers are on positions A and B, while you want the markers to be on position A1 and B1. In smaller resolutions, you see the markers in places of A1 and B1.
If that is the "issue" you describe, I am afraid that this is the default behavior of the Map control and I will try to explain why below.
The Extent function tries to adjust the Map so that all passed locations are within the visible range. If the points are near each other, the map will be zoomed, if they are far apart, the Map will be zoomed out. Basically, the only way the Map can show a number of points simultaneously is by zooming in or out and recentering the Map.
The appearance you see, free space outside the corner markers, are due to the fact that the Zoom levels of the map are predefined - an integer number between 0 and 19:
Also, you can see that the zoom highly relies on the minSize: The map size is derived from the zoom level and minScale options: size = (2 ^ zoom) * minSize
With that said, for resolutions that cannot be divided by the map size it is expected to see the map a bit zoomed out, because if the Map is zoomed in with a single level, then one of the locations passed to the extent method would not be visible.
I hope that brings more clarity on the behavior and appearance.
Let us know if we are missing something in your scenario.
Regards,
Peter Milchev
Progress Telerik