Xamarin Forms Maps - Customization of Tiles

Question

I'm coming today to speak about the Tiles of the map !

For a personnal project and the project of my company, I need to customize a lot my Xamarin.Forms.Maps. I found this tutorial Custom Map Tiles in Xamarin.Forms which speak only about Android and iOS (one more time..) However, I would love to know how does it works for WinPhone 8.1 and/or UWP.

Also, Because it uses Mapbox, I would like to know if this project is really make to be available for a long time? (I ask only for those who knows something about this project, because I don't know juste by reading).

As I know, some nuget package about it exists but without making what I really want (I want to custom the tiles over each plateform)

If you have a website about it or if you already did it, can you give me some directions or any help please? Thank !

EDIT 1

I found this code for the UWP renderer, but it doesn't change the map tiles..

[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace MapTileProject.UWP.Renderer
{
    public class CustomMapRenderer : MapRenderer
    {
        CustomMap customMap;
        MapControl mapControl;

        protected override void OnElementChanged(ElementChangedEventArgs<Map> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                customMap = e.NewElement as CustomMap;
                mapControl = Control as MapControl;

                UpdateTiles();
            }
        }

        private void UpdateTiles()
        {
            Debug.WriteLine("BEGINING !");
            HttpMapTileDataSource dataSource = new HttpMapTileDataSource(customMap.MapTileTemplate);
            MapTileSource tileSource = new MapTileSource(dataSource);
            mapControl.TileSources.Add(tileSource);
            Debug.WriteLine("END !");
        }
    }
}

Franklin Chen - MSFT Franklin Chen - MSFT · Accepted Answer · 2016-07-18T06:33:03

found this code for the UWP renderer, but it doesn't change the map tiles

If you check the web request using Fiddler, you will see the request API URL was incorrect:

Ref Overlay tiles from a tile source

The standard HttpMapTileDataSource in UWP should be like this:

http://www.web service name.com/z={zoomlevel}&x={x}&y={y}

It includes three replaceable parameters for the X and Y coordinates and the zoom level: {zoomlevel}, {x}, {y}

So we need to convert your MapTileTemplate string first:

[assembly: ExportRenderer(typeof(CustomMap), typeof(CustomMapRenderer))]
namespace MapTileProject.UWP.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        CustomMap customMap;
        MapControl mapControl;

        protected override void OnElementChanged(ElementChangedEventArgs<Map> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                customMap = e.NewElement as CustomMap;
                mapControl = Control as MapControl;

                UpdateTiles();
            }
        }
        /// <summary>
        /// Convert MapTileTemplate string to fit UWP HttpMapTileDataSource
        /// </summary>
        /// <param name="mapTileTemplate"></param>
        /// <returns></returns>
        private string GetTileTemplateForUWP(string mapTileTemplate)
        {
            return mapTileTemplate.Replace("{z}", "{zoomlevel}");
        }

        private void UpdateTiles()
        {
            Debug.WriteLine("BEGINING !");
            HttpMapTileDataSource dataSource = new HttpMapTileDataSource(GetTileTemplateForUWP(customMap.MapTileTemplate));
            MapTileSource tileSource = new MapTileSource(dataSource);
            mapControl.TileSources.Add(tileSource);
            Debug.WriteLine("END !");
        }
    }

}

Screenshot:

Xamarin Forms Maps - Customization of Tiles

1 Answers