Scale Map to Markers
You can see in this article how you can programmatically scale RadMap based on the Markers collection.
The approach showcased here is useful in data-binding scenarios where the map should be zoomed and centered based on the bound markers.
There are two different approaches: - For Server-side Data Binding - For Client-side Data Binding
Approach for Server-side Data Binding
Although Example 1 shows a basic usage of the MarkersCollection tag, the approach to achieve the scale-to-markers functionality with server-side data binding is the same:
- Use the client-side OnLoad event in order to start the scaling;
- Get the markers from the
markers.itemscollection of the Kendo widget. - Create an kendo.dataviz.map.Extent based on the markers' location.
- Pass the extent to the map (using the extent() method) so that RadMap get centered to the extent's bounds.
Example 1: Scale RadMap to Markers collection bound from the server.
<script type="text/javascript">
function OnLoad(sender, args) {
var $ = $telerik.$;
var kendoMap = sender.get_kendoWidget();
var Extent = kendo.dataviz.map.Extent;
// Get the Markers collection
var markers = kendoMap.markers.items;
var markerLocations = [];
// Extract the markers' locations.
for (var i = 0; i < markers.length; i++) {
markerLocations.push(markers[i].location());
}
// Create an extent based on the first marker
var myExtent = Extent.create(markerLocations[0], markerLocations[0]);
// Extend the extent with all markers
myExtent.includeAll(markerLocations);
// Center RadMap based on the created extent.
kendoMap.extent(myExtent);
// You may need to zoom out to show all markers properly.
// This can be furtehr adjusted based on your own preferences.
kendoMap.zoom(kendoMap.zoom() - 1)
}
</script>
<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1">
<ClientEvents OnLoad="OnLoad" />
<LayersCollection>
<telerik:MapLayer Type="Tile" Subdomains="a,b,c"
UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
Attribution="© <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
</telerik:MapLayer>
</LayersCollection>
<MarkersCollection>
<telerik:MapMarker Shape="PinTarget" Title="Palo Alto">
<TooltipSettings Content="US - Palo Alto, CA"></TooltipSettings>
<LocationSettings Latitude="37.444610" Longitude="-122.163283" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Boston">
<TooltipSettings Content="US - Boston, MA"></TooltipSettings>
<LocationSettings Latitude="42.375067" Longitude="-71.272233" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Austin">
<TooltipSettings Content="US - Austin, TX"></TooltipSettings>
<LocationSettings Latitude="30.268162" Longitude="-97.744873" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Sydney">
<TooltipSettings Content="Australia - Sydney"></TooltipSettings>
<LocationSettings Latitude="-33.838707" Longitude="151.207959" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Gurgaon">
<TooltipSettings Content="India - Gurgaon"></TooltipSettings>
<LocationSettings Latitude="28.410139" Longitude="77.042439" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="London">
<TooltipSettings Content="UK - London"></TooltipSettings>
<LocationSettings Latitude="51.515986" Longitude="-0.085798" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Copenhagen">
<TooltipSettings Content="Denmark - Copenhagen"></TooltipSettings>
<LocationSettings Latitude="55.670312" Longitude="12.538266" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Munich">
<TooltipSettings Content="Germany - Munich"></TooltipSettings>
<LocationSettings Latitude="48.117227" Longitude="11.601990" />
</telerik:MapMarker>
<telerik:MapMarker Shape="PinTarget" Title="Sofia">
<TooltipSettings Content="Bulgaria - Sofia"></TooltipSettings>
<LocationSettings Latitude="42.650613" Longitude="23.379025" />
</telerik:MapMarker>
</MarkersCollection>
</telerik:RadMap>
Approach for Client-side Data Binding
Example 2 follows a client-side data binding technique by integrating the RadClientDataSource control. (You can find the used .json file in the Markers demo.) In order to implement the scale-to-markers functionality:
- Use the client-side OnLoad event in order to start the scaling.
- Use the markers' layer to get the bound markers by using the
layers[index].itemscollection. (Note that you should use a polling technique because data is requested via AJAX). - Create a kendo.dataviz.map.Extent based on the markers' location.
- Pass the extent to the map (using the extent() method) so that RadMap get centered to the extent's bounds.
<script type="text/javascript">
function OnLoad() {
var kendoMap = $find("<%= RadMap1.ClientID %>").get_kendoWidget();
// Get the Markers collection by polling
var interval = window.setInterval(function () {
var markers = kendoMap.layers[1].items;
if (markers.length > 0) {
window.clearInterval(interval);
startScaling(kendoMap, markers);
}
}, 10);
}
function startScaling(map, markers) {
var $ = $telerik.$;
var Extent = kendo.dataviz.map.Extent;
var markerLocations = [];
// Extract the markers' locations.
for (var i = 0; i < markers.length; i++) {
markerLocations.push(markers[i].location());
}
// Create an extent based on the first marker
var myExtent = Extent.create(markerLocations[0], markerLocations[0]);
// Extend the extent with all markers
myExtent.includeAll(markerLocations);
// Center RadMap based on the created extent.
map.extent(myExtent);
// You may need to zoom out to show all markers properly.
// This can be further adjusted based on your own preferences.
map.zoom(map.zoom() - 1);
}
</script>
<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
<DataSource>
<WebServiceDataSourceSettings>
<Select DataType="JSON" Url="/JSON/MarkersData.json" />
</WebServiceDataSourceSettings>
</DataSource>
</telerik:RadClientDataSource>
<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1">
<ClientEvents OnLoad="OnLoad" />
<LayersCollection>
<telerik:MapLayer Type="Tile" Subdomains="a,b,c"
UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
Attribution="© <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
</telerik:MapLayer>
<telerik:MapLayer Type="Marker" Shape="PinTarget" ClientDataSourceID="RadClientDataSource1" LocationField="location">
</telerik:MapLayer>
</LayersCollection>
</telerik:RadMap>