#25: add suport for MultiPolygons in search results

src/components/Search.js

@@ -38,7 +38,7 @@ class Search extends React.Component {
                 onMouseEnter={b(this.onSuggestionHighlightChange, result)}
                 onMouseLeave={b(this.onSuggestionHighlightChange, null)}>
               <span>{result.tags.name} </span><br/>
-              <span>({result.tags.type})</span>
+              <span>({result.geojson.type}, {result.tags.type})</span>
             </div>
           )}
         />

src/components/SearchResults.js

@@ -3,11 +3,12 @@ import { connect } from 'react-redux';
 import Point from 'fm3/components/SearchResults/Point';
 import Polyline from 'fm3/components/SearchResults/Polyline';
 import Polygon from 'fm3/components/SearchResults/Polygon';
+import MultiPolygon from 'fm3/components/SearchResults/MultiPolygon';
 
 class SearchResults extends React.Component {
 
   displayAsPoint(result) {
-    return result && (result.geojson.type === 'Point' || result.geojson.type === 'MultiPolygon');
+    return result && result.geojson.type === 'Point';
   }
 
   displayAsPolyline(result) {
@@ -18,6 +19,10 @@ class SearchResults extends React.Component {
     return result && (result.geojson.type === 'Polygon');
   }
 
+  displayAsMultiPolygon(result) {
+    return result && (result.geojson.type === 'MultiPolygon');
+  }
+
   render() {
     const { highlightedResult, selectedResult } = this.props;
 
@@ -32,6 +37,9 @@ class SearchResults extends React.Component {
         {this.displayAsPolygon(highlightedResult) &&
           <Polygon searchResult={highlightedResult} theme="highlighted" />
         }
+        {this.displayAsMultiPolygon(highlightedResult) &&
+          <MultiPolygon searchResult={highlightedResult} theme="highlighted" />
+        }
         {this.displayAsPoint(selectedResult) &&
           <Point searchResult={selectedResult} theme="selected" />
         }
@@ -41,6 +49,9 @@ class SearchResults extends React.Component {
         {this.displayAsPolygon(selectedResult) &&
           <Polygon searchResult={selectedResult} theme="selected" />
         }
+        {this.displayAsMultiPolygon(selectedResult) &&
+          <MultiPolygon searchResult={selectedResult} theme="selected" />
+        }
       </div>
   );
   }

src/components/SearchResults/MultiPolygon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Polygon as LeafletPolygon } from 'react-leaflet';
+
+export default function MultiPolygon({ searchResult, theme }) {
+
+  let polygonsLatLons = [];
+  searchResult.geojson.coordinates.forEach( polygonCoords => {
+    const polygonLatLons = polygonCoords[0].map(lonlat => {
+      return L.latLng(lonlat[1], lonlat[0]);
+    });
+    polygonsLatLons.push(polygonLatLons);
+  });
+
+  let leafletOptions = { fillColor: 'grey', color: 'grey' };
+  if  (theme == 'selected') {  
+    leafletOptions = { fillColor: 'green', color: 'green' };
+  }
+  return (
+    <div>
+    { 
+      polygonsLatLons.map(p => {
+        return <LeafletPolygon positions={p} {...leafletOptions} />;
+      })
+    }
+    </div>
+
+  );
+}
+
+MultiPolygon.propTypes = {
+  searchResult: React.PropTypes.any,
+  theme: React.PropTypes.oneOf([ 'selected', 'highlighted' ])
+};

src/components/SearchResults/Polygon.js

@@ -4,8 +4,8 @@ import { Polygon as LeafletPolygon } from 'react-leaflet';
 export default function Polygon({ searchResult, theme }) {
 
   const rawLatLons = searchResult.geojson.coordinates[0];
-  const latlongs = rawLatLons.map( latlon => {
-    return L.latLng(latlon[1], latlon[0]);
+  const latlongs = rawLatLons.map( lonlat => {
+    return L.latLng(lonlat[1], lonlat[0]);
   });
 
   let leafletOptions = { fillColor: 'grey', color: 'grey' };