Line is not displayed correctly d3.js geo and google maps

Question

I need to draw a road using svg. I will get the coordinates of the roads from google maps. With coordinates, I map a scale in D3 and paint our road. But for some reason it is incorrectly displayed, somehow turned upside down. What am I doing wrong? thanks for the help!

google maps polyline

my svg gen 3d.js

code here

      let width = 250;
      let height = 375;

      let json = {
    "type": "LineString",
    "coordinates": [[48.90532814533834, 24.680317370130183],
[48.883320688958634, 24.637144533826472],
[48.882530497570265, 24.636028734876277],
[48.88190962414936, 24.638088671399714],
[48.871002260895736, 24.66945519346757],
[48.868969814521975, 24.674519204087687],
[48.86778418267773, 24.67640747923417],
[48.867050206029084, 24.67743744749589],
[48.86637267956708, 24.67795243162675],
[48.86546929668142, 24.678810738511515],
[48.86445297144161, 24.679583214707804],
[48.8628155151407, 24.680269860215617],
[48.86066980165004, 24.681128167100383],
[48.85801576560714, 24.682072304673625],
[48.85575690067917, 24.683016442246867],
[48.85479685221879, 24.68370308775468],
[48.85231193541426, 24.686020516343547],
[48.850448166869896, 24.689110421128703],
[48.84813247900213, 24.69640602964921],
[48.84711580171843, 24.70438828367753],
[48.846438005394916, 24.70516075987382],
[48.845590747089275, 24.705246590562297],
[48.83384441590116, 24.70023211348473],
[48.8291415885976, 24.698462478144393],
[48.82654238705405, 24.696230880244002],
[48.82512972097189, 24.695115081293807],
[48.82377352406793, 24.694428435785994],
[48.822756352305085, 24.692969314081893],
[48.82083497153837, 24.689965239985213],
[48.81913957439901, 24.68850611828111],
[48.81716153859056, 24.687476150019393],
[48.81620075017718, 24.686446181757674],
[48.81443898628063, 24.684729567988143],
[48.80986069828892, 24.68155383251451],
[48.80717570530815, 24.679665557368025],
[48.80381219546943, 24.67880725048326],
[48.77989284642209, 24.67039901058888],
[48.777354631787716, 24.669543351419634],
[48.77611026798696, 24.668513383157915],
[48.77509212920691, 24.667483414896196],
[48.773734578713096, 24.66688260007686],
[48.772886091013035, 24.666367615946],
[48.77158504868879, 24.66465100217647],
[48.767568574926294, 24.663191880472368],
[48.76158563393699, 24.657331572784756],
[48.75106082711519, 24.651838408722256],
[48.74224825684646, 24.646860228790615],
[48.740635107152315, 24.646087752594326],
[48.73868227772552, 24.646345244659756],
[48.73732374294287, 24.646860228790615],
[48.73579534742594, 24.647546874298428],
[48.732652406087446, 24.646558163473628],
[48.72767033487528, 24.643897412130855],
[48.71895052242447, 24.638833401510738],
[48.71538289067956, 24.637460110495113],
[48.7107955637972, 24.632911084005855],
[48.70043006310887, 24.622439740011714],
[48.68751268172252, 24.61153924257519],
[48.6790819349596, 24.60447667336598],
[48.676644982797136, 24.603790027858167],
[48.67511474327954, 24.603360874415785],
[48.67392452485299, 24.603275043727308],
[48.67262092002776, 24.602588398219496],
[48.6650820219688, 24.597181064845472]]
};
      
      
      // Create a unit projection.
      let projection = d3.geo.mercator()
          .scale(1)
          .translate([0, 0]);
      // Create a path generator.
      let path = d3.geo.path()
          .projection(projection);
      // Compute the bounds of a feature of interest, then derive scale & translate.
      let b = path.bounds(json),
          s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
          t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
      // Update the projection to use computed scale & translate.
      projection.scale(s).translate(t);


      let svg = d3.select("#map").append("svg")
          .attr("width", width)
          .attr("height", height);

      svg.append("path")
          .datum(json)
          .attr("class", "graticule")
      .attr("d", path);

    .graticule {
      fill: none;
      stroke: #ff646b;
      stroke-opacity: .5;
      stroke-width: 5px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Line</title>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Looks like you have your lon/lat coordinates backwards -- and be aware that in screen coordinates, y increases down from the top of the page! — SteveR, Feb 27 '18 at 17:26
SteveR - thank you! You could detail the description or link for the material. thank you — ihor8k, Feb 28 '18 at 12:59

score 1 · Accepted Answer · answered Feb 28 '18 at 15:04

You don't mention where your coordinates are coming from, but I suspect they are based on GIS (x, y, z) format, so the order is [longitude, latitude]. This will cause your image to be "rotated" -- if you reverse the x/y values, that should help. There is a good discussion about the evolution of these different coordinate systems (navigation vs. graphing) on this SO thread.

Also, the path you are generating appears to be "flipped" vertically. I can't tell you how many times I've done that, because the page's coordinate system is not what most of us expect. The upper-left corner is (0, 0), and the y-values increase down the page. The most intuitive way (for me) is to invert the y-axis's output range -- one way is like this:

var yScale = d3.scale.linear()
    .domain([minY, maxY])
    .range([height, 0]);

That way, the minimum y-coordinates (i.e. latitude, in your case) are mapped to the bottom of the SVG area (the "height" variable), while the maximum values are mapped to 0 (the top of the screen).

@tetrafishka, glad I could help -- and if that fixes your problem, would you mind accepting the answer? — SteveR, Mar 03 '18 at 20:26

Line is not displayed correctly d3.js geo and google maps

1 Answers1