Polymaps / JSONP Queue

100%

Polymaps / JSONP Queue

✓ Published0🌍 Public

Last edited Aug 31, 2010

Created on Aug 31, 2010

This example demonstrates Polymaps loading geographic data asynchronously through a JSONP queue. It shows how the library fetches map tiles from a remote server using a callback-based mechanism, enabling cross-domain requests without CORS. The code extends `po.queue` with a `jsonp` function that injects a script tag, substituting a generated callback ID via the `{C}` placeholder in the URL template. The `Url.js` patch adds support for this placeholder, allowing the queue to manage multiple simultaneous requests while tracking active loads and cleanup procedures.

AI-generated description

Similar vizzes

Loading thumbnail…

Polymaps + D3

This example combines Polymaps and D3 to render an interactive map with a custom data layer. The map displays image tiles from CloudMade as a base layer, and overlays circles representing weather station locations from a local `stations.json` file. Each station is positioned using geographic coordinates projected through a `locationPoint` function within the Polymaps layer, with circle and text elements added via D3's selection API. The map includes interactive pan and zoom controls and a compass overlay.

Mmbostock

65% match

Loading thumbnail…

via:geojson.io

This example displays a single GeoJSON polygon—a rectangular region over the Pacific Northwest—on an interactive Mapbox map. The code loads the GeoJSON file via jQuery’s `$.getJSON`, then uses `L.geoJson` to add the polygon layer and automatically fits the map’s bounds to the feature. For each layer, it extracts the feature’s `properties` object and generates an HTML table, which is then bound as a popup using `bindPopup`. The visualization relies on Mapbox.js and Leaflet’s tile layer for rendering, with popups that reveal any associated attribute data.

CCaged

62% match

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson

62% match

Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock

61% match

Loading thumbnail…

GeoJSON Experiments

This example displays a GeoJSON dataset as point features on an interactive Mapbox map. It fetches data dynamically from a CouchDB instance using jQuery’s `$.getJSON` method and passes the resulting GeoJSON object directly into the map’s `featureLayer.setGeoJSON` function. The map is initialized with Mapbox.js and positioned over the Philippines at zoom level 5. The code relies on the Mapbox.js and jQuery libraries to combine external geographic data with a tiled base map.

CCliffordAnderson

61% match

Loading thumbnail…

First foray into asynch JS loading, this is a little snippet of the Surftourist maps code

This example demonstrates asynchronous loading of the Google Maps JavaScript API and supplementary mapping libraries to initialize an interactive map. It first checks for the presence of `google.maps` and, if absent, dynamically injects a script tag with a callback function to continue setup. The code then uses Modernizr.load to test for the `InfoBox` and `RickMarker` classes, loading a fallback script if needed. After dependencies load, it chains methods to configure the map, process points, add markers, draw lines, and set bounds, ultimately triggering a custom `mapsLoaded.ST` event. The map’s data comes from markers and points processed at runtime, with the Google Maps API serving as the core rendering engine.

DDylanFM

60% match

Loading thumbnail…

Polymaps / Procedural Perlin

This example displays a procedurally generated Perlin noise pattern rendered as a map using Polymaps. A web worker computes the noise values for each tile, writing RGB pixel data into an array, which is then posted back and displayed as a colorful texture. The code implements Ken Perlin’s classic noise algorithm from scratch, including fade, lerp, and gradient functions, and uses the `postMessage` API to communicate tile data asynchronously. The visualization demonstrates how noise can be generated on demand for arbitrary zoom levels and map coordinates.

Mmbostock

60% match

Loading thumbnail…

Asynchronous Queue

This example demonstrates asynchronous loading and summation of three remote JSON files using the d3-queue library with a concurrency limit of two. A large headline displays the formula “1 + 2 + 3” and updates the result from “?” to the calculated sum once all files are fetched. The code uses `d3.queue(2)`, `d3.json` deferrals, and an `awaitAll` callback to render the computed total via `document.querySelector`. Data files `1.json`, `2.json`, and `3.json` each contain a single number, which are combined with a `reduce` function.

Mmbostock

59% match