title: How to - multiple polylines with different colors for each polyline- react-leaflet
body: <p>I'm building a small react app with Leaflet and React for showing different metro stations for Vienna. </p>
  
  <p>The problem I came to was how to edit the colors for individual metro lines in react-leaflet. <a href="https://i.stack.imgur.com/8kuPw.png" rel="nofollow noreferrer">Image of the map with different metro lines.</a>
  Now they are all in red, I would like to customize the colors with the colors of the circles.</p>
  
  <p>The colors, name and the coordinates of each metro station are edited in the GeoJSON file.</p>
  
  <p>GeoJSON file (<strong><em>vienna_metro_lines_byLines.geojson</em></strong>)</p>
  
  <pre><code>{
    "type": "FeatureCollection",      
  
    "features": [
      { "type": "Feature", "id": "01", "properties": { "name": "U1", "color": "red" },
        "geometry": { "type": "MultiLineString", "coordinates":
          [
            [ 48.1423652, 16.3999045 ], [ 48.1458145, 16.3856390 ], [ 48.1537071, 16.3824464 ], 
          ]
        }
      },
      { "type": "Feature", "id": "02", "properties": { "name": "U2", "color": "#9933ff" },
        "geometry": { "type": "MultiLineString", "coordinates":
          [
            [ 48.2262470, 16.5084951 ], [ 48.2345713, 16.5044830 ], [ 48.2334553, 16.4854766 ],
          ]
   }
  </code></pre>
  
  <p>Component file</p>
  
  <pre><code>//data
  import geojsonDataByLines from './vienna_metro_lines_byLines.geojson';
  
  //main component
  class ViennaPoliLynes extends Component {
    constructor() {
      super();
      this.state = {
          geojsonDataByLines: geojsonDataByLines
  
      };
    }
  
    polylineLineMaker() {
      const geojsonDataByLines = this.state.geojsonDataByLines;
  
      const testMe = geojsonDataByLines.features.map((cord) =&gt; {
          return cord.geometry.coordinates;
      });
      return testMe;
    }
  
    polylineLineColor() {
      //The color for the polylines shoud go here 
      const geojsonDataByLines = this.state.geojsonDataByLines;
  
      const testMe = geojsonDataByLines.features.map((cord) =&gt; {
          return cord.properties.color;
      });
      console.log(testMe)
      return testMe;    
    }
  
    render() {
      return (
          &lt;Polyline positions={this.polylineLineMaker()} color={this.polylineLineColor()}&gt;
  
          &lt;/Polyline&gt;
      );
    }
  }
  </code></pre>
  
  <p>Ty. For your time.</p>