Search code examples
javascriptdictionaryd3.jsgeojsontopojson

Put markers to a map generated with topoJSON and d3.js

I am creating a map of a particular state, I have been experimenting with d3.js and topojson and have created a great map, but now I want to add a marker on the map.

But now I have problems because as I add the marker have a GeoJSON file to add markers to the map generated and also the power I'd like to open a tooltip whenever a marker is pressed.

My map is very similar to this: http://bl.ocks.org/mbostock/4699541 and all I want is to add markers to states through a GeoJSON file that has the geographical coordinates of the markers.

So the map is currently So the map is currently

Map expected... Map expected...

Solution

  • You can add somthing like this at the end of your json callback:

    var marks = [{long: -75, lat: 43},{long: -78, lat: 41},{long: -70, lat: 53}];

svg.selectAll(".mark")
    .data(marks)
    .enter()
    .append("image")
    .attr('class','mark')
    .attr('width', 20)
    .attr('height', 20)
    .attr("xlink:href",'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png')
    .attr("transform", d => `translate(${projection([d.long,d.lat])}`);