Topojson for polygons

[pere]

this plugin is great, i am trying to reuse your examples with some other polygonal topojson, but they appear with completely wrong shapes.

I downloaded several shapefiles and converted to topojson using mapshaper. All of them result in weird geographical shapes. Also the topojson downloaded (http://bl.ocks.org/mapsam/raw/6083585/) from the most basic D3.js example (http://bl.ocks.org/mapsam/raw/6083585/) creates this incorrect geometry... (have to zoom out full map to see it)

I assume the plugin uses 4326 projection? so topojson should be in 4326? I also see that the structure from your topojson is different than the standard one (yours doesn't have transform nor translate properties, and big array of arcs are at the beginning, not at the end of the file...)

Thanks in advance for some information

[manubb]

Hi. It is possible that i'm using topojson a bit weirdly (it's been a while and i do not remember clearly). However, the demos use Leaflet default projection which expects 4326 coords. The example you are giving use d3.geo.albersUsa projection so bad results can be expected when using Leaflet default projection.

Can you give me a topojson sample (using 4326 coords) so that i can have a look?

[pere]

thanks for this fast answer

I am not sure the json i sent you is on Albers, I think is transforming to Albers from a spherical (geographical) coordinates, that is 4326... but I have never been good on projections link

In any case here, on the EU comission official webpage can download different Topojson polygonal layers at different projections, including 4326. I cannot send here any example JSON, please download from the site.

I send also a screenshot of my result with one of these json. Of course I had to change a few things on code to generate it, but with this code and your french topojson it works. So, should work for others topojsons...

I think the plugin has a great potential, dreaming on creating color transitions on polygons on changing various parameters... any help appreciated

I suggest to add as base layer a grey map (see below), because maybe generated (weird) polygons are not very visible.

 var grayLayer =L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
  subdomains: 'abcd',
  maxZoom: 19
}).addTo(map);

[manubb]

I think you are right for the coordinate system of d3 demo. I have added a basic demo to display the US states: https://manubb.github.io/Leaflet.PixiOverlay/simple-topojson.html The sources are in the doc directory. Hope this will help you.

[pere]

This is great! thanks a lot