Merge pull request #649 from etalab/tusbar/fix-map-for-empty-geojson

Display entire france for empty datasets

__tests__/lib/geo/bbox.js

@@ -1,4 +1,4 @@
-import {diffBbox, flipBbox, isBboxFlipped} from '../../../lib/geo/bbox'
+import {diffBbox, flipBbox, isBboxFlipped, isBboxValid} from '../../../lib/geo/bbox'
 
 describe('diffBbox', () => {
   it('should return 0 for equal bboxes', () => {
@@ -50,3 +50,40 @@ describe('isBboxFlipped', () => {
     expect(isBboxFlipped(bbox, flipped)).toBe(true)
   })
 })
+
+describe('isBboxValid', () => {
+  it('should return false if the bbox is infinite', () => {
+    const bbox = [Infinity, Infinity, -Infinity, -Infinity]
+
+    expect(isBboxValid(bbox)).toBe(false)
+  })
+
+  it('should return false if the bbox doesn’t have the correct length', () => {
+    const bbox = [1, 2, 3]
+
+    expect(isBboxValid(bbox)).toBe(false)
+  })
+
+  it('should return false if the bbox is out of bounds', () => {
+    const bbox = [-181, -31, 180, 34]
+
+    expect(isBboxValid(bbox)).toBe(false)
+  })
+
+  it('should return false if the bbox is flipped (and oob)', () => {
+    const bbox = [-31, -120, 42, 97]
+
+    expect(isBboxValid(bbox)).toBe(false)
+  })
+
+  it('should return true if the bbox is valid', () => {
+    const bboxes = [
+      [-180, -90, 180, 90],
+      [-8.789063, 40.178873, 14.062500, 52.321911]
+    ]
+
+    bboxes.forEach(bbox => {
+      expect(isBboxValid(bbox)).toBe(true)
+    })
+  })
+})

components/centered-map/empty.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {translate} from 'react-i18next'
+
+const Empty = ({t}) => (
+  <div>
+    {t('map.emptyDataset')}
+
+    <style jsx>{`
+      @import 'colors';
+
+      div {
+        display: inline-block;
+        background-color: $red;
+        color: $white;
+        padding: 8px;
+        border-radius: 2px;
+        text-align: center;
+        font-size: 12px;
+        line-height: 15px;
+      }
+    `}</style>
+  </div>
+)
+
+Empty.propTypes = {
+  t: PropTypes.func.isRequired
+}
+
+export default translate()(Empty)

components/centered-map/enhance-map-data.js

@@ -4,16 +4,16 @@ import hoist from 'hoist-non-react-statics'
 import computeBbox from '@turf/bbox'
 import flip from '@turf/flip'
 
-import {isBboxFlipped, flipBbox} from '../../lib/geo/bbox'
+import {isBboxFlipped, flipBbox, isBboxValid} from '../../lib/geo/bbox'
+
+const franceBbox = [-8.789063, 40.178873, 14.062500, 52.321911]
 
 export default Map => hoist(class extends React.PureComponent {
   static propTypes = {
     frozen: PropTypes.bool,
     extent: PropTypes.object,
     data: PropTypes.shape({
-      features: PropTypes.arrayOf(PropTypes.shape({
-        properties: PropTypes.object.isRequired
-      }))
+      features: PropTypes.array.isRequired
     }).isRequired
   }
 
@@ -37,6 +37,10 @@ export default Map => hoist(class extends React.PureComponent {
       }
     }
 
+    if (!isBboxValid(bbox)) {
+      bbox = franceBbox
+    }
+
     if (!frozen) {
       // We’re adding a unique id to all features so that we can easily identify them later.
 

components/centered-map/map.js

@@ -5,11 +5,14 @@ import mapStyle from 'mapbox-gl/dist/mapbox-gl.css'
 
 import enhanceMapData from './enhance-map-data'
 
+import Empty from './empty'
 import Feature from './feature'
 
 class CenteredMap extends React.Component {
   static propTypes = {
-    data: PropTypes.object.isRequired,
+    data: PropTypes.shape({
+      features: PropTypes.array.isRequired
+    }).isRequired,
     bbox: PropTypes.array.isRequired,
     frozen: PropTypes.bool.isRequired
   }
@@ -187,6 +190,7 @@ class CenteredMap extends React.Component {
 
   render() {
     const {highlight} = this.state
+    const {data} = this.props
 
     return (
       <div className='container'>
@@ -200,6 +204,12 @@ class CenteredMap extends React.Component {
           </div>
         )}
 
+        {data.features.length === 0 && (
+          <div className='info'>
+            <Empty />
+          </div>
+        )}
+
         <style
           dangerouslySetInnerHTML={{__html: mapStyle}} // eslint-disable-line react/no-danger
         />

components/dataset/spatial-extent.js

@@ -3,42 +3,41 @@ import PropTypes from 'prop-types'
 
 import CenteredMap from '../centered-map'
 
-const SpatialExtent = ({extent}) => {
-  const data = {
-    type: 'Feature',
-    geometry: extent
-  }
-
-  return (
-    <div>
-      <div className='map'>
-        <CenteredMap small data={data} frozen />
-      </div>
-
-      <style jsx>{`
-        @import 'colors';
-
-        .map {
-          width: 100%;
-          position: relative;
-          height: 250px;
+const SpatialExtent = ({extent}) => (
+  <div>
+    <div className='map'>
+      <CenteredMap small data={{
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          geometry: extent
+        }]
+      }} frozen />
+    </div>
 
-          @media (max-width: 1480px) {
-            height: 230px;
-          }
+    <style jsx>{`
+      @import 'colors';
 
-          @media (max-width: 1080px) {
-            height: 200px;
-          }
+      .map {
+        width: 100%;
+        position: relative;
+        height: 250px;
 
-          @media (max-width: 768px) {
-            height: 250px;
-          }
+        @media (max-width: 1480px) {
+          height: 230px;
         }
-      `}</style>
-    </div>
-  )
-}
+
+        @media (max-width: 1080px) {
+          height: 200px;
+        }
+
+        @media (max-width: 768px) {
+          height: 250px;
+        }
+      }
+    `}</style>
+  </div>
+)
 
 SpatialExtent.propTypes = {
   extent: PropTypes.object.isRequired

lib/geo/bbox.js

@@ -26,3 +26,14 @@ export function isBboxFlipped(bbox, referenceBbox) {
 
   return reversedDiff < diff
 }
+
+// Make sure the passed bbox is valid.
+export function isBboxValid(bbox) {
+  return (
+    bbox.length === 4 &&
+    bbox[0] >= -180 && bbox[0] <= 180 &&
+    bbox[2] >= -180 && bbox[2] <= 180 &&
+    bbox[1] >= -90 && bbox[1] <= 90 &&
+    bbox[3] >= -90 && bbox[3] <= 90
+  )
+}

locales/en/common.json

@@ -74,6 +74,7 @@
     "errors": {
       "noWebgl": "We couldn’t display this map because your browser doesn’t support WebGL"
     },
+    "emptyDataset": "This dataset is empty",
     "additionalFeature": "One more feature…",
     "additionalFeature_plural": "{{ count }} more features…"
   },

locales/fr/common.json

@@ -74,6 +74,7 @@
     "errors": {
       "noWebgl": "Nous ne pouvons pas afficher cette carte car votre navigateur ne supporte pas WebGL"
     },
+    "emptyDataset": "Ce jeu de données est vide",
     "additionalFeature": "Un objet de plus…",
     "additionalFeature_plural": "{{ count }} objets de plus…"
   },