How to disable wrap-around?

[cespare]

I'm working on a polymaps visualization containing only a simple geoJSON layer. When panning left or right, when the antimeridian (180/-180 longitude) crosses the center of the viewport, Polymaps wraps around. This has the visual effect of the whole map jumping to the left/right by 360 degrees.

Any suggestions for working around this? I'd really like to be able to pan until the visible layer is off the screen, even if it means that the virtual "center" of the map is, say, 300 degrees. I'm thinking there might be some hackaround where you can prevent polymaps from hiding the first layer and showing the second layer when it tries to wrap, but I haven't been able to figure that out either.

[mbostock]

Try map.centerRange and url.repeat.

[cespare]

@mbostock Thanks for the pointers. Using url.repeat(false) is better -- at least the map doesn't jump around (it just disappears when you drag it far enough now). I don't suppose there's a way to make Polymaps render the tile with the center outside of [-180,180] longitude, is there?

Assuming not, I'm using centerRange (which I have to adjust as a function of both zoom level and map size) to limit the horizontal panning to a range that will prevent the antimeridian from crossing the center of the map.

[cespare]

Heh, upon further inspection, it appears that by setting url.repeat(false) I just cause polymaps to request /null from my server, and so because it gets a 404 it's not rendering anything. I guess it doesn't matter if I use centerRange hackery to prevent repeating anyway.

Here's basically what I'm doing (simplified and converted from coffeescript to JS):

po = org.polymaps
map = po.map()
svg = po.svg("svg")
container.append(svg)

map.container(svg)
  .zoomRange([0,2])
  .zoom(0)
  .add(po.drag())
  .add(po.dblclick())
  .add(po.wheel())
  .center({lat: 40, lon: 10})

mapGeoJson = po.geoJson()
  .url(po.url("/countries.geo.json").repeat(false))
  .tile(false)
map.add(mapGeoJson)

map.on("move", <centerRange hackery>)
map.on("resize", <more centerRange hackery>)

[Jakobud]

Is there a solid solution for this problem? In Google Maps you can keep the map from repeating by using a custom Projection, but I can't figure out how to do something similar with Polymaps.

[nyxtom]

Bump+

[arsnl]

Bump!

[Jakobud]

For anyone still wondering about this, I ended up switching to using Leaflet JS for mapping. It includes a Simple CRS setting to remove the wrapping of maps like this, solving the problem. I'm sure this isn't what Polymaps dev's want to hear, but there it is.

[shawnbot]

Well, there aren't really any active Polymaps developers at this point. At Stamen we're using Leaflet for everything these days, so no offense taken here.

[mcadecio]

Is there a solid solution for this problem? In Google Maps you can keep the map from repeating by using a custom Projection, but I can't figure out how to do something similar with Polymaps.

Hi @Jakobud how did you did do that in google maps? Might be useful to figure out how to do that here.