aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 18:05:16 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 18:05:16 -0700
commitd9ac1837c3f1640a0b1daf201bf281cbc2f35bcb (patch)
treee8d4226265a7f18e511ee8a4b203f5850701045e /modern
parent00daddce89f70989baecd8725e6df9bc88257b53 (diff)
downloadetbsa-traccar-web-d9ac1837c3f1640a0b1daf201bf281cbc2f35bcb.tar.gz
etbsa-traccar-web-d9ac1837c3f1640a0b1daf201bf281cbc2f35bcb.tar.bz2
etbsa-traccar-web-d9ac1837c3f1640a0b1daf201bf281cbc2f35bcb.zip
Initial map zoom
Diffstat (limited to 'modern')
-rw-r--r--modern/src/MainMap.js37
1 files changed, 34 insertions, 3 deletions
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 1a8542a..d934c51 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,4 +1,4 @@
-import 'mapbox-gl/src/css/mapbox-gl.css';
+import 'mapbox-gl/dist/mapbox-gl.css';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import mapboxgl from 'mapbox-gl';
@@ -28,8 +28,8 @@ class MainMap extends Component {
const map = new mapboxgl.Map({
container: this.mapContainer,
style: 'https://cdn.traccar.com/map/basic.json',
- center: [25.65, 60.98],
- zoom: 0
+ center: [0, 0],
+ zoom: 1
});
map.on('load', () => this.mapDidLoad(map));
@@ -92,6 +92,37 @@ class MainMap extends Component {
'icon-allow-overlap': true
}
});
+
+ map.addControl(new mapboxgl.NavigationControl());
+
+ map.fitBounds(this.calculateBounds(), {
+ padding: 100,
+ maxZoom: 9
+ });
+ }
+
+ calculateBounds() {
+ if (this.props.data.features) {
+ const first = this.props.data.features[0].geometry.coordinates;
+ const bounds = [[...first], [...first]];
+ for (let feature of this.props.data.features) {
+ const longitude = feature.geometry.coordinates[0]
+ const latitude = feature.geometry.coordinates[1]
+ if (longitude < bounds[0][0]) {
+ bounds[0][0] = longitude;
+ } else if (longitude > bounds[1][0]) {
+ bounds[1][0] = longitude;
+ }
+ if (latitude < bounds[0][1]) {
+ bounds[0][1] = latitude;
+ } else if (latitude > bounds[1][1]) {
+ bounds[1][1] = latitude;
+ }
+ }
+ return bounds;
+ } else {
+ return [[0, 0], [0, 0]];
+ }
}
componentDidUpdate(prevProps) {