Covid-19 tracker với Goong Maps SDK, ReactJS

https://corona.goong.io

Bài viết hôm nay sẽ giúp các bạn tạo 1 live tracker cho những vùng dịch được cảnh báo (dữ liệu từ Bộ Y Tế) với Goong Maps ReactJS.

Bước 1: Download project

https://github.com/goong-io/goong-covid19

Trước khi bắt đầu, các bạn cần tạo 1 key/access token cho Goong Tiles tại https://account.goong.io/keys (xin vui lòng tạo tài khoản nếu bạn chưa có)

tạo file .env trong thư mục goong-covid19 với nội dung như sau:

REACT_APP_GOONG_MAP_TILES_KEY='YOUR_KEY'

sau đó chạy

npm install

Bước 2: Tạp Mapview với Goong Maps React

import MapGL {Marker, NavigationControl} from '@goongmaps/goong-map-react';

 <MapGL
                {...viewport}
                width="100vw"
                height="100vh"
                minZoom={1}
                goongApiAccessToken={process.env.REACT_APP_GOONG_MAP_TILES_KEY}
                mapStyle="https://tiles.goong.io/assets/goong_map_web.json"
                onViewportChange={this._onViewportChange}
            >
                <div style={{ position: 'absolute', right: 10, top: 30 }}>
                    <NavigationControl />
                </div>                  
                {this.props.points.length > 0 ? <Markers data={this.props.points} /> : null}
            </MapGL>

Xem Map.js

Chạy npm start

Done!!