7
votes
Accepted
Remove outlying territories/islands from Europe map
I'd bring it into QGIS and use Vector > Geometry > Multipart to Singlepart.
In Natural Earth, France is a multipolygon so it is one feature with lots of individual polygons (France, French Guiana, ...
6
votes
Accepted
Converting EPSG to D3.js
I'll try, but I've never used D3. I do know projections and the state plane system very well. Let's look at a full definition of EPSG::26729.
PROJCS["NAD27 / Alabama East",
GEOGCS["NAD27",
...
6
votes
Remove outlying territories/islands from Europe map
If you want to keep it all command line, you could use ogr2ogr's clipsrc option to clip your shapefile to a bounding box before sending it through the d3-geo tools.
I ran:
ogr2ogr -f "ESRI ...
5
votes
Accepted
Esri Cedar.js (based on D3.js)
Cedar is (currently) based on Vega which in turn is based on d3. Obviously those layers of abstraction over d3 (Vega and Cedar) should make certain things easier.
In short, just about anything you ...
5
votes
Accepted
GeoJSON maps created with D3 appear flipped/inverted
I was able to work through the problem and understand what was happening, so I thought I would detail it for anyone who runs into this in the future. Folks who know better than me are welcome to amend ...
5
votes
Methods to Convert .SVG File to GeoJSON
I just wrote a library that converts an SVG image to a (slightly-incorrect) GeoJSON.
svg2geojson
It requires that you hand-edit your SVG to add two XML tags that associate an SVG location with a lat/...
5
votes
Determining intersection between GeoJSON feature and given coordinates?
You can try Turf library and its intersect method: http://turfjs.org/docs/#intersect
Taken from turf examples:
var poly1 = {
"type": "Feature",
"properties": {
"fill": "#0f0"
},
"...
5
votes
Removing space between objects of a shapefile
Yes, you can physically move the polygons of the outer territories in geographic data, but this would degrade data unnecessarily.
The much better solution hinted at by @ThingumaBob is to simply use ...
4
votes
Accepted
D3: center a map feature using correct latitude and longitude, without rotation?
Rotation is necessary because d3.geo.albers defaults to centering on the middle of the US (center and rotate are used in that block but they match the defaults).
I haven't seen a clear explanation ...
4
votes
Accepted
Methods to Convert .SVG File to GeoJSON
There is a command-line tool by Phrogz mentioned below that I have not checked out:
https://gis.stackexchange.com/a/245085/35596
To anyone that comes here, the answer is: "it is quite difficult (at ...
3
votes
D3 Map + TopoJSON (mapshaper) showing empty
Finally it's work, is just centering a projection on right value to:
var projection = d3.geo.equirectangular()
.scale(1050)
.rotate([-120, 0])
.translate([width / 2, height / ...
2
votes
Any Examples of D3.brush() used with Leaflet?
I've just made one basic example based on this bl.ock.
Process
add your layer group to the map (from GeoJSON)
save your layer group in a variable, i.e. var layer_group = L.geoJSON(json, {...}).addTo(...
2
votes
d3.js Projection for Washington DC area
D.C. is often projected with Maryland State Plane, which is a conical projection. You can use geoConicConformal from d3-geo to create it in d3 (version 4):
const projection = d3.geoConicConformal()
...
2
votes
TopoJSON rendering issues using D3
I think this is a possible answer:
The topojson file world-110m.json may have a different object tree with respect to india.json.
The topojson files are all quite different.
you should check if they ...
2
votes
Accepted
How to set the icon for a Leaflet marker based on a variable
The documentation on custom icons is here: http://leafletjs.com/examples/custom-icons/
What you want to so is something like this (untested):
var ActiveIcon = L.Icon.extend({
iconUrl: '...
2
votes
Tangram YAML, use external function?
Look in style_parser.js in the tangram source to see how your function gets executed. You may be able to attach library functions to the global element of the scene but you might have to write your ...
2
votes
Attempting to map GeoJson file producing issues
Solved it, the data wasn't WGS84. Thanks everyone!
2
votes
Natural earth tiles are not detailed enough
Natural Earth tiles are made from these public datasets https://www.naturalearthdata.com/. The most detailed data are at scale 1:10 million. For more detailed maps you need data from some other ...
2
votes
Accepted
Drawing a GeoJSON with D3js on OpenLayers 4
Fixing some minor issues in your code makes the example work. Some of them were:
Linking d3js v5 instead of v3.
Making the svg position absolute on the same position as the map.
Here is the cleaned ...
2
votes
Accepted
Removing space between objects of a shapefile
In d3 the correct way to do this is to use a composite projection. Here are plug-ins that specify composite projections for France:
https://github.com/rveciana/d3-composite-projections (d3v4 and d3v3)...
2
votes
Accepted
Combine D3 node and HTML
The error is in this statement:
layer.bindPopup(content+chart);
The + operator concatenates strings. Thus you are coercing the function chart to a string and then you are concatenating it with the ...
2
votes
How to show Puerto Rico in "albersUsa" projection in Vega-Lite or Vega?
Vega does not support the AlbersUSA projection with Puerto Rico in it because the D3 implementation doesn't either. You can add a custom projection to Vega, though. See https://vega.github.io/vega/...
2
votes
Accepted
Changing style of only selected polygons in L.geoJSON layer?
It would be simpler to let Leaflet do the desired change in style through the style option.
Set initial opacity for features which have the desired color with the style function to some predefined ...
2
votes
Putting different id in different paths on my Leaflet map
If you just need to add id to each path elements, you can be able to achieve that by simply using a jquery script.
## OPTION 1 : use jQuery once polygons are loaded
This will do the job. Be Sure to ...
2
votes
Accepted
Why d3.js works only with GeoJSON violating right-hand rule?
You can look on parent forum about the issue details and related explanations https://stackoverflow.com/questions/49311001/d3-js-drawing-geojson-incorrectly
You can also find a recipe at https://...
1
vote
Accepted
Difficulty rendering a multipolygon from a GeoJSON using JQuery
The data that is retrieved from the API is not in GeoJSON format. The geometry attribute should be called geometry and not the_geom (the_geom makes me think of an export from PostGIS).
So first you'...
1
vote
Natural earth tiles are not detailed enough
Mapbox Streets and Mapbox Outdoors both include terrain hillshading and go though to high zoom levels.
If either of these aren't exactly the style you're after, you could use Mapbox Studio to create ...
1
vote
Project UTM Coordinates to three.js Coordinates With D3
Shame on me for not reading the excellent d3 documentation... By using a combination of rotate and fitExtent, I did not need to fuss with scale or translate.
This is what I used:
var projection = ...
1
vote
D3 Projection outputs Map wrong
D3 geoProjections take unprojected data points on a three dimensional globe and project them on to a two dimensional plane. Your data is already 2 dimensional (I believe you or someone else had a ...
1
vote
How to Merge polygons while zooming out using leaflet?
I cannot see a solution to make it on the fly in Javascript. The key word is generalization. So I'd suggest to rather 1) create your generalized layers using some GIS tools and (2) to display them in ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
d3 × 137geojson × 41
javascript × 39
leaflet × 27
topojson × 23
coordinate-system × 22
qgis × 14
svg × 9
shapefile × 8
ogr2ogr × 8
mapbox × 6
choropleth × 6
openlayers × 5
json × 5
chart × 5
gdal × 4
web-mapping × 4
cartography × 4
united-states × 4
maps × 4
jquery × 4
mapping × 3
visualisation × 3
react × 3
raster × 2