0

Attempting to fix this, changed the geoJsonURL to receive a more complex shape. With this new shape the zoom method works, however the shape is completely scramble. According to the Coordinate system: WGS 84 (EPSG:4326) and this stack topic, it should be more or less like i have now to calculate the correct projection. But, still gives a weird path output. A help would be much appreciated, Thanks in advance.

Below is the original topic and on top the new part

I was trying to make zoom in to the path, but the scale method is not doing nothing. Saw in some topics as well the use of pointRadius method but not working to. If you noted, the path is almost on middle (i translate it manually), but very small. What i am doing wrong with my approach ?

I can get the coordinate system and the box coordinates (this is not in this example) in case that is needed. I have been reading some examples, but it seems nothing is working. Any idea what i am doing wrong ? Coordinate system: WGS 84 (EPSG:4326)

Thanks in advance

/* geometryType=esriGeometryPolyline OR esriGeometryMultipoint OR esriGeometryPolygon OR esriGeometryEnvelope*/
const geoJsonURL = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&where=(LOWER(NOME)%20LIKE%20LOWER(%27%25Alhadas%25%27))&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"

const canvas = d3.select("#map").append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .style("border", "2px solid red");

const projection = d3.geoTransverseMercator()
  .rotate([8.1331, 0])
  .center([0, 39.6682])
  .scale(200)
  .translate([300, 350]);

const path = d3.geoPath().projection(projection);

const group = canvas.append("g")

d3.json(geoJsonURL).then(function (data) {
  group.selectAll("g")
    .data(data.features)
    .enter()
    .append("path")
    .attr("stroke", "blue")
    .attr("stroke-width", 1)
    .attr("fill", "none")
    .attr("d", path);
  //.attr("d", path.pointRadius(20));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
    <div id="map"></div>
</body>
Miguel
  • 109
  • 9

1 Answers1

0

so... After some long search's and after some reading, found out that my geo coordination's are already in a 2D coordination system Scaling d3 v4 map to fit SVG (or at all). The d3.geoMercator method is a function that will transform a 3D polygonal geometry into a 2D one (planar one), so it will flat the 3d polygonal geometry. Since my coordination system is already flatted, using such method on it was only creating new 2D paths (hope this is indeed the correct explanation...).

Code now looks like this

const queryRegionText = "where=NOME LIKE '%25Alhadas%25'"
const geoJsonURL2 = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&" + queryRegionText + "&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"

const width = 500;
const height = 500;

const canvas = d3.select("#map").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "2px solid red");

d3.json(geoJsonURL2).then(function (data) {

  var projection = d3.geoIdentity()
    .fitSize([width, height], data);

  const path = d3.geoPath().projection(projection);

  const group = canvas.append("g")

  group.selectAll("g")
    .data(data.features)
    .enter()
    .append("path")
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .attr("fill", "gray")
    .attr("d", path);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
    <div id="map"></div>
</body>
Miguel
  • 109
  • 9