How might I use the curve factories in d3-shape to smooth / interpolate geojson lines and polygons? As far as I understand the API, I can pass a list of coordinates, get an SVG line string back from:
var line = d3.line(coords).curve(d3.curveCatmullRom.alpha(0.5));
What I want is an array of coordinates that I can construct a LineString from.
I think I need to define a context that returns coordinates. There is plenty on rendering from geojson to svg linestrings but I can't find any information on rendering to geojson coordinates.
Related
I have a source with a geojson with a bunch of Features of type Point.
Is it possible to draw a line through them? I've tried Layout with type line, but it produces points...
I don't want to create an additional source with the same data.
Is it possible to draw a line through them?
No. For starters, Mapbox GL JS wouldn't know in which order to draw the line.
I don't want to create an additional source with the same data.
That would be the correct solution: simply construct a new GeoJSON on the fly that uses the coordinates of each point as the coordinates of a line LineString feature. I'm not sure what your reservations are.
I am trying to draw polygons using leaflet js and I have a geojson file that has co-ordinates of different regions in langLat [longitude,latitude] format. But leaflet polygon requires us to use the co-ordinates in latLang [latitude,longitude] format. So how do I revert the array elements considering there will be different multiple dimensions of arrays for different region?
I'm using Vue-leaflet component.
<l-polygon :lat-lngs="coordinates"></l-polygon>
I hope my question made sense. Any help would be appreciated.
I'm trying to move a geoJSON polygon (the outline of a city's administrative borders) from it's original location to another arbitrary one, maintaining its shape while respecting the Mercator projection. Much like how this site does it: https://thetruesize.com/
I've experimented with moving images around the map and those do respect the mercator projection when moved north, but this isn't ideal as the geoJSON would have to be converted to an image on the fly...
Is there an easy way to do this in mapbox without modifying the entire geoJSON to new coordinates?
Thanks!
transformTranslate from Turf.js can help you to translate GeoJSON features or geometries.
I sometimes had some problems when moving polygons across the globe with transformTranslate, so I wrote some function (repl.it) that behaves a bit differently.
I have used leaflet.js to built a non geographic map using CRS
On top of this i have used leaflet draw control to manually draw lineString and then later saving them into mysql.
From the eg image above where path1, path2, path3 are different multiPoint lineString.
I wanted to know if it's possible to
find path between point A->B, B->A, A->C, C->A respectively, as its not gonna be a single lineString but combination of more than one depending where they intersect and if the intersecting line going towards the destination.
If A->D find the shortest route.
Given a set of (x, y, z) coordinates, how would I go about creating a contour map?
Would be nice to know how to implement in d3 but wouldn't mind trying to implement it myself if I had some direction.
For d3 users, can I create a contour map using d3.geom.contour() and jasondavies'
conrec.js:
https://github.com/jasondavies/conrec.js
Essentially, I'd like to replicate this contour map using d3.js: http://beaugunderson.com/routes/
It looks like this would be very easy with conrec.js. If you pass the data in the form that you have it, you can get a list of paths by calling .contourList() on the result. That you should be able to pass without modification to a d3 .data() call. All you should need to do is supply a path generator that maps the coordinates in the data to screen coordinates.
Plotly.js is based on d3.js and provides contour plots. See for example:
https://plot.ly/javascript/contour-plots/
Plotly.js: How to avoid overlapping contour lines?
How to apply plotly.js to an existing svg group <g> as target instead of applying it to a target <div> element?
There is also a contour plugin for d3.js (which I did not use yet):
https://github.com/d3/d3-plugins/blob/master/geom/contour/contour.js
And an example:
http://bl.ocks.org/mbostock/4241134