simplegeo / polymaps Goto Github PK
View Code? Open in Web Editor NEWPolymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.
Home Page: http://polymaps.org/
License: Other
Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.
Home Page: http://polymaps.org/
License: Other
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...
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 NaN
s)
The offending json seems valid. The OpenLayers vector formats demo renders it OK
Thanks!
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.
The code currently assumes that the top-level object is a FeatureCollection.
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.
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.
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.
At least in the examples. Full screen examples have their own issues.
This will fix a bunch of layout issues.
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?
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.
{XXX/XXX} {YYY/YYY} {quadkey} etc.
We currently have examples for these, but they're not supported directly by the library.
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.
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.
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.
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,
div
might be used for the map container rather than an svg
string
might be used for the map zoom rather than a number
number
rather than {x: number, y: number}
lat
or lon
attributes of map.center()
might be modified directlyProtecting 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 !=
.
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?
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.
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]);
Add built-in .grover() control to map.
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
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 :-)
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.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.
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.
As per the title... Or is it doing something imperceptible... ?
Tested in latest Firefox, Chrome & Safari on mac.
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.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.
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.
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:
... for consistency with map.centerRange
.
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.
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.
Some issue with inline script execution, perhaps?
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.
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.
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.
If the map is still visible but the page is scrolled, the mouse wheel zoom center is offset.
Is there a way to use polymaps with maps from google ? How can it be done ?
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.
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
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!
This would allow more than six simultaneous requests, and is especially useful if layers are loaded from different hosts.
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
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.
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
Safari and Firefox add it by default, IE doesn't.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.