-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Description
Bug
I have a problem with the styles of the Geojson component. In particular, I want to color each region defined in my Geojson differently. The most correct way to do this would be to insert the coloring information into each of the fields described inside my Geojson.
For example, a fragment of my Geojson is the following:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "NOME_PRO": "Vercelli" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.204465116243027, 45.935674757317109 ], [ 8.21365072164437, 45.92489733200518 ], [ 8.214200107142609, 45.924293582669129 ]
{ "type": "Feature", "properties": { "NOME_PRO": "Novara" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.496878361658412, 45.839339254487463 ], [ 8.499961367023298, 45.834024455596889 ], [ 8.506175315288152, 45.834699533565725 ]
{ "type": "Feature", "properties": { "NOME_PRO": "Torino" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 7.859044264361275, 45.597584443876684 ], [ 7.862276742039936, 45.596988126359228 ], [ 7.864714948613774, 45.59730902427011 ], ..., ] ] ] } },
{ "type": "Feature", "properties": { "NOME_PRO": "Cuneo" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 7.99089719465156, 44.82381138833528 ], [ 7.993475200512044, 44.819292564238879 ], [ 7.994720953466681, 44.81820528283221 ], ..., ] ] ] } },
{ "type": "Feature", "properties": { "NOME_PRO": "Aosta" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 7.588571915813588, 45.970750850433717 ], [ 7.589811583975063, 45.970730158051595 ], [ 7.591398293949593, 45.970767738953761 ], ..., ] ] ] } },
{ "type": "Feature", "properties": { "NOME_PRO": "Imperia" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 7.760725422734667, 43.807508980260067 ], [ 7.758896263653842, 43.807810445894226 ], [ 7.758793415090511, 43.807823959724175 ], ..., ] ] ] } },
]
}
The coloring properties have NOT been defined in the above Geojson fragment.
I tried to add them manually, then in the code I will do it programmatically, but before proceeding I would like to see that the styles are applied.
Attempt number 1.
At first, I tried by adding "fill": "#xxxxxx", "fill-opacity": 0.5
inside the properties
filed inside each features
object:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "NOME_PRO": "Vercelli", "fill": "#00aa22", "fill-opacity": 0.5 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.204465116243027, 45.935674757317109 ], [ 8.21365072164437, 45.92489733200518 ], [ 8.214200107142609, 45.924293582669129 ]
{ "type": "Feature", "properties": { "NOME_PRO": "Novara", "fill": "#7987ff", "fill-opacity": 0.5 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.496878361658412, 45.839339254487463 ], [ 8.499961367023298, 45.834024455596889 ], [ 8.506175315288152, 45.834699533565725 ]
...
]
}
But it did not work.
Attempt number 2.
I tried also by creating a new style
inside each feature
object and declaring "fill": "#xxxxxx", "fill-opacity": 0.5
:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "NOME_PRO": "Vercelli" }, style: {"fill": "#00aa22", "fill-opacity": 0.5}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.204465116243027, 45.935674757317109 ], [ 8.21365072164437, 45.92489733200518 ], [ 8.214200107142609, 45.924293582669129 ]
{ "type": "Feature", "properties": { "NOME_PRO": "Novara"}, style: {"fill": "#7987ff", "fill-opacity": 0.5}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.496878361658412, 45.839339254487463 ], [ 8.499961367023298, 45.834024455596889 ], [ 8.506175315288152, 45.834699533565725 ]
...
]
}
But also it did not work.
This is how I am using <MapView/>
and <Geojson/>
components:
import MapView, {Geojson} from "react-native-maps";
import province from '../../src/geoJsons/Italia/province/province.json';
export default class Map extends Component {
...
render() {
return(
...
<MapView style={styles.map}
ref={ref => this.map = ref}
region={this.state.region}
zoomEnabled={false}
pitchEnabled={false}
zoomTapEnabled={false}
zoomControlEnabled={false}
scrollEnabled={false}
rotateEnabled={false}
showsUserLocation={true}
followUserLocation={true}
showsMyLocationButton={true}
enableZoomControl={true}
mapType={'hybrid'}
initialRegion={{
provider: undefined,
latitude: this.state.region.latitude,
longitude: this.state.region.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
showTraffic: true,
}}
>
<Geojson
geojson={province}
//fillColor="rgba(76, 175, 80, 0.3)"
strokeColor="yellow"
strokeWidth={2}
/>
</MapView>
...
)
}
}
Finally I'm solving by breaking the Geojson file into multiple files, inside each of the files there will be a single feature. Then declaring for each Geojson a different fill color in the properties of the Geojson component. It doesn't seem like a job well done, but at the moment I can't do better.
This is working, but it is not a great solution since I have more 80 provinces:
import MapView, {Geojson} from "react-native-maps";
import province1 from '../../src/geoJsons/Italia/province/province1.json';
import province2 from '../../src/geoJsons/Italia/province/province2.json';
import province3 from '../../src/geoJsons/Italia/province/province3.json';
...
import province80 from '../../src/geoJsons/Italia/province/province80.json';
export default class Map extends Component {
...
render() {
return(
...
<MapView style={styles.map}
ref={ref => this.map = ref}
region={this.state.region}
zoomEnabled={false}
pitchEnabled={false}
zoomTapEnabled={false}
zoomControlEnabled={false}
scrollEnabled={false}
rotateEnabled={false}
showsUserLocation={true}
followUserLocation={true}
showsMyLocationButton={true}
enableZoomControl={true}
mapType={'hybrid'}
initialRegion={{
provider: undefined,
latitude: this.state.region.latitude,
longitude: this.state.region.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
showTraffic: true,
}}
>
<Geojson
geojson={province1}
fillColor="rgba(76, 175, 80, 0.3)"
strokeColor="yellow"
strokeWidth={2}
/>
<Geojson
geojson={province2}
fillColor="rgba(90, 30, 80, 0.3)"
strokeColor="yellow"
strokeWidth={2}
/>
<Geojson
geojson={province3}
fillColor="rgba(20, 50, 100, 0.3)"
strokeColor="yellow"
strokeWidth={2}
/>
...
<Geojson
geojson={province80}
fillColor="rgba(80, 60, 10, 0.3)"
strokeColor="yellow"
strokeWidth={2}
/>
</MapView>
...
)
}
}
Library react-native-maps
has been installed via yarn add react-native-maps --save
and then cd ios && pod install && cd ..
.
Environment info
react-native info
output:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
Memory: 19.88 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.15.0 - ~/.nvm/versions/node/v12.15.0/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.15.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 26, 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom_64, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-R | Google APIs Intel x86 Atom_64, android-R | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
Languages:
Python: 3.7.4 - /Users/me/anaconda3/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.0 => 0.62.0
npmGlobalPackages:
*react-native*: Not Found
Library version: 0.27.1