I have created a map from a mbtile converted to a geojson, the projection is WGS84. I load it like that :

var map = svg.append("g").attr("class", "map");
var path = d3.geo.path().projection(d3.geo.albers().origin([3.4,46.8]).scale(12000).translate([590, 570]));
    d3.json('myjsonfile.json', function(json) {
        map.selectAll('path').data(json.features).enter().append('path').attr('d', path)
});

Now I would like to add a svg element (a dot, a circle, a point (i don't know)) with its (lat,lng) coordinate in my svg.

I can't figure how to do that.

I have created a map from a mbtile converted to a geojson, the projection is WGS84. I load it like that :

var map = svg.append("g").attr("class", "map");
var path = d3.geo.path().projection(d3.geo.albers().origin([3.4,46.8]).scale(12000).translate([590, 570]));
    d3.json('myjsonfile.json', function(json) {
        map.selectAll('path').data(json.features).enter().append('path').attr('d', path)
});

Now I would like to add a svg element (a dot, a circle, a point (i don't know)) with its (lat,lng) coordinate in my svg.

I can't figure how to do that.

• javascript
• svg
• d3.js

1 Answer 1

You need to separate out the projection so you can use it again to project the lat/lon of your point:

var map = svg.append("g").attr("class", "map");
var projection = d3.geo.albers()
    .origin([3.4,46.8])
    .scale(12000)
    .translate([590, 570]);
var path = d3.geo.path().projection(projection);
d3.json('myjsonfile.json', function(json) {
    map.selectAll('path')
        .data(json.features)
      .enter().append('path').attr('d', path);
    // now use the projection to project your coords
    var coordinates = projection([mylon, mylat]);
    map.append('svg:circle')
        .attr('cx', coordinates[0])
        .attr('cy', coordinates[1])
        .attr('r', 5);
});

Another way to do this is just to translate the dot by the projected coords:

map.append('svg:circle')
    .attr("transform", function(d) { 
        return "translate(" + projection(d.coordinates) + ")"; 
    })
    .attr('r', 5);