Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

How to disable wrap-around? #129

Open
cespare opened this Issue · 8 comments

6 participants

@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
Collaborator
@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
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.