I'm curious, who else is using D3 to make maps? If you are, what other geo /
map libraries are you using?

I've done a few maps with D3 and Javascript like http://windhistory.com/. It
works great. But Polymaps has some drawbacks and hasn't had any development
in awhile, so I'm looking at alternatives.

All I really need is a library to manage slippy map tile loading, panning,
and zooming. Basic raster composition, so I can draw vector data on top with
D3 and SVG. The tricky part is georeferencing and clean handling of zooms,
pans, etc.

Leaflet and Tile5 are the trendy new Javascript map libraries; anyone using
them with D3? There's also OpenLayers and Modest Maps has some Javascript
support. Mike's also got a project called Pixymaps that I think isn't quite
ready for prime time but could be very nice
https://github.com/mbostock/pixymaps

  http://bl.ocks.org/1233904

Mike

Wow, I'm actually in the middle of a discussion with a friend of mine about
when to use d3 vs. OpenLayers!

It seems to me like it would be your best bet. Use it to setup all the
tricky GIS parts, and just use d3 to manipulate the svg it generates. OL has
really solid development and extensive GIS capabilities, I used it a lot a
few years ago and its only gotten better. I haven't had the need to make a
GIS capable map with d3 yet, but it's the first place I'd go.

Anyone else have opinions? Is it more complex than it seems to just hook
into the SVG made by OpenLayers and start stylin'?

On Mon, Sep 26, 2011 at 9:45 AM, Mike Bostock <mbost...@cs.stanford.edu>wrote:

I suspect it'd be quite natural to couch d3 inside the right
"subclasses" to do nifty things.

-bewest

Mike

TL;DR: +1 on OpenLayers, the swiss army knife of open source mapping. Don't
overlook Google Maps if you want plug-and-play. Choose Modest Maps or
Leaflet if you want a minimal foundation and tight control over behaviors.
Choose Polymaps if you want API harmony with D3 and especially if you love
SVG.

Disclaimer: I wrote the Modest Maps JS library with Stamen Design and also,
er, "mid-wifed" Polymaps when Mike worked with us there.

...

Each of the open source mapping libraries I'm aware of has a sweet spot:

 - OpenLayers has everything built-in, is very mature and has the largest
active community around it. I believe it still uses HTML DOM for tile
display but at this point everything is probably pluggable. SVG overlays are
possible, and can be styled with CSS or with GIS styling languages...
because everything is possible in OL :) Finding current examples and
documentation has historically been the trickiest task but the pay-off is
usually worth it if you need a stable platform to build
on. http://openlayers.org/

 - Modest Maps is pure DOM with IE6 support, probably the smallest and I
hope the fastest, but it requires you to roll up your sleeves and do the
integration yourself. It hits a sweet spot for Stamen because they are in
the business of bespoke visualization design. The talented folks at
Development Seed have a library called Wax that helps ease integration with
MM and provides basic UI out of the box. Start there if Modest Maps appeals
http://mapbox.com/wax/

 - Polymaps is pure SVG and most interestingly supports tiled vector
overlays out of the box. It does tiled image maps too, not to be overlooked,
because generating tiled vector overlays is stilly a fairly tricky and
specialist task. Polymaps and D3 are two great tastes that taste great
together, because they share an author and there are examples on the D3 wiki
already http://polymaps.org/ :)

 - Leaflet is a new and pretty offering and has nice interaction and UI
built in. It's very well done, small in file-size, and to my shame has more
features than Modest Maps out of the box (layered maps, data overlays, info
bubbles, etc). Mobile support should be good because of the use of CSS
transforms. http://leaflet.cloudmade.com/

 - Tile5, as mentioned by others, looks good but I've never used it. It has
nice examples!

...

The D3 tile demo I posted doesn't do any "geo" projection stuff yet, but I
think it shows the power of D3 and I hope in future we'll see a D3 mapping
library (son of polymaps, anyone?) that uses D3's existing geo capabilities
with something like this tiling approach.

I don't want to scare you off (if I haven't already!) but be aware that
these open source mapping libraries put you on a slippery slope leading to
custom tiles, patchy data, obscure licensing agreements, etc. ... whether
you choose a full featured library like OpenLayers or a foundational one
like Modest Maps, you need to make sure you know where the maps will come
from. Google has historically made it difficult to use their maps with other
libraries, though I think OpenLayers can do it because it's content to
manage Google Maps as a "layer" like any other. OpenStreetMap is a natural
choice but can't support everyone*. Look to MapQuest for open tiles on a
fast CDN to get you started. Look to Bing or ESRI for a professional
solution. Look to TileMill for a custom design solution.

* a note on OpenStreetMap:
http://wiki.openstreetmap.org/wiki/Tile_usage_policy ... The project is a
fantastic enabler for this kind of stuff but it's not always appropriate to
use their tiles, especially not for commercial purposes. That's not a weird
licensing constraint, it's just polite: the tiles are there to promote the
project and help users improve the data. Visualizations should use tiles
that are there for visualizations, something like TileMill is ideal
http://mapbox.com/tilemill/ or GeoIQ's acetate
tiles http://developer.geoiq.com/tools/acetate/

This is a /very/ long way of saying you should also consider using Google or
Bing Maps API (or ESRI) if you want reliable consistent cartography and tons
of back-end APIs like geocoding and routing out of the box. A few companies
are support OpenStreetMap but their tiles/APIs aren't in wide-spread use,
e.g. MapQuest and CloudMade, but they are worth a look if they have a
feature you need (like nice cartography or fast servers).

I've been meaning to organize my thoughts on this subject for a while,
apologies if this first draft isn't too coherent!

Best,

Tom.

And at the risk of trying too hard to be comprehensive and completely
derailing the thread (ha, too late) if anyone is interested in hacking on a
D3 tiled map renderer I'd recommend looking at other non-geo projects too,
like Microsoft's DeepZoom, the open source Open Zoom project or the more old
school Zoomify project. The last two are in Flash but not doing anything you
can't do in a browser now. Open Zoom is very well architected and
documented.

There's a JS version of DeepZoom called Seajax that does very impressive
things with canvas http://expression.microsoft.com/en-us/gg413362.aspx and
some mapping stuff too: https://github.com/rsimon/seajax-utils - note that
Seajax itself has a typically sideways Microsoft "open source" license that
prevents porting it to other languages/systems. Meh!

These libraries share an approach to rendering that uses the full "pyramid"
of tiled images to virtually eliminate seams but it can be difficult to tune
performance. It's what I was aiming for with my D3 demo but I didn't quite
get there. Some day!

Tom.

Till then I am quite happy with the smooth interaction of those 2
products (thank you Mike).

Cheers,
Christophe

On Sep 26, 6:26 pm, Nelson Minar <nel...@monkey.org> wrote:

Thanks for all the feedback. Particularly to Tom for all the suggestions!
I'm heartened by all the OpenLayers fans: anyone have a simple D3 +
OpenLayers example I can crib from?

I also have some concerns about using SVG on mobile devices in general. It's
OK on iOS, just not fast. Android only started supporting it with Honeycomb.
One appealing thing about Leaflet and Tile5 is they're explicitly designed
to be fast on mobile devices.

Regarding Android SVG performance, 5 months later, it appears to have taken
a significant step forward with Chrome for Android.

On Feb 29, 11:03 pm, D3 Designer <robbtb...@gmail.com> wrote:

At foss4g-na there was also a nice discussion of http://jquerygeo.com/
Looked really nice.
Steve

  http://bost.ocks.org/mike/leaflet/

Leaflet already has built-in support for GeoJSON, but you might find
this technique useful regardless.

Cheers,
Mike

Great example Mike with good detail on custom layers.   I've used leaflet a
great deal in practice and use a simple shortcut to avoid a custom layer
(more practical). By  calling: map._initPathRoot() , or simply inserting a
marker/circle etc, Leaflet provides a standard SVG layer that takes care of
transforms, margins etc, making the code slightly simpler.

Here is how the same example would look with the shortcut  (
http://bl.ocks.org/2957559)
{{{
var map = new L.Map("map")
    .setView(new L.LatLng(37.8, -96.9), 4)
    .addLayer(new
L.TileLayer("http://{s}.tile.cloudmade.com/3eb45b95929d472d8fe4a2a5dafbd314 /998/256/{z}/{x}/{y}.png"))

/* Initialize the SVG layer */
map._initPathRoot()    

/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svg"),
    g = svg.append("g");

/* Define the d3 projection */
var path = d3.geo.path().projection(function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
  });

/* Load and project/redraw on zoom */
d3.json("us-states.json", function(collection) {
  var feature = g.selectAll("path")
      .data(collection.features)
    .enter().append("path")
    .attr("d", path);

  map.on("viewreset", function reset() {
    feature.attr("d",path)
  })

One minor difference between the two is that when you drag using
Leaflet's built-in SVG viewport, it won't redraw the SVG until
mouseup. It appears to use 50% padding on each side. So, for example,
if you drag right more than 480px, then the SVG will be blank until
you mouseup. A small detail, but I was wondering how they got around
computing a bounding box from the geometry!

Mike

Hi guys,

The restricted viewport is used for performance reasons — Leaflet features
are clipped by a bounding box around the screen (the padding is
confugurable) and then simplified for the current zoom, which makes it
pretty fast, especially on mobile devices. And it doesn't need to compute
bounding box from the geometry — the projected coordinates are relative to
a fixed point, and stay the same after panning — only SVG viewbox is
updated.

Let me know if you have any questions about Leaflet — I'll be glad to help.
:) Regarding the documentation for custom overlays — I'm going to fix this
ASAP. And thanks for an awesome tutorial, Mike!

среда, 20 июня 2012 г., 4:55:53 UTC+3 пользователь Mike Bostock написал:

Mike