OpenStreetMap Tile Servers Online

This sample demonstrates the use of the TileServer list for an OpenStreetMapLayer. The TileServer property can be used to: 1) Reference the url to any tiled map service that adheres to the OpenStreetMap standard. 2) Provide a list of servers from which to retrieve tiles for the same tiled map service. This example shows how to use the TileServer list in XAML and code behind, and display different OpenStreetMap tiled services, such as MapQuest, Cloudmade, or Cyclemap. Note, the OpenStreetMap.Style property references some standard OpenStreetMap tiled services. It will be ignored if the TileServer list is populated.

XAML

<UserControl x:Class="ArcGISWPFSDK.OSMTileServers"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"    
    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <Grid>
        <esri:Map x:Name="MyMap" UseAcceleratedDisplay="True"  WrapAround="True">
            <!--MapQuest Tile Servers-->
            <esri:OpenStreetMapLayer ID="OSMLayer">
                <esri:OpenStreetMapLayer.TileServers>
                    <sys:String>http://otile1.mqcdn.com/tiles/1.0.0/osm</sys:String>
                    <sys:String>http://otile2.mqcdn.com/tiles/1.0.0/osm</sys:String>
                    <sys:String>http://otile3.mqcdn.com/tiles/1.0.0/osm</sys:String>
                </esri:OpenStreetMapLayer.TileServers>
            </esri:OpenStreetMapLayer>
        </esri:Map>

        <Grid HorizontalAlignment="Right" Background="#CC919191" VerticalAlignment="Top" Margin="10" >
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Background="Transparent" Margin="5">
                <RadioButton x:Name="MapQuestRadioButton" IsChecked="true"
                         Tag="MapQuest"  Margin="5,0,0,0" 
                         GroupName="Layers" Content="MapQuest" Click="RadioButton_Click"/>
                <RadioButton x:Name="CloudmadeRadioButton" 
                         Tag="Cloudmade"  Margin="5,0,0,0" 
                         GroupName="Layers" Content="Cloudmade" Click="RadioButton_Click"/>
                <RadioButton x:Name="CycleMapRadioButton" 
                         Tag="CycleMap" Margin="5,0,0,0"  
                         GroupName="Layers" Content="CycleMap" Click="RadioButton_Click"/>
            </StackPanel>
        </Grid>
        <esri:Attribution Layers="{Binding ElementName=MyMap, Path=Layers}" Margin="10" VerticalAlignment="Bottom" />
    </Grid>
</UserControl>

C#

using System.Windows;
using System.Windows.Controls;
using ESRI.ArcGIS.Client.Toolkit.DataSources;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ArcGISWPFSDK
{

    public partial class OSMTileServers : UserControl
    {
        OpenStreetMapLayer osmLayer;

        public OSMTileServers()
        {
            InitializeComponent();

            osmLayer = MyMap.Layers["OSMLayer"] as OpenStreetMapLayer;
        }
        private void RadioButton_Click(object sender, RoutedEventArgs e)
        {
            string layerTypeTag = (string)((RadioButton)sender).Tag;
            OpenStreetMapLayer.TileServerList newTileServers;

            switch (layerTypeTag)
            {
                case "MapQuest":
                    //Collection is replaced
                    newTileServers = new OpenStreetMapLayer.TileServerList();
                    newTileServers.Add("http://otile1.mqcdn.com/tiles/1.0.0/osm");
                    newTileServers.Add("http://otile2.mqcdn.com/tiles/1.0.0/osm");
                    newTileServers.Add("http://otile3.mqcdn.com/tiles/1.0.0/osm");
                    osmLayer.TileServers = newTileServers;
                    break;
                case "Cloudmade":
                    //Collection is replaced
                    newTileServers = new OpenStreetMapLayer.TileServerList();
                    newTileServers.Add("http://a.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256");
                    newTileServers.Add("http://b.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256");
                    newTileServers.Add("http://c.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256");
                    osmLayer.TileServers = newTileServers;
                    break;
                case "CycleMap":
                    //same collection is pre-populated and hence needs to be refreshed.
                    osmLayer.TileServers.Clear();
                    osmLayer.TileServers.Add("http://a.tile.opencyclemap.org/cycle");
                    osmLayer.TileServers.Add("http://b.tile.opencyclemap.org/cycle");
                    osmLayer.TileServers.Add("http://c.tile.opencyclemap.org/cycle");
                    osmLayer.Refresh();
                    break;
            }
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports System.Windows
Imports ESRI.ArcGIS.Client.Toolkit.DataSources
Imports ESRI.ArcGIS.Client

Namespace ArcGISWPFSDK
    Partial Public Class OSMTileServers
        Inherits UserControl
        Private osmLayer As OpenStreetMapLayer
        Public Sub New()
            InitializeComponent()
            osmLayer = TryCast(MyMap.Layers("OSMLayer"), OpenStreetMapLayer)
        End Sub
        Private Sub RadioButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim layerTypeTag As String = CStr((CType(sender, RadioButton)).Tag)
            Dim newTileServers As OpenStreetMapLayer.TileServerList

            Select Case layerTypeTag
                Case "MapQuest"
                    'Collection is replaced
                    newTileServers = New OpenStreetMapLayer.TileServerList()
                    newTileServers.Add("http://otile1.mqcdn.com/tiles/1.0.0/osm")
                    newTileServers.Add("http://otile2.mqcdn.com/tiles/1.0.0/osm")
                    newTileServers.Add("http://otile3.mqcdn.com/tiles/1.0.0/osm")
                    osmLayer.TileServers = newTileServers
                Case "Cloudmade"
                    'Collection is replaced
                    newTileServers = New OpenStreetMapLayer.TileServerList()
                    newTileServers.Add("http://a.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256")
                    newTileServers.Add("http://b.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256")
                    newTileServers.Add("http://c.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256")
                    osmLayer.TileServers = newTileServers
                Case "CycleMap"
                    'same collection is pre-populated and hence needs to be refreshed.
                    osmLayer.TileServers.Clear()
                    osmLayer.TileServers.Add("http://a.tile.opencyclemap.org/cycle")
                    osmLayer.TileServers.Add("http://b.tile.opencyclemap.org/cycle")
                    osmLayer.TileServers.Add("http://c.tile.opencyclemap.org/cycle")
                    osmLayer.Refresh()
            End Select
        End Sub
    End Class
End Namespace