Develop Reference

Problem projecting data (d3) onto a Leaflet map

I am working on a project where I am trying to visualize data from a database onto a leaflet map. The data contains long/lat coodrinates, but when I'm trying to draw them onto the map, the location is all wrong or not showing at all.
I've read that the lat / long coordinates are not the same coordinates that are being used on the leaflet map, so i'm trying to translate them but with no luck.
The datebase has this structure (.csv file):
datetime,city,state,country,shape,durationSeconds,durationHours,comments,date_posted,latitude,longitude
10/10/1949 20:30,san marcos,tx,us,cylinder,2700,45 minutes,"This event took place in early fall around 1949-50. It occurred after a Boy Scout meeting in the Baptist Church. The Baptist Church sit",4/27/2004,29.8830556,-97.9411111
10/10/1949 21:00,lackland afb,tx,,light,7200,1-2 hrs,"1949 Lackland AFB&#44 TX. Lights racing across the sky & making 90 degree turns on a dime.",12/16/2005,29.38421,-98.581082
and the code so far looks like this:
var map = L.map('mapid').setView([10, 15], 2.2); L.tileLayer('https://api.mapbox.com/styles/v1/josecoto/civ8gwgk3000a2ipdgnsscnai/'
+'tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9zZWNvdG8iLCJhIjoiY2l2OGZxZWNuMDAxODJ6cGdhcGFuN2IyaCJ9.7szLs0lc_2EjX6g21HI_Kg', {
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'
}).addTo(map);
var w = $("#mapid").width();
var h = $("#mapid").height();
var projection = d3.geoMercator()
.scale(w / 2 / Math.PI)
.translate([w / 2, h / 2])
function latLong(x,y)
{
//console.log(x + ' and ' + y);
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
return point;
}
var svg_map = d3.select(map.getPanes().overlayPane)
.append("svg")
.attr("width", w)
.attr("height", h);
svg_map.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
var coords = projection([d.longitude, d.latitude]);
return coords[0];
//var coords = latLong(d.longitude, d.latitude);
//return coords.x;
})
.attr("cy", function(d) {
var coords = projection([d.longitude, d.latitude]);
return coords[1];
//var coords = latLong(d.longitude, d.latitude);
//return coords.y;
})
.attr("r", function(d) {
return 2;
})
When I'm using the geoMercator() function, I can see the dots displayed on the map, however they are being projected onto the map wrong (because they are being bent from the function or something). And when I'm trying to use the latLong() function, they are not being displayed at all (but no errors in debugger).
I can add that I am getting the values from the database correctly, but the problem is in the vizualisation. Can you guys spot anything?
Thank you in advance!
EDIT: Here's an image of how it looks when I'm using the geoMercator:

How can I center my maps on the container and adjust the size so that it occupies the entire container?

I am drawing a map of the United States,Costa Rica and Canada. And I would like the maps to adapt to the size of the div#statesvg
<div id="statesvg" style="width:100%; height:100%"></div>
the size of div#statesvg is dynamic.
I only want by default that the maps fits exactly to the div that contains it.
I'm trying to center each map, but it's not centered. I would like to know if there is any mathematical formula or something to scale the map until it fully occupies the svg container.
if(json=="usa.json"){
// D3 Projection
var projection = d3.geo.albersUsa()
.translate([width/2, height/2])
.scale((height*1.25));
}
if(json=="canada.json"){
//canada lat long 54.6965251,-113.7266353
var projection = d3.geo.mercator()
.center([-113.7266353,54.6965251 ])
.translate([width/2, height/2])
.scale((height*1.25));
}
if(json=="costarica.json"){
//costa rica lat long
var projection = d3.geo.mercator()
.center([-87.0531006,8.351569 ])
.translate([width/2, height/2])
.scale((height*1.25));
}
// Define path generator
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
this is my actual problem for each map
thanks!
this is my code:
http://plnkr.co/edit/lJgx0fbLcEh7e4W3j6XD?p=preview

There is this nice gist from nrabinowitz, which provides a function which scales and translate a projection to fit a given box.
It goes through each of the geodata points (data parameter), projects it (projection parameter), and incrementally update the necessary scale and translation to fit all points in the container (box parameter) while maximizing the scale:
function fitProjection(projection, data, box, center) {
...
return projection.scale(scale).translate([transX, transY])
}
I've adapted part of your code (the Canada map) to use it:
d3.json("canada.json", function(data) {
var projection =
fitProjection(d3.geo.mercator(), data, [[0, 0], [width, height]], true)
var path = d3.geo.path().projection(projection);
d3.select("#statesvg svg").remove();
var svg = d3.select("#statesvg").append("svg")
.attr("width", width+"px")
.attr("height", height+"px");
svg.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1")
.style("fill", function(d) { return "rgb(213,222,217)"; });
});
As commented by the author, it seems to only work for Mercator projections.

Plot points in map d3 javascript

i want to draw on map base on longitude and latitude in csv file called tree.csv on a map that i using an image .
My csv file include many lines ,so i will just put some lines here
Longitude Latitude
37.7295482207565 122.392689419827
37.8030467266869 122.425063628702
......
Here is my code
d3.csv("/trees.csv", function(data) {
dataset=data.map(function(d) { return [+d["Longitude"],+d["Latitude"] ];});
console.log(data)
var width = 750,
height = width;
// Set up projection that map is using
var projection = d3.geo.mercator()
.center([-122.433701, 37.767683])
.scale(225000)
.translate([width / 2, height / 2]);
var path=d3.geo.path().projection(projection);
var svgContainer=d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
svgContainer.append("image")
.attr("width", width)
.attr("height", height)
.attr("xlink:href", "/Ilu.svg");
var trees=svgContainer.selectAll("circles")
.data(data).enter()
.append("circles")
var treesAttributes=trees
.attr("cx",function(d) { return projection(d["Longitude"])[0];})
.attr("cy",function(d) { return projection(d["Latitude"])[1];})
.attr("r","100px")
.style("fill","red");
I can see my map but i cant see any points on my map . When i inspect the web. i see that cx is Nan number ,and cy is same number. I think maybe my array havent been read yet. But i am not sure about the problems. I have been stucked. Can you guys solve me the problem ? Thank you

Your problem lies in that you aren't providing coordinates to be projected.
A d3 geoProjection takes a longitude latitude pair and projects it to an x,y svg coordinate (a projection returns a coordinate as: [x,y], which is why you use this form in your code: projection(coord)[0] to get the cx value). You are seeking to project only a longitude, and then only a latitude:
.attr("cx",function(d) { return projection(d["Longitude"])[0];})
.attr("cy",function(d) { return projection(d["Latitude"])[1];})
In this case, projection won't return an svg coordinate as you aren't providing a geographical coordinate to project. You need to project both longitude and latitude, becuase x and y values produced in a projection are usually (not always) co-dependent - in any conical projection for example, the output y (or x) value is dependent on both latitude and longitude. Further, as projection() returns [x,y], it requires both longitude and latitude for every projection.
Instead try:
.attr("cx",function(d) { return projection([d["Longitude"],d["Latitude"]])[0];})
.attr("cy",function(d) { return projection([d["Longitude"],d["Latitude"]])[1];})
Remeber that d3 geoprojections expect the form: projection([longitude, latitude]), changing the order of longitude and latitude will produce unexpected results.
var data = [
{longitude:1,latitude:1},
{longitude:-1,latitude:1},
{longitude:1,latitude:-1},
{longitude:-1,latitude:-1}
]
var svg = d3.select("body")
.append("svg")
.attr("width",200)
.attr("height",200);
var projection = d3.geoMercator()
.translate([100,100]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx",function(d) { return projection([d.longitude,d.latitude])[0];
})
.attr("cy",function(d) { return projection([d["longitude"],d["latitude"]])[1];
})
.attr("r",2)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

topojson / D3 / Map with longitude + latitude

Im using the follwing UK Geo JSON to render a UK SVG Map
http://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json
On this map i want to be able to take longitude + latitude points and plot onto the map.
I am adding a GeometryCollection place to the map in the following way:
data.objects.places = {
type: "GeometryCollection",
geometries: [
{
type: "Point",
coordinates: [-0.127758, 51.507351], // London
properties: {
name: "London - Testing"
}
}
]
};
However the coordinates are not in the correct place.
Below is the full javascript.
var width = 960;
var height = 1000;
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(4000)
.translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("topo_eer.json", function(error, data) {
// Create path for the UK
svg.selectAll(".subunit")
.data(topojson.feature(data, data.objects.eer).features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);
// Path around regions
svg.append("path")
.datum(topojson.mesh(data, data.objects.eer, function(a, b) { return a !== b; }))
.attr("d", path)
.attr("class", "subunit-boundary");
// Add places to our data
data.objects.places = {
type: "GeometryCollection",
geometries: [
{
type: "Point",
coordinates: [-0.127758, 51.507351], // London
properties: {
name: "London - Testing"
}
}
]
};
// try plotting a point
svg.append("path")
.datum(topojson.feature(data, data.objects.places))
.attr("d", path)
.attr("class", "place-online");
console.log(data);
});

In a TopoJSON, those numbers in the coordinates are not the actual latitude/longitude values. They have to be transformed. This function transforms the quantized topology to absolute coordinates:
function transformPoint(topology, position) {
position = position.slice();
position[0] = position[0] * topology.transform.scale[0]
+ topology.transform.translate[0],
position[1] = position[1] * topology.transform.scale[1]
+ topology.transform.translate[1]
return position;
};
You'll find the scale and translate at the end of the TopoJSON you linked:
"transform":
{"scale":
[0.000818229038834542,0.0005946917122888551],
"translate":[-6.418556211736409,49.8647494628352]
}
Based on that function, I believe it's easy to write a function that does the reverse:
function transformPointReversed(topology, position) {
position = position.slice();
position[0] = (position[0] - topology.transform.translate[0])
/(topology.transform.scale[0]),
position[1] = (position[1] - topology.transform.translate[1])
/(topology.transform.scale[1])
return position;
};
I tried this function I just made and your London coordinates returned me this array:
[7688.309645789168, 2762.1059840278253]
Please, test it in your coordinates to see if it works.
An alternative is overlaying your TopoJSON with a GeoJSON, which does use an absolute coordinates system.
Here is the API reference: https://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects

Custom markers on an Orthographic Projection

I am using this approach to draw points on a Map with a Orthographic projection:
var path = d3.geo.path()
.projection(…)
.pointRadius(function(d) { return d.radius; });
svg.selectAll("path.point")
.data(data)
.enter().append("path")
.datum(function(d) {
return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude};
})
.attr("class", "point")
.attr("d", path);
This works well.
What can be done to make these points appear as triangles instead of circles?

You can use d3.svg.symbol().
//define triangle
var arc = d3.svg.symbol().type('triangle-up');
// put a triangle on every city
svg.selectAll(".tripath")
.data(topojson.feature(uk, uk.objects.places).features)
.enter().append("path")
.attr('d',arc)
.attr("transform", function(d) {
return "translate(" + projection(d.geometry.coordinates) + ")"; });
There are some predefined symbols:
circle - a circle.
cross - a Greek cross or plus sign.
diamond - a rhombus.
square - an axis-aligned square.
triangle-down - a downward-pointing equilateral triangle.
triangle-up - an upward-pointing equilateral triangle.
Here you have Mike's Wiki: https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol
And here you can see a working code: http://jsfiddle.net/6d3ansfn/

Here is solution for generating triangle-markers using a path geometry object. The two initial coordinates as center points for each triangle.
let halfWidth = 0.15;
points.enter().append('path')
.datum((d) => {
let pointA = [(Number(d.coord[0]) - halfWidth).toString(), (Number(d.coord[1]) - halfWidth).toString()];
let pointB = [d.coord[0], (Number(d.coord[1]) + halfWidth).toString()];
let pointC = [(Number(d.coord[0]) + halfWidth).toString(), (Number(d.coord[1]) - halfWidth).toString()];
polypoints = [
[pointA, pointB, pointC, pointA]
];
return {
type: 'Polygon',
coordinates: polypoints,
id: d.id,
center: d.coord,
};
});