Comments (17)
Here's an example that demonstrates d3.geoTile working on 4.0 Alpha 49: Raster & Vector 4.0.
from d3-geo.
Voila https://github.com/d3/d3-tile
from d3-geo.
Make a d3-geo-tile module? It is pretty tiny though.
from d3-geo.
It is tiny, and I'd love to be able to use Rollup with it. Maybe it could be included as-is in d3-geo?
It also seems like there's room for building a higher level module on top of the existing tile code for working with images. Currently each of the examples re-implements image loading logic separately, along the lines of the following (from Raster & Vector II):
var raster = svg.append("g");
...
function zoomed() {
...
var image = raster
.attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
.selectAll("image")
.data(tiles, function(d) { return d; });
image.exit()
.remove();
image.enter().append("image")
.attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", 1)
.attr("height", 1)
.attr("x", function(d) { return d[0]; })
.attr("y", function(d) { return d[1]; });
}
I wonder if it might make sense to try to encapsulate this logic into an API similar to that of Leaflet. The API could take as input the raster
g element and A URL pattern for tiles, and expose methods for setting the scale and translate. Examples of features that could be added into such a module include:
- Tile URL template strings like
'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
. This would make it easy to use different tile providers based on declarative data, like in this Leaflet Providers Demo.- Caching tiles. As an example, Raster & Vector II has the behavior of re-loading the same tiles again and again, due to the randomness introduced in the URL generation. I think this issue would be solved by deterministic URL generation, leaving the actual caching up to the browser.
- Showing larger, blurry tiles in the background as smaller tiles load in the foreground. This would vastly improve the user experience when zooming. The current behavior in the examples is that the larger tiles disappear, and the user is looking at empty white space until the higher zoom level tiles are loaded. This would however introduce complexity to the code. The exiting of tiles would be contingent upon all of their "child" tiles having loaded.
The higher-level API idea may justify setting up a separate d3-geo-tile package that can start as the pure and simple tile code as it exists, and be built up over time towards the higher-level API for working with images.
from d3-geo.
Related library for using D3 on map tiles (Leaflet integration) https://github.com/Telefonica/submarine Hat tip to @micahstubbs for pointing out this library.
from d3-geo.
Perhaps one upgrade to geoTile could be to accept a zoom transform rather than setting the translate and scale separately.
from d3-geo.
The Raster & Vector 4.0 example was actually using D3 3.X functions before for zooming. I just updated the example to actually work on the 4.0 API only (Alpha 50).
from d3-geo.
Nice. A little comment. When you call zoom.transform, it will invoke your zoom event listeners. So there’s no reason to call zoomed
manually here, and there’s also no reason to call d3.zoomTransform to retrieve the (unused) transform. On load, you can just say:
svg.call(zoom.transform, initialTransform); // Calls zoomed!
vector.attr("d", path(topojson.mesh(us, us.objects.counties)));
And then in zoomed
, you don’t need to use d3.zoomTransform because you can use d3.event.transform to get the current transform:
console.log(d3.event.transform);
Updated fork:
http://bl.ocks.org/mbostock/e94d145a60278eada9945de3d630680e
from d3-geo.
Oh sweet! Awesome improvements. Thanks so much for the code review.
from d3-geo.
Embarking on creating a plugin. Is this still up to date? https://bost.ocks.org/mike/d3-plugin/
https://github.com/curran/d3-tile
from d3-geo.
Yes. I’ve been keeping it up-to-date. Do you mind transferring it over the D3 organization and restoring my original LICENSE? You’ve substituted your name for mine, and it’s still my code. Thanks!
from d3-geo.
(You’ll still be an owner after the transfer; it’ll make it easier for both of us to maintain it.)
from d3-geo.
Also, if you could add me as an owner so that I can publish to npm, that would be nice.
npm owner add mbostock d3-tile
from d3-geo.
- Changed name in LICENSE (oops! sorry about that)
-
npm owner add mbostock d3-tile
- Attempted to transfer ownership to D3 organization. I got an error "You don’t have admin rights to d3"
- transfer ownership to D3 organization
from d3-geo.
I think that error is misleading—you just need to be a member of the d3 organization to create new repositories. I’ve just set you an invite. Let me know if that works. If not, you might need to transfer for it to me first, and then I can transfer it over to d3 and add you as an owner.
from d3-geo.
Ah ok, thanks! Will try again.
from d3-geo.
Nice!
from d3-geo.
Related Issues (20)
- d3.geoBounds returning confusing output HOT 1
- How can I clamp a geodesic to between a max/min latitude? HOT 1
- fit-test.js Remove duplicate test HOT 1
- Geojson to SVG offset HOT 1
- Geojson to SVG offset
- Cannot import d3-geo in node with typescript HOT 8
- Geographic or Geodetic HOT 1
- D3 uses GeoJSON to represent geographic features in JavaScript HOT 2
- postclip with polygon path maybe... HOT 10
- Error [ERR_REQUIRE_ESM]: Must use import to load ES Module / require() of ES modules is not supported HOT 2
- geoAzimuthalEqualArea not rendering straight lines HOT 2
- clipCircle's precision is too low
- Configurable precision for d3.geoPath
- Mercator. Getting boundary values by longitude HOT 2
- Mercator with rotate. Incorrect conversion from projection to geographic coordinates HOT 3
- Сonvert geographic points considering antimeridian and pole HOT 1
- geoContains function doesn't seem to handle MultiPolygons HOT 9
- path.bounds should return numbers even when input coordinates are strings
- [Question] API for chekcing if point is in view or not given projection HOT 3
- Mercator Map centered on the Pacific HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-geo.