Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using custom map image tiles in LeafletJS?

Do my tiles need to adhere to any particular specs?

I have a large image file which I'd like to turn into a map with LeafletJS. I am going to be using the Python Imaging Library to cut it up into all the various tiles I need.

However, I can't find any information about using custom maps in Leaflet. Do I provide Leaflet with the range of X,Y,Z info somehow? Do I give it the pixel size of each tile? Does it figure this out on its own?

To put my question into one concise question: What do I need to do in order to have image files that can double as map tiles with LeafletJS, and what, if anything, do I need to do in my front-end script? (beyond the obvious specifying of my custom URL)

like image 860
thisissami Avatar asked Nov 30 '12 04:11

thisissami


2 Answers

You are looking for a TileLayer. In this TileLayer, you give the URL for the to-be-fetched images to leaflet with a template like this:

http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png 

When you are at the specified zoom, x and y level, Leaflet will automatically fetch the tiles on the URL you gave.

Depending on the image you want to show, the bigger part of the work will however be in the tile generation. Tiles by default have a 256x256px size (can be changed in the TileLayer options), and if you are using geodata the used projection is Mercator projection. It may take some time to get the tile ids right. Here is an example on how the tile ids work.

like image 150
j0nes Avatar answered Sep 18 '22 19:09

j0nes


You can even serve tiles directly from a database.

The format leaflet specifies is very flexible.

Leaflet just uses the z,x,y place holders to request specific tiles.

For example:

L.tileLayer('http://localhost/tileserver/tile.aspx?z={z}&x={x}&y={y}', {     minZoom: 7, maxZoom: 16,     attribution: 'My Tile Server' }).addTo(map); 

where Tiles.aspx

Option Strict On  Partial Class tile     Inherits System.Web.UI.Page      Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load         Dim z, x, y As Integer          z = CInt(Request.QueryString("z"))         x = CInt(Request.QueryString("x"))         y = CInt(Request.QueryString("y"))          Dim b() As Byte = DB.GetTile(z, x, y)          Response.Buffer = True         Response.Charset = ""         'Response.Cache.SetCacheability(HttpCacheability.NoCache)         Response.ContentType = "image/png"         Response.AddHeader("content-disposition", "attachment;filename=" & y & ".png")         Response.BinaryWrite(b)         Response.Flush()         Response.End()     End Sub 
like image 45
Charles Okwuagwu Avatar answered Sep 20 '22 19:09

Charles Okwuagwu