How to add markers with coordinates on my map?-CodePudding

I have create a map and I have to put some markers at some countries. I have already achieved putting some dots on the countries I want but I need some markers too. I have also tried this answer but I am having troubles with the coordinates and somehow the markers only appear on top left corner of the svg. Also I have seen some other posts as well but they didn't really worked, so pls don't close question and make it as a clone. Here's my snipped code:

var svg = d3.select("svg"),
            width =  svg.attr("width"),
            height =  svg.attr("height");
        
        // Map and projection
        var projection = d3.geoMercator()
            .scale(655)
            .translate([200, 850])
        
        // Create data: coordinates of start and end
        // var link = {type: "LineString", coordinates: [[21, 41], [11, 45]]} // Change these data to see ho the great circle reacts
        
        // A path generator
        var path = d3.geoPath()
            .projection(projection)
        
            var marks = [{long: 102, lat: 42}];
            var markers = [
            {long: 22, lat: 42}, // Kumanovo
            {long: 21, lat: 41.500}, // Skopje
            {long: 20.400, lat: 44.500}, // Belgrade
            {long: 20, lat: 41.500}, // Elbasan
            {long: 21, lat: 42.300}, // Prizren
            {long: 24.250, lat: 43}, // Sofia
            {long: 11.400, lat: 44.300}, //Forli
            {long: 20, lat: 41}, //Tirana
            {long: 12, lat: 53}, // Berlin
            {long: 43, lat: 57}, // Moscow
            {long: 0, lat: 41}, // Barcelona
            {long: 16, lat: 48.300}, // Barcelona
            ];

        // Load world shape
        d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
        
            // Draw the map
            svg.append("g")
                .selectAll("path")
                .data(data.features)
                .enter().append("path")
                    .attr("fill", "#b8b8b8")
                    .attr("d", d3.geoPath()
                        .projection(projection)
                    )
                    .style("stroke", "#fff")
                    .style("stroke-width", 1)
        
            svg.selectAll("myCircles")
            .data(markers)
            .enter()
            .append("circle")
            .attr("cx", function(d){ return projection([d.long, d.lat])[0] })
            .attr("cy", function(d){ return projection([d.long, d.lat])[1] })
            .attr("r", 3)
            .style("fill", "crimson")

            
        })

    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    
    <svg id="my_dataviz" width="750" height="500"></svg>

CodePudding user response：

The example you are attempting to copy is missing a right ) in the template literal. Even fixing that, though, your markers will be slightly off due to the image not being "centered" at the coordinates.

Fixing it all up looks like this:

var svg = d3.select("svg"),
  width =  svg.attr("width"),
  height =  svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
  .scale(655)
  .translate([200, 850])

// Create data: coordinates of start and end
// var link = {type: "LineString", coordinates: [[21, 41], [11, 45]]} // Change these data to see ho the great circle reacts

// A path generator
var path = d3.geoPath()
  .projection(projection)

var marks = [{
  long: 102,
  lat: 42
}];
var markers = [{
    long: 22,
    lat: 42
  }, // Kumanovo
  {
    long: 21,
    lat: 41.500
  }, // Skopje
  {
    long: 20.400,
    lat: 44.500
  }, // Belgrade
  {
    long: 20,
    lat: 41.500
  }, // Elbasan
  {
    long: 21,
    lat: 42.300
  }, // Prizren
  {
    long: 24.250,
    lat: 43
  }, // Sofia
  {
    long: 11.400,
    lat: 44.300
  }, //Forli
  {
    long: 20,
    lat: 41
  }, //Tirana
  {
    long: 12,
    lat: 53
  }, // Berlin
  {
    long: 43,
    lat: 57
  }, // Moscow
  {
    long: 0,
    lat: 41
  }, // Barcelona
  {
    long: 16,
    lat: 48.300
  }, // Barcelona
];

// Load world shape
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data) {

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("fill", "#b8b8b8")
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    .style("stroke", "#fff")
    .style("stroke-width", 1)

  svg.selectAll(".m")
    .data(markers)
    .enter()
    .append("image")
    .attr('width', 20)
    .attr('height', 20)
    .attr("xlink:href", 'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/24x24/DrawingPin1_Blue.png')
    .attr("transform", (d) => {
      let p = projection([d.long,d.lat]);
        return `translate(${p[0]-10}, ${p[1]-10})`;
     });
})

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<svg id="my_dataviz" width="750" height="500"></svg>