这是indexloc提供的服务,不要输入任何密码
Skip to content

Different styles cannot be specified for different Geojson regions #3385

@strawberry-code

Description

@strawberry-code

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions