simplegeo/polymaps

Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

simplegeo

A NodeJS library for SimpleGeo with convenience methods for SimpleGeo api endpoints.

var SimpleGeo = require('simplegeo').SimpleGeo;

var sg = new SimpleGeo('key','secret');
sg.getLayers(function (err,data) { 
    for (i in data) {
        if (data.hasOwnProperty(i)) {
            console.log(data[i]);
        }
    }
});

polymaps's Issues

Polymaps generates broken SVG for some GeoJSON inputs

Hey,

I stumbled upon a bug in the SVG generation code.
When I try to add a layer for this GeoJSON as input, Polymaps generates broken SVG.
Firefox fails silently, but Webkit gives some hints at the issue:

Error: Problem parsing d="M-37139709.90152818,1443.4555507574314L-37139218.6023424,1534.4291985974367L-37138920.68216605,1603.4829105276176L-37138456.3567616,1749.9358626586363L-37138058.20290276,1963.3235719588392L-37137654.01641529,2844.4853388413258L-37137383.4748928,NaNL-37137194.76656924,NaNL-...

(Note the NaNs)

The offending json seems valid. The OpenLayers vector formats demo renders it OK

Thanks!

Grover

Add built-in .grover() control to map.

polymaps + google maps

Is there a way to use polymaps with maps from google ? How can it be done ?

Layer init and show hooks should be re-implemented as events.

Currently, the layer class allows you to implement two hooks to override behavior:

http://polymaps.org/docs/layer.html#init
http://polymaps.org/docs/layer.html#show

These should be re-implemented as events (perhaps 'init' and 'show' events, although more descriptive names might make sense). Alternatively, perhaps there should be a way to pass these hooks to the constructor so that they can be used by the base class without being exposed to the public API. Or perhaps subclasses can figure out another way to override these behaviors without the base class needing to expose public hooks.

html needs a doctype to take IE out of quirksmode

This will fix a bunch of layout issues.

Do not dispatch redundant events.

Currently, when the map's center or zoom is set, it always dispatches a "move" event. This is true even if the center or zoom did not change. The map should detect whether its state has changed before dispatching an event to avoid unnecessary work.

Lines crossing the antimeridian are not rendered correctly.

When we encounter such geometry, presumably we should project so as to minimize the distance between adjacent points.

Interestingly this bug was also in Google Earth:

http://code.google.com/p/kml-samples/issues/detail?id=227

Disabling tiling automatically for simple GeoJSON urls.

We should use the same check as image.url:

url = typeof x == "string" && /{.}/.test(x) ? po.url(x) : x;

This way, users that specify a static GeoJSON file, such as "tracks.json", will automatically get tiling disabled rather than having to set tile(false) manually.

Does polymaps only support coordinates in lat/long pairs?

Does polymaps only support coordinates in lat/long pairs? My dataset isn't lat/longs - it's basic X,Y originating at 0,0. Thanks

API in-code documentation and reference.

Wishlist: JSON configuration format

The chaining methods that polymaps enables are awesome; however, for automated map generation, it would be useful if there was a declarative language for map configuration; thus map configurations could be loaded from and dumped to javascript objects. The language could be simple; essentially reducing po.add into lists of objects.

If this idea sounds interesting, I can work on a proof-of-concept; the approach has worked well for a project called OpenLayers Wax, and it would be much easier to implement here.

GeoJSON layer should support JSONP.

I would rather than everyone use Access-Control-Allow-Origin, as the standard non-hacky way to load cross-domain resources over XMLHttpRequest. In particular, it's nice that there's no script element that remains in the DOM, and you're not vulnerable to malicious JavaScript injection.

But that said, there may be sites that only support JSONP, and it would be nice to access those. It should be possible to cleanup the script element after the callback.

Arrow control: keypad + not working on Windows or Opera.

Windows Vista, US keyboard, Google Chrome. Regular + and - work and numeric keypad - works, but not numeric keypad +. I believe the keyCode to listen for is 107; the arrow code is listening for 61.

KML Parser example doesn't appear to work

As per the title... Or is it doing something imperceptible... ?

Tested in latest Firefox, Chrome & Safari on mac.

Can I zoom the map to the extent of a GeoJSON layer?

So, i've created my map

    var po = org.polymaps;
    
    map = po.map()
        .container(document.getElementById("map-canvas").appendChild(po.svg("svg")))
        .zoomRange([1, 6])
        .zoom(4)
        .add(po.interact());
    map.add(po.image().url("http://s3.amazonaws.com/com.modestmaps.bluemarble/{Z}-r{Y}-c{X}.jpg"));

And I've added a JSON layer:

    data = po.geoJson().url("/json/?slug=foo").tile(false);
    map.add(data);

How can I get the map to zoom to the extent of that layer?

Animated Zoom

I'd really love to be able to do an animated zoom on a polymap. I feel like it produces a less jarring user experience. This isn't hard to do currently with a setTimeout/setInterval and the map.zoom function.

However, I notice a very consisten lag right when the zoom switches from one level to another. Funnily enough, this only happens when the tiles for the new zoom level have already been loaded. So, I think trying to switch the tiles while the zoom is going on just takes too much processing power that it can't keep the animation smooth. If it is still loading the tiles then it doesn't have to do that and the animation looks great.

Is there anyway to get a built in animated zoom or to be able to delay/pause swapping in new tiles? The later would be useful for other kinds of animations, too, where you want to make sure the animation is as smooth as possible.

If coordinates are encoded as strings, they will not render

If the coordinates in a GeoJSON file are encoded as strings, they will not render on the map (at least not correctly). It appears that the projection isn't calculated correctly.
Example:
{"geometry":{"type":"Point","coordinates":["-89.404439","43.07333"]},"type":"Feature","properties":{"id":1}}

To fix this, these lines:
l.lat = coordinates[1];
l.lon = coordinates[0];
should be changed to this:
l.lat = parseFloat(coordinates[1]);
l.lon = parseFloat(coordinates[0]);

xdomainrequest doesn't automatically parse XML in Internet Explorer

This affects the KML demo, but none of the 'official' examples in www.

There's a fix in http://ajaxian.com/archives/100-line-ajax-wrapper that shows how to parse the XML from responseText.

modernizr isn't found in logo-small.js in IE9

Some issue with inline script execution, perhaps?

HTML documentation is a total mess

The documentation does not format correctly. Text are overlapping. Tried in Chrome, Firefox, Opera. All of them have the same problem. See http://tungwaiyip.info/2010/img/2010-09-21_polymaps_problem.png.
Version is 2.2.0.

Map does not clip to size.

If the map size is bigger than its container, the map does not clip. This can cause image tiles to extend beyond the edge of the map. We can detect when the map size is set explicitly (size is non-null), and then add some appropriate clipping to the map container.

Create host-specific request queues.

This would allow more than six simultaneous requests, and is especially useful if layers are loaded from different hosts.

Zoom to bounds

Ability to zoom and move to specific bounds (probably accepting an array of [sw, ne]) would be useful. Ideally with optional parameter for padding, for aesthetic purposes.

Overlapping, multi-resolution tiles, or lazy-loading layers

As part of my quest to build the ultimate zooming/panning scanned manuscript reader, I've found that my original plan of creating multiple po.image() layers doesn't perform well enough for large numbers of layers (>200). I presume this is due to creating a large number of SVG elements all loading the images even if I have set the transform to be off-screen.

Perhaps what I'm really after is a single multi-resolution layer i.e. where each tile can have its own transform for scaling and translation. Alternatively, if layers could be lazy-loaded so that they are only created when they overlap browser viewport, this could be a neater fix, although the non-uniform layer sizes still need to be taken into account.

The way I have set up the scanned documents is to have a separate set of uniform (256x256) tiles for each scanned document. Each document scan has a slightly different size, but I do have the exact resolution information so I can apply the appropriate scaling transform to each set of tiles. The documents in the next column and row need to overlap the previous by different amounts depending on the exact width and height.

Sorry if this is stretching Polymaps a bit too much :-)

Cannot enter some characters

map.add(po.arrow())

This prohibits that I can enter "=" (and probably other characters into a text box. Instead, it will zoom in. So please do not register any global key handlers for the map.

overrideMimeType isn't supported in IE9

Wishlist: Cartesian projections

Hello,

I'm sure you've already considered (or are planning) support for other projections/co-ordinate systems, but I just wanted to note that Polymaps is rather good for creating a pan/zoom viewer for giant scanned images (with their physical measurements in inches), and supporting a plain old Cartesian projection could be useful. Perhaps it is already supported well enough, I'll explain some more below!

So far everything works wonderfully and now I'm just working on adding multiple scanned images to the same map, each as a separate po.image() tileset. Each image has a different resolution, so I'll have to apply some kind of transform to ensure that the correct size is displayed.

I think the right starting point is to follow http://polymaps.org/ex/overlay.html and replace proj.locationPoint with a straight mapping from my real-world Cartesian measurements to pixels using an affine transform for the translations (I need to add roughly 200 image tile layers all next to each other at various offsets) and any fractional zooming required so that all the scans appear the same resolution.

I've almost got this working but the tilesets are repeated infinitely on the horizontal axis (I only need each one to appear once) and I'm not 100% sure on the correct way to implement the transform.

As well as this it would be nice to override po.hash() so it uses Cartesian co-ords. Actually, even better than this would be if I can make it show the percentage position relative to the nearest tileset, but that's slightly trickier.

Thanks,
Jason

Protect API against errant usage.

The current API does not validate method arguments, coerce types, or make any defensive copies on input or output. This can lead to delayed failures; for example,

• a div might be used for the map container rather than an svg
• a string might be used for the map zoom rather than a number
• the tile size might be set as a number rather than {x: number, y: number}
• the lat or lon attributes of map.center() might be modified directly

Protecting against all types of errant usage might present an undue burden on the library implementors, but we should be able to protect against the more obvious mistakes and make the library more robust. The code size and runtime performance costs will hopefully be outweighed by the benefits of a easier debugging / more predictable failure modes.

Once all input types are appropriately coerced we should also be able to avoid the type-coercing equality operators; i.e., use === and !== instead of == and !=.

Support for TileStache- and Bing- style URL variables.

{XXX/XXX} {YYY/YYY} {quadkey} etc.

We currently have examples for these, but they're not supported directly by the library.

Maps should allow a null zoomRange.

... for consistency with map.centerRange.

inlining svg into html without using the SVG namespace

PolyMaps is great – clean smart code. But looking at the code I see that PolyMaps is inlining svg into html without using the SVG namespace, something that has never been known to be very hygienic!
This is part of the reason that PolyMaps does not work in IE9.
Should be quick fix. Thanks.

build instructions (and dependencies) for js and www should be in the README

How to get pygmentize, how to set PYGMENT on the command line, how to edit a particular feature of polymaps.js and have it rebuild, etc.

We should also move most of the caveats/features/bugs etc into the website or this issues list.

Shift-drag to zoom to selected region.

Add multitouch interface for mobile phones and tablets

This is a feature request for adding standard multitouch gestures. Pinch to zoom, swipe to pan, one finger double tap to zoom in, two finger double tap to zoom out, etc...

Smooth zooming should be disabled on the map, not wheel.

This seems like the right place to control the functionality, since there are places other than the wheel control (such as shift-dragging or setting the map extents) where fractional zoom levels can creep in.

html doesn't have a doctype declaration so IE9 is switching to quirk mode

The html does not have a doctype declaration so IE9 is switching to quirk mode. If you could fix those 2 issues then I think PolyMaps will work with IE9.

Should be quick fix. Thanks

The transform class should be hidden.

There's no reason to expose the implementation details of the transform object. The layer transform method should take (and return) a 6-element array of numbers representing the transform, in column-major order consistent with SVG:

| a c e |
| b d f |
| 0 0 1 |

It might be reasonable to include some transform utilities in the examples, but it shouldn't be part of the public API.

mousewheel zoom center is broken in IE9

At least in the examples. Full screen examples have their own issues.

svg needs overflow:hidden for IE9

Safari and Firefox add it by default, IE doesn't.

Thin lines appearing between tiles

Hello,

Not sure if this is intentional or not, but presumably due to rounding you can often see lines in between tiles e.g. http://polymaps.org/ex/bing.html#16.20/37.97195/-122.79029

It would be nice if this could be turned off so the tiles show seamlessly.

Thanks!

GeoJSON layer should support top-level Feature/Geometry objects.

The code currently assumes that the top-level object is a FeatureCollection.

fullscreen button in examples is broken in IE9

Broken = the placement is wrong.

In IE9 it doesn't look like the styling is taking hold (position, left and top are all blank).

In Firefox it is almost positioned correctly but the alignment is off and it disappears on full screen. I suspect the DOCTYPE or the addition of overflow:hidden to all svg elements in the CSS probably threw it off.

tooltips don't show up in Firefox 3.6.8

I had noticed this but forgot to note it down. Thanks Reddit! http://www.reddit.com/r/programming/comments/d3joz/polymaps_is_an_awesome_new_javascript_mapping/c0xau2o

I'm not filing a bug for IE8 though.

Prioritize tile requests from the center out.

opera has problems with almost all the demos

Testing on ie9 branch, fwiw, with Opera Mac 11.00:

bing example doesn't display until window is resized
nasa/bluemarble example doesn't display until window is resized
cloudmade paledawn example doesn't display until window is resized
cloudmade midnight commander example doesn't display until window is resized
features example doesn't display until window is resized
grid example doesn't display until window is resized
hilbert example doesn't display until window is resized
invert example doesn't display until window is resized (but filter works)
kml example map doesn't display until window is resized (but some data does, gives hint to bug?)
loupe example map doesn't display until window is resized (but loupe does, buggily)
streets example map doesn't display until window is resized (but streets do, buggily)
overlay example map doesn't display until window is resized (but overlay does, buggily)
shadow example doesn't display until window is resized (neither map nor marker)
tipsy example map doesn't display until window is resized (but marker does)
small example doesn't display until window is resized
static example doesn't display until window is resized
flickr example doesn't display until window is resized
transform/transform-inverse don't display until window is resized
transition example doesn't display until window is resized
world example map doesn't display until window is resized (but overlay does, buggily)

spin example works!

cluster example doesn't display properly even if window is resized
marker example doesn't display properly even if window is resized
population example doesn't display properly even if window is resized
statehood example doesn't display properly even if window is resized
unemployment example doesn't display properly even if window is resized

breakout example doesn't display at all
mandelbrot example doesn't display at all
cell example doesn't display at all

IE9 doesn't support crossdomain xmlhttprequests

If the browser doesn't support them, can we throw an error?

Can we use jsonp to load data if crossdomain support isn't there, e.g. for the oakland clustering demo?

Incorrect positioning of po.compass() zoom control

For both .zoom('small') and .zoom('big'), the zoom control appears on top of the pan control. For .zoom('big'), it flows off the map.

I don't think this is a CSS issue as the controls are positioned using SVG transforms. However, if it is a CSS issue, example.css should be updated so that the zoom control is placed correctly.

Many setters have implicit assumptions of state.

For example:

• arrow.map cannot be changed after initially set (or set to null).
• map.container cannot be changed after initially set (or set to null).
• map.container must be set before adding anything to the map.
• layer.id cannot be changed after the layer is added to the map.
• layer.size cannot be changed after tiles are loaded.
• layer.zoom cannot be changed after tiles are loaded.
• image.url cannot be changed after tiles are loaded.
• ... etc.

Ideally, all of these should be changed to allow objects to be reconfigured independent of whatever state they are currently in. If that is not possible, the limitations should be clearly documented and an error should be thrown.

Unhandled exception in IE<9 when loading polymaps.min.js

It would be nice if polymaps.js could be loaded without any exceptions raised, as this prevents scripts further down the page from executing (and potentially trapping any exceptions to display an explanatory message). My workaround for now was to move the polymaps.js script reference to the bottom of the page and inject an onload handler beforehand containing a try/catch.

I'll come up with a patch at some point unless someone beats me to it.

zoom center is broken when page is scrolled in WebKit

If the map is still visible but the page is scrolled, the mouse wheel zoom center is offset.