Using RadMap in offline mode

[Jake Lyon]

I have been testing and learning the RadMap control as part of a BI solution i plan on implementing,

One question i did have however was, is it possible to use the map in off line mode

I have a series of data that already has Latitude and Longitude Values associated so i do not need to Geocoding Requests therefore would prefer to work off line, 

how do i go about this?

have just found out that KML is the way to do this just need to find some KML files

[Andrey]

Hello Jake Lyon,

The map control supports the following three built-in map providers: Bing Maps, Open Street Maps and Empty provider.
The Bing Map and Open Street Map providers read their tile images from internet. Of course a browser can use these images from its cache, but the Bing Maps provider requires the internet connection because it also uses its imagery WCF service to get URLs to the tile images.
The empty provider does not download tiles, so it could be used for offline mode. But it allows displaying shapes only (not real world map like Bing or Open Street).

Regards,
Andrey Murzov
the Telerik team

[Pete]

How would we use the emptyprovider to create a dummy map source?
It is important to us to have a map that we can demo when offline.

Thanks

[Andrey]

Hi Xamlmax,

Could you, please, clarify what does "dummy map source" means? The empty provider don't show any map tiles. It just provides spatial reference (projection) for other operations (i.e. show KML or ESRI shape files). If you need to show map tiles offline then you should create your own tile server which will run on the localhost.

It is quite simple to create tile server on localhost when you have images which can be identified by the zoom level and (x,y) position of the tile. All that you need to do is put your tiles in a separate directory in the C:\inetpub\wwwroot folder. So if you have the OpenStreet map tiles organized in a way similar to the structure on the OpenStreet servers (zoom\x_pos\y_pos.png) then you can create tile server on localhost in a couple of steps:

1. Create new folder like "os_images" in the "C:\inetpub\wwwroot" folder.
2. Copy whole structure of the OpenStreet images to this new folder.

Now you can create new map tile source and map provider which will access images from this folder:

/// <summary>
/// Tile source which read map tiles from the file system.
/// </summary>
public class LocalhostTileSource : TiledMapSource
{
    private string tileUriFormat;

    /// <summary>
    /// Initializes a new instance of the FileSystemTileSource class.
    /// </summary>
    /// <param name="tileUriFormat">Format string to access tiles on the localhost.</param>
    public LocalhostTileSource(string tileUriFormat)
        : base(1, 20, 256, 256)
    {
        this.tileUriFormat = tileUriFormat;
    }

    /// <summary>
    /// Initialize provider.
    /// </summary>
    public override void Initialize()
    {
        // Raise provider intialized event.
        this.RaiseIntializeCompleted();
    }

    /// <summary>
    /// Gets the image URI.
    /// </summary>
    /// <param name="tileLevel">Tile level.</param>
    /// <param name="tilePositionX">Tile X.</param>
    /// <param name="tilePositionY">Tile Y.</param>
    /// <returns>URI of image.</returns>
    protected override Uri GetTile(int tileLevel, int tilePositionX, int tilePositionY)
    {
        int zoomLevel = ConvertTileToZoomLevel(tileLevel);

        string url = this.tileUriFormat.Replace("{zoom}", zoomLevel.ToString(CultureInfo.InvariantCulture));
        url = url.Replace("{x}", tilePositionX.ToString(CultureInfo.InvariantCulture));
        url = url.Replace("{y}", tilePositionY.ToString(CultureInfo.InvariantCulture));
        return new Uri(url);
    }
}

/// <summary>
/// Map provider which read map tiles from the file system.
/// </summary>
public class LocalhostProvider : TiledProvider
{
    /// <summary>
    /// Initializes a new instance of the LocalhostProvider class.
    /// </summary>
    /// <param name="tileUriFormat">Format string to access tiles on the localhost.</param>
    public LocalhostProvider(string tileUriFormat)
        : base()
    {
        LocalhostTileSource source = new LocalhostTileSource(tileUriFormat);
        this.MapSources.Add(source.UniqueId, source);
    }

    /// <summary>
    /// Returns the SpatialReference for the map provider.
    /// </summary>
    public override ISpatialReference SpatialReference
    {
        get
        {
            return new MercatorProjection();
        }
    }
}

Now you can use new map provider in your application:

<UserControl x:Class="LocalhostMapProvider.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
                        Center="48.95,2.3"
                        ZoomLevel="13">
        </telerik:RadMap>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace LocalhostMapProvider
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            this.radMap.Provider = new LocalhostProvider("http://localhost/os_images/{zoom}/{x}/{y}.png");
        }
    }
}

The ConvertTileToZoomLevel method is inherited from TiledMapSource class so you don't need to bother about its implementation.

Kind regards,

Andrey Murzov

the Telerik team

[Anton]

Hi Andrey,

Let me first describe our need:
We want to use OpenStreetMaps, we've downloaded the OSM files and loaded them into the Postgresql database, we've setup mapnik. 
The requirement is we want to be able to browse the maps from the local database that hosts the data.  This database contains all the Geomapping info everything we need. 

What this means is we actually want to be able to host the maps exactly like openstreetmaps and then use your components to view, zoom, pan, put layers on, pins with info, highlight provinces, draw lines,draw radius's, view coordinates, etc. 

From your post below, I understand the hosting of the images on the webserver.  But how would this link up with the geomapping info, and how will it be able to zoom/pan etc?

Kind Regards
Anton

[Andrey]

Hello Anton,

The code I've provided to you is designed to use OSM map tiles offline. All other things (like panning, zooming, placing geographically positioned items and so on) are handled by RadMap control as usual. You can find many samples in our demos.

Regards,

Andrey Murzov

the Telerik team