w8r / geojson2svg

Render geojson into SVG using inline or external stylesheet
https://w8r.github.io/geojson2svg/demo/
MIT License
67 stars 10 forks source link

Rendered svg is vertically flipped #19

Open harshal-yeole opened 3 years ago

harshal-yeole commented 3 years ago

@w8r Hello,

Firstly I really liked the package and I am using it

I am using geojson2svg but the image is rendering vertically inverted, any idea to solve this?

I saw the transform property in the documentation, but any idea or example, how we can manipulate it?

Below is example, i tried plotting the cordiantes but it was not matching the geojson2svg image, so i tried inverting it how the sbg was being generated: image

Here is my code for the same, please suggest changes to make it right?

Currently I am doing style={{ transform: 'scaleY(-1)' }} on image. But I think thats not solution to it.

const image = geojson2svg()
      .type('thumb')
      .styles({ basic: { fill, stroke, weight } })
      .data({
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              "type": "Polygon",
              "coordinates": [
                [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
              ]
            },
            properties: {
              thumb: 'basic'
            }
          },
        ],
      })
      .render();

Thank you in Advance

kamataryo commented 2 years ago

a trick to flip:

geojson2svg()
        .projection(([x, y]) => [x, -y])
        .data(data)
        .render()