CODEWITHSUNDEEP
xmlreactjsgoogle-mapskml
Sujay
Sujay

Reputation: 599

How to apply opacity to KML layer on top of Google Maps in the React framework?

I am confronted with 2 problems : 1. How do I apply opacity to a KML layer on top of Google Maps using the React framework ? 2. I have a set of 731 images that are called by the KML layer and Google exiges that these images need to be accessible via a publically accessible URL. I hosted them on AWS S3 but I have already used up the free quota and I am only testing locally on my computer. If I have hundreds or thousands of users tomorrow, how do I implement a scalable solution ?

Development environment : React v16.6.1, react-google-maps/api v1.6.0, node v10.10.0, MacBook Pro 13 inches early 2011

I tried the following things : 1. Apply opacity using a CSS class in React. 2. Apply opacity using a CSS ID in React.

Someone suggested modifying the opacity of images by converting them into .png first and then calling them via a KML file. But to do 731 images is fastidious.

Here is a minimal reproduction of the problem on codesandbox : https://codesandbox.io/embed/jolly-wilson-slhed

return (
<LoadScript
googleMapsApiKey="Google Maps API Key"
>
<GoogleMap
center={{ lat: this.state.lat, lng: this.state.lng }}
mapContainerStyle={mapContainerStyle}
options={mapOptions}
zoom={4}>

<KmlLayer
url="https://nightskybrightness.s3.eu-west- 
3.amazonaws.com/artificialNightSkyBrightness_example.kml">
</KmlLayer>

</GoogleMap>
</LoadScript>
)

Expected results : KML layer with 40% opacity and a solution that is scalable for hundreds or thousands of users.

Actual results : KML with 100% opacity and I have already consumed by free quota on AWS S3.

Upvotes: 0

Views: 707

Answers (1)

Gael
Gael

Reputation: 91

with the CSS approach, in your codesandbox example, in file styles.css add the following css rule:

.App img[src*='googleusercontent.com']{
  opacity: .4;
}

To implement a scalable solution, i strongly recommend you to put a CDN between your end users and amazon S3. I personally use Cloudflare and there is a free plan. give it a try!

Upvotes: 1

Related Questions