search

calvinmetcalf / shapefile-js

Convert a Shapefile to GeoJSON. Not many caveats.
http://calvinmetcalf.github.io/shapefile-js/
715 stars 228 forks source link

Opacity not working #157

Closed gmarshall56 closed 2 years ago

gmarshall56 commented 3 years ago

I have a json (or geoJSON file if you prefer) that contains coordinates that would create a shape that covers practically the entire globe. when I apply this json to a map, and when I slide this json file on to your test page (http://leaflet.calvinmetcalf.com/#3/32.40/10.55) the opacity that I set the in program code does not take affect. The shape covers the map as it should however you cannot see thru the shape at all.

Thank you for your attention.

calvinmetcalf commented 3 years ago

I don't understand, are you saying you're displaying geojson on a map you have locally where you set the opacity, but when you load the data into my map where you didn't set the opacity it has no opacity?

gmarshall56 commented 3 years ago

Sorry for not being clear. I have a json file that when I load it onto my map in react code like this: `const someOptions = { fillColor: "yellow", fillOpacity: 0.25, opacity: 0.65, color: "black", weight: 1, };

L.geoJSON(mapData, { style: someOptions, }).addTo(map);`

... what I end up seeing on my map is a giant yellow area that is not translucent at all, meaning I cannot see through it. Its as if the opacity is set to 1, but it is not. As you can see I set the fillOpacity as well as the opacity properties to low values to get the opacity to work. To see if the problem was with my code or not I took the same json file and dragged and dropped it on to the map on your web page: http://leaflet.calvinmetcalf.com/#3/32.40/10.55.

I see the same issue occurring on your web page. FYI: the json I am using contains geometry that results in shapes that cover the entire planet so I'm expecting to see the map on your page entirely covered with adjoining shapes that are translucent. Instead I see the map completely covered over with a color and no translucency at all. jsondragdropcalvinmetcalf2

I am also seeing, using other json files that I drag and drop on to your map that while the placement of the shapes are correct for the geometries that are in these json files, there are some shapes that are translucent and some are not.

Thank you for your time. If necessary I can provide my json files for your review.

calvinmetcalf commented 3 years ago

this is probably a leaflet bug with geometries that cross the antimeridian causing the same geometry to end up being displayed multiple times over the same area which is why it doesn't look see through.

On Fri, Apr 30, 2021 at 5:19 AM gmarshall56 @.***> wrote:

Sorry for not being clear. I have a json file that when I load it onto my map in react code like this: `const someOptions = { fillColor: "yellow", fillOpacity: 0.25, opacity: 0.65, color: "black", weight: 1, };

L.geoJSON(mapData, { style: someOptions, }).addTo(map);`

... what I end up seeing on my map is a giant yellow area that is not translucent at all, meaning I cannot see through it. Its as if the opacity is set to 1, but it is not. As you can see I set the fillOpacity as well as the opacity properties to low values to get the opacity to work. To see if the problem was with my code or not I took the same json file and dragged and dropped it on to the map on your web page: http://leaflet.calvinmetcalf.com/#3/32.40/10.55.

I see the same issue occurring on your web page. FYI: the json I am using contains geometry that results in shapes that cover the entire planet so I'm expecting to see the map on your page entirely covered with adjoining shapes that are translucent. Instead I see the map completely covered over with a color and no translucency at all. [image: jsondragdropcalvinmetcalf2] https://user-images.githubusercontent.com/5943189/116674714-fe22ee00-a972-11eb-8bef-f91a95cf9353.jpg

I am also seeing, using other json files that I drag and drop on to your map that while the placement of the shapes are correct for the geometries that are in these json files, there are some shapes that are translucent and some are not.

Thank you for your time. If necessary I can provide my json files for your review.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-829962358, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRH3GNJBRCADY2UL3PJTTLJYZHANCNFSM43X3HCWA .

-- -Calvin W. Metcalf

gmarshall56 commented 3 years ago

Thank you. Does your estimation of the issue also apply to when another json file I have that I drag and drop on your map results in some geometries being translucent and some not? See continental US and Alaska are not see-through: shapeOverlayAmericaSm

calvinmetcalf commented 3 years ago

do you just have multiple copies sitting on top of each other?

On Fri, Apr 30, 2021 at 10:22 AM gmarshall56 @.***> wrote:

Thank you. Does your estimation of the issue also apply to when another json file I have that I drag and drop on your map results in some geometries being translucent and some not? See continental US and Alaska are not see-through: [image: shapeOverlayAmericaSm] https://user-images.githubusercontent.com/5943189/116708554-d006d380-a99d-11eb-842a-449f76785e7e.jpg

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-830129620, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRH5CVKSKFQTAGDY2A3DTLK4JTANCNFSM43X3HCWA .

-- -Calvin W. Metcalf

gmarshall56 commented 3 years ago

That is a good question. I have nothing to do with the shape file that is used as the source of the json that I dragged - dropped onto your map. The source shape file that is used is created by another department someplace and I use a free version of QGIS https://qgis.org/en/site/ to create the json.

If it helps I can send you the json file thx

calvinmetcalf commented 3 years ago

you can check in qgis ...

On Fri, Apr 30, 2021 at 10:37 AM gmarshall56 @.***> wrote:

That is a good question. I have nothing to do with the shape file that is used as the source of the json that I dragged - dropped onto your map. The source shape file that is used is created by another department someplace and I use a free version of QGIS https://qgis.org/en/site/ to create the json.

If it helps I can send you the json file thx

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-830139661, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRH72WUADCTXQ6G6JL3TTLK6DFANCNFSM43X3HCWA .

-- -Calvin W. Metcalf

gmarshall56 commented 3 years ago

I have created json files from the shape file using two other providers: 1 https://www.statsilk.com/maps/convert-esri-shapefile-map-geojson-format

  1. https://ogre.adc4gis.com/

... I have taken the json file generated by each vender and dragged / dropped it into your map. Other than the colors being different the results from both venders is the same: continental US and Alaska are not see-through

calvinmetcalf commented 3 years ago

have you checked in qgis that your data isn't overlapping ?

On Fri, Apr 30, 2021 at 11:03 AM gmarshall56 @.***> wrote:

I have created json files from the shape file using two other providers: 1 https://www.statsilk.com/maps/convert-esri-shapefile-map-geojson-format

  1. https://ogre.adc4gis.com/

... I have taken the json file generated by each vender and dragged / dropped it into your map. Other than the colors being different the results from both venders is the same: continental US and Alaska are not see-through

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-830156425, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRH57HNZWQKGHOLWXRDDTLLBCNANCNFSM43X3HCWA .

-- -Calvin W. Metcalf

gmarshall56 commented 3 years ago

I am not sure I understand what you mean by data overlapping however I did open the json file produced by the qgis package and checked to make sure there are no duplicate entries in it. There are not. I this what you are asking about?

calvinmetcalf commented 3 years ago

if you choose the info tool in qgis and click on an area of the map that is opaque when exported to leaflet, how many things show up in the info panel.

On Fri, Apr 30, 2021 at 11:27 AM gmarshall56 @.***> wrote:

I am not sure I understand what you mean by data overlapping however I did open the json file produced by the qgis package and checked to make sure there are no duplicate entries in it. There are not. I this what you are asking about?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-830174401, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRH2RJWNWXCZI33LVTV3TLLD6ZANCNFSM43X3HCWA .

-- -Calvin W. Metcalf

gmarshall56 commented 3 years ago

I'm very sorry. I just discovered the qgis toolset last week. It took me some time poking around to figure out how to export a json file from a shape file. How / where is the info tool you speak of? qgisFAAsm

gmarshall56 commented 3 years ago

Is this what you're looking for? In qgis, on the command bar I click View -> Identify Features. I then click on the continental US and a listing pops up on the right. There are lots to scroll through.

QGISFAAJunk

calvinmetcalf commented 3 years ago

So whatever reason, your dataset had 30 different features on top of each other, that's why it's opaque

On Fri, Apr 30, 2021, 3:39 PM gmarshall56 @.***> wrote:

Is this what you're looking for? In qgis, on the command bar I click View -> Identify Features. I then click on the continental US and a listing pops up on the right. There are lots to scroll through.

[image: QGISFAAJunk] https://user-images.githubusercontent.com/5943189/116746252-31dd3280-a9ca-11eb-88e7-90d9f5b37d74.JPG

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-830336780, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRH3ZG4C4LYARBUORT4LTLMBO7ANCNFSM43X3HCWA .

gmarshall56 commented 3 years ago

Oh boy... Thank you for your time with this.

gmarshall56 commented 3 years ago

Thank you again for your time with my issue this past Friday. Just taking a shot here: By any chance does the Leaflet API have any kind of fill style such as you find in ArcGIS? https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#style

Just trying to find a way to display a shape file using geoJSON and avoid that complete color-over.

Thanks again.

calvinmetcalf commented 3 years ago

that would be a question for the https://github.com/Leaflet/Leaflet repo not this one ... but there is a plugin https://github.com/cloudybay/leaflet-polygon-fillPattern

On Mon, May 3, 2021 at 9:51 AM gmarshall56 @.***> wrote:

Thank you again for your time with my issue this past Friday. Just taking a shot here: By any chance does the Leaflet API have any kind of fill style such as you find in ArcGIS?

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#style http://url

Thanks again.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/calvinmetcalf/shapefile-js/issues/157#issuecomment-831272878, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAITRHZPML625BAQ4G34XM3TL2S5XANCNFSM43X3HCWA .

-- -Calvin W. Metcalf