From d04cd5a9ca34f0528f3db6361641d20bc1a13320 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 1 Jun 2020 23:42:35 -0700 Subject: Add raster map layer --- modern/src/MainMap.js | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) (limited to 'modern/src/MainMap.js') diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js index aea6dd8..fdc193c 100644 --- a/modern/src/MainMap.js +++ b/modern/src/MainMap.js @@ -37,11 +37,43 @@ const mapStateToProps = state => ({ class MainMap extends Component { componentDidMount() { - const map = new mapboxgl.Map({ + /*const map = new mapboxgl.Map({ container: this.mapContainer, style: 'https://cdn.traccar.com/map/basic.json', center: [0, 0], zoom: 1 + });*/ + + const map = new mapboxgl.Map({ + container: this.mapContainer, + style: { + 'version': 8, + 'sources': { + 'raster-tiles': { + 'type': 'raster', + 'tiles': [ + 'https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png', + 'https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png', + 'https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png', + 'https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png' + ], + 'tileSize': 256, + 'attribution': '© OpenStreetMap contributors, © CARTO' + } + }, + 'glyphs': 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf', + 'layers': [ + { + 'id': 'simple-tiles', + 'type': 'raster', + 'source': 'raster-tiles', + 'minzoom': 0, + 'maxzoom': 22 + } + ] + }, + center: [0, 0], + zoom: 1 }); map.on('load', () => this.mapDidLoad(map)); -- cgit v1.2.3