Hexagon Geospatial
MENU

Developers Knowledge Base

M.App Portfolio provides a modern, cloud-based platform for creating and delivering diverse geospatial web applications.
Through the M.App Studio, our partners can design, build, and deploy their own Hexagon Smart M.Apps.
Showing results for 
Search instead for 
Do you mean 

Adding Leaflet Slippy Tile layer to the Map.

by Technical Evangelist on ‎08-12-2016 11:47 AM - edited on ‎08-15-2016 05:20 AM by Technical Evangelist (512 Views)

Introduction.

This tutorial explains how to add Leaflet slippy tile layer to the map. There are a few requirements that need to be met in order to successfully display tiles on the map:

Parameters required by the slippy map format should be named as follows:

  • {z} – zoom level

  • {x} – X coordinate

  • {y} – Y coordinate

List of available subdomains must be attached to the link as a parameter. Each subdomain should be separated by the comma. Example: https://{a,b,c}.tile.servername.org/{z}/{x}/{y}.png

Bear in mind that each parameter required by the server (e.g. layer style or authorization key) should also be added with a proper value.

 

Step-by-step tutorial on adding OpenWeather Layer

Note: The free OpenWeather service does not provide any secured access to its tile server. In order to bypass this restriction we used the Amazon’s CloudFront service as a proxy server that translates HTTP connections to HTTPS one. However there are plenty of other services that allow the same result to be achieved.

 

  1. Enter M.App Studio.

  2. Open Map Editor by using Create New Map option.

Layer1.png

  3. Open third toolbox on the right panel.

 

Layer2.png 

 4.Use Add Layers from service button.

 5.On the popup, select Leaflet TileServer.

 6.Fill the form and accept it with the Add Layer button.

    • Service Url – Url address to the service.

    • Layer Name – name of the layer in the map legend.

    • Map Attribution – attribution data.

Layer3.png

 

7. Layer should appear on the map and the legend.

Layer4.png

 

  8.Save the map. It is ready to be added to your application.

 

I hope this short tutorial is helpful. If you have any questions regarding this feature please contact michal.soltysiak@hexagongeospatial.com.