0

I want to display several longish (4096x20k) images edge-to-edge ideally, but some padding between wouldn't hurt either. . .

The if an image looks like [], the desired output would be something like: [][][][], and still tile appropriately. . .

I know a couple hackey ways that I can do this, but what I was ideally looking for was something like: L.tileLayer('blah{x}blah{y}blah{z}', {shiftTilesBy: [xOffset, yOffset]});

I can't even seem to really figure out how leaflet figures out the extents of a tiled image. Do it just keep requesting tiles in each axis until it 404's? I am hoping to keep the images in different layers, as I am updating one or more of them often, and hence pre-fusing the images into one big one is really unattractive from a caching etc. standpoint.

If this dosen't exist as a plugin or some such I will write and contribute it. So, as a followup question, are there any places I should start looking in the source to create this?

Thanks.

Improve this question

1 Answer 1

Reset to default
2

Instead of having 4 separate maps, could you use one map and use an overlay to break the map into 4 tiles?

Here's the HTML:

<body>
  <div id="map"></div>
  <div id="overlay">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

And the CSS:

html {
    overflow:hidden;
}

html,
body,
#map,
#overlay {
    width:100%;
    height:100%;
    position:absolute;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    /* Requred if you want the map to respond to pointer events */
    pointer-events:none;
}

#overlay div {
    height:100%;
    border-right:15px solid #FFFFFF;
    width:23%;
    float:left;
}

And now the whole shebang, here is a jsFiddle.

And here's the result: Leaflet 4-column example

Improve this answer
2
  • Heheh. Well that is a awesome rendition, but I am actually looking for the ability to display 4 (independant) images as opposed to one image that looks like 4.
    – meawoppl
    Commented Mar 4, 2013 at 4:31
  • 1
    Maybe a quick mock-up to help us visualize what you're looking for.
    – Brett DeWoody
    Commented Mar 4, 2013 at 18:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.