[step-5.4] Refresh overpass when moving / zooming

makinacorpus · Nov 21, 2017 · 07b9e8d · 07b9e8d
1 parent 1d22093
commit 07b9e8d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/create-react-app/src/App.js b/create-react-app/src/App.js
@@ -15,13 +15,13 @@ class App extends React.Component {
     search: 'Toulouse',
     markers: [],
     geojson: undefined,
-    loading: true
+    loading: true,
+    bbox: undefined
   };
   inputUncontrolled = {};
 
   componentWillMount() {
     this.getNominatimData(this.state.value);
-    this.getGeoJSONData();
   }
   handleChange = (e) => {
     this.setState({ value: e.target.value });
@@ -37,13 +37,16 @@ class App extends React.Component {
     e.preventDefault();
     this.getNominatimData(this.inputUncontrolled.value);
   }
+  handleChangeBBox = (bbox) => {
+    this.setState({ bbox: bbox}, this.getGeoJSONData);
+  }
   getNominatimData(search) {
     nominatimService.getNominatimData(search)
       .then((markers) => this.setState({markers: markers}));
   }
   getGeoJSONData() {
     this.setState({ loading: true });
-    overpassService.getOverpassData()
+    overpassService.getOverpassData(this.state.bbox)
       .then((geojson) => {
         this.setState({
           geojson: geojson,
@@ -65,6 +68,7 @@ class App extends React.Component {
           inputValue={this.state.search}
           data={this.state.markers}
         />
+
         OverpassResults
         <OverpassResults
           geojson={this.state.geojson}
@@ -74,6 +78,7 @@ class App extends React.Component {
           id="map"
           markers={this.state.markers}
           geojson={this.state.geojson}
+          changeBBox={this.handleChangeBBox}
         />
       </div>
     );

diff --git a/create-react-app/src/components/Map/index.js b/create-react-app/src/components/Map/index.js
@@ -45,6 +45,11 @@ class Map extends React.Component {
   componentDidMount() {
     this.map = L.map(this.props.id).setView([43.604268, 1.441019], 13);
 
+    this.map.on('zoomend moveend', () => {
+      this.props.changeBBox(this.map.getBounds());
+    });
+    this.props.changeBBox(this.map.getBounds());
+
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(this.map);

diff --git a/create-react-app/src/services/overpass.js b/create-react-app/src/services/overpass.js
@@ -1,13 +1,29 @@
 import axios from 'axios';
 import osmtogeojson from 'osmtogeojson';
 
-const OVERPASS_URL = 'http://overpass-api.de/api/interpreter?'
-const DEFAULT_QUERY = 'data=[out:xml];(way[%22leisure%22=%22park%22](43.54506428956427,1.3108062744140625,43.663525432098275,1.571388244628906););out%20body;%3E;out%20skel%20qt;';
+const OVERPASS_URL = 'http://overpass-api.de/api/interpreter?';
+const DEFAULT_BBOX = '43.54506428956427,1.3108062744140625,43.663525432098275,1.571388244628906';
+
+function getQuery(bbox = DEFAULT_BBOX) {
+    let bboxString = '';
+    if (bbox === DEFAULT_BBOX) 
+        bboxString = DEFAULT_BBOX;
+    else
+        bboxString = 
+            bbox.getSouth() + ',' +
+            bbox.getWest() + ',' +
+            bbox.getNorth() + ',' +
+            bbox.getEast();
+
+    return 'data=[out:xml];(way[%22leisure%22=%22park%22]('
+        + bboxString
+        + '););out%20body;%3E;out%20skel%20qt;';
+}
 
 class OverpassService {
-    getOverpassData() {
-        return axios.get(OVERPASS_URL + DEFAULT_QUERY)
-        .then(function (response) {
+    getOverpassData(bbox) {
+        return axios.get(OVERPASS_URL + getQuery(bbox))
+            .then(function (response) {
                 var osmGeojson = osmtogeojson(new DOMParser().parseFromString(response.data, 'text/xml'));
                 return osmGeojson;
             })