Is it possible to use D3 for polylines in Leaflet?
What I am trying to achieve is a less accurate, but more stylised, route display. I'd like to use d3's interpolation('monotone') on a line (or path) which runs through each marker point in Leaflet and creates a smooth, curved line.
The only example I have found close to this is http://erasmus.ahoi.in which creates nice smooth arcs using d3 and canvas.
Does anyone know of any examples of this?
I have created a fiddle with some markers on a Leaflet map in case someone wants to give it a shot: http://fiddle.jshell.net/zw8TR/10/
Mike Bostock (the creator of D3) has written a nice tutorial on how to use D3 in combination with Leaflet. He uses GeoJSON polygons in his example but they can easily be swapped with GeoJSON linestrings, which you would be needing.
See: http://bost.ocks.org/mike/leaflet/
Related
I've used D3 to place some data onto a Leaflet map. Now, I am trying to enable the "click to zoom" function.
There's an example here by Mike Bostock which does it only on D3
There's an example here which does it only on Leaflet.
How should I go about combining these functions?
I need a 'polygon' selector type functionality. Basically, the ability to drag lines to form multiple polygons; pref with the ability to edit the 'points' of the polygon after the shape has been 'closed' (but that's secondary) and/or move the polygons...
I generally dislike 'reinventing the wheel' and I figured I'd find tons of examples to work with, but I was wrong...
The polygon tool in Google Maps is just about perfect, but has anyone utilized it outside of GMaps? (I recall it required a GMap as an attribute from my work with Google Maps). Before I roll up my sleeves, I just want to ensure there isn't something already made (this is a very small part) - so if (a) Google Maps Polygon object is usable without a map, or (b) there's another library/project I'm missing please let me know.
Fabricjs is an option you can check.
Have a look at D3.js which has a great api for visualizing data and geo information. Besides the standard one-/two-dimensional brush there are plugins for more advanced types of brushes:
Polybrush. Providing a polygon brush.
lasso. Lassoing a selection by freely drawing a line path.
Is it possible to draw routes with google maps or any other map api? Like when you're looking for direction from point a to point b on google map with Get Directions button.
I'd like to draw a line that follows certain road but without the directions I don't need those. And if I can draw multiple lines between multiple points on the map that would be awesome.
Has anyone had experience with this before?
You can either use the Directions API or, if you really prefer to ignore the directions Google generates, you can use the maps API drawing functions to draw your own lines on the map.
You can also employ "drawing library"
https://developers.google.com/maps/documentation/javascript/drawing
But,this experimental tool cant specify colors nor line-thick via GUI.
My enhanced example is at:
http://members.jcom.home.ne.jp/tcltk-d/ge-navi.html
(select "Drawing" view to draw)
I'm looking for some guidance or an example how to do a geochart in d3.js.
I need something like this one in google charts, and turning to d3.js since I need some customization. So far the closest d3.js sample I found is this but the code is very long there and I am hoping to find something simpler.
Are you looking for a choropleth map? Here's a recent example in 28 lines of code.
This example uses the default projection, d3.geo.albersUsa, which is a composite projection for the United States including Alaska, Hawaii and Puerto Rico. If you want to change the visible region, you probably also want to change the projection; d3.geo.albers is good for choropleth maps because it is equal-area. The albers projection lets you set the origin so that you can focus on a specific part of the global, and all projections allow you to specify scale and translate to position the map on-screen.
If you want to display a world map, I'd also take a look at the ongoing development of the extended projections plugin. This adds a number of useful map projections, particularly for world maps, such as the Winkel Tripel. The next release of D3 will also include some exciting new features such as three-dimensional rotation for any projection (including antemeridian cutting; try dragging this example), adaptive resampling and improved clipping.
As for coloring the choropleth, you can of course color geographic features however you like by redefining the "fill" style as a function of data.
With all due respect to #mbostock and his answer, I thought I would add some additional resources for anyone coming across this question.
The example in the link provided by #Yaron Naveh appears to be a Mercator projection. You can find out more about d3.js' Mercator projection facilities in the d3.js API. #mbostock has also been kind enough to create blocks/gists for each of the projections in the API (click on the projection thumbnail image for the example). Here are the links to a simple Mercator projection block/gist.
Regarding the "The Art of Asking - How are you feeling?" link, here is a little code to go with what #mbostock said about coloring using the fill style as a function of data. In this example, I am simply picking the unicode value for the first character of the country's name in the JSON file and making a CSS color from that value using "steelblue" (#4682B4 = 4620980) as a sort of seed (you will probably want to calculate shades/tints).
d3.json("readme.json", function(collection) {
d3.select("svg").selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(d3.geo.mercator()))
.style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); });
});
You can check out the full example here as a block/gist.
(#mbostock - Thank you for such a great tool!)
I am familiar with how to draw circles and polygons on a Google Map using the javascript API. However, I've been looking at some android apps that allow you to "touch and draw" a freehand area on a map, not a collection of polyline/points or geometric shapes.
Is this functionality accessible to the js API? If so, how? I only find documentation on the polygons etc.
Note: this type of functionality is not what I'm looking for! Clicking at multiple points to define an area is fine, but I'm trying to do a real "drawing" style.
Thanks