Using custom map image tiles in LeafletJS?

Question

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)

score 24 · Accepted Answer · edited Jan 15 '19 at 22:17

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.

JUST FYI for anybody reading this - Tiles DO NOT have to be 256x256px. You can set the length of a side of a square in the TileLayer options - 256px is the default however (and will generally make your life easier) — thisissami, Dec 05 '12 at 07:01

Charles Okwuagwu · Answer 2 · 2015-05-12T19:34:58.893

12

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

edited May 12 '15 at 19:34

answered Apr 21 '15 at 13:30

Charles Okwuagwu

10,538
16
87
157

1

There are also "plug-ins" for Leaflet which will do local cacheing of information that has been retrieved from an external mapping source (or, from a page like the one shown.) – Mike Robinson May 12 '15 at 13:21
2

Note that, in your code, there will need to be *some* provision for handling a request for a tile-coordinate that does not exist in your database. This might be in your `DB.GetTile()` routine, which should either serve-up a dummy tile or arrange to return a `404 Not Found`. (In the latter case, Leaflet can be programmed to serve-up a "missing tile" tile of its own.) I have observed that Leaflet *does* issue requests for, for instance, "negative coordinates," and does so fairly frequently. – Mike Robinson May 12 '15 at 13:23
Thanks for the interesting comments. I have noticed the requests for tiles i don't have. i believe 404 is the appropriate response as leaflet can (and should) handle such gracefully – Charles Okwuagwu May 12 '15 at 19:38
@MikeRobinson how can we optimize for cases where the tiles are basically the same (eg tiles over bodies of water) can we get leaflet to cash previously seen tiles? – Charles Okwuagwu Apr 13 '16 at 10:38

Using custom map image tiles in LeafletJS?

2 Answers2

Linked