Hướng dẫn Posts

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!!

Hướng dẫn viết 1 app Android cơ bản với Goong SDK

Trong bài tiếp theo này, các bạn sẽ được hướng dẫn cách dùng Goong SDK để build một ứng dụng dùng map cơ bản cho Android. Đến cuối tutorial, các bạn đã có thể hoàn thành một app với các chức năng map view, tìm kiếm với đề xuất kết quả và ghim pin trên bản đồ.

Full source code available at https://github.com/goong-io/Goong-Android-Example
*Xin lưu ý là chỉ các thiết bị Android phiên bản 4.0 trở lên được hỗ trợ

Phần 1: MapView


Bước 1:
Tạo 1 Project trong Android Studio

Thêm đoạn code sau vào file build.gradlecho Project (không phải cho module):

allprojects {
	repositories {
		...
    maven {
      url  "https://dl.bintray.com/goong-io/GoongMapSDK"
    }
    // or jcenter()
	}
}

Add thêm thư viện vào file:

dependencies {
  implementation('io.goong.goongsdk:goong-android-sdk:2.1.0'){
    transitive=true
  }
}

Bước 2:
Tạo keys (Để sử dụng được SDK và API, các bạn cần keys/token. Hãy truy cập vào account.goong.io để tạo tài khoản, rồi tạo keys tại https://account.goong.io/keys. Xin lưu ý là bài hướng dẫn này cần key cho Map Tiles.)

Bước 3:
Tạo MapView đơn giản

Điền key/token đã được tạo tại {YOUR_GOONG_ACCESS_TOKEN}:

public class MyApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();

    // Goong Access token
    Goong.getInstance(getApplicationContext(), 
       {YOUR_GOONG_ACCESS_TOKEN});
  }
}

Đăng ký custom Class Application trong AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <application
   android:name=".MyApplication"
   ...>
   ...
   <service android:name="io.goong.goongsdk.telemetry.TelemetryService" />
 </application>

Thêm fragment vào Activity_maps.xml. Fragment này xác định SupportMapFragment hoạt động như một container cho bản đồ và để cung cấp quyền truy cập vào đối tượng GoongMap.

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/map"
  android:name="io.goong.goongsdk.maps.SupportMapFragment"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.mapwithmarker.MapsMarkerActivity" />

Tại method onCreate()trong map activity, set content view bằng file layout:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Retrieve the content view that renders the map.
    setContentView(R.layout.activity_maps);
    // Get the SupportMapFragment and request notification
    // when the map is ready to be used.
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
            .findFragmentById(R.id.map);
    mapFragment.getMapAsync(this);
}

Implement interface OnMapReadyCallBack, override method onMapReady(). Gắn marker lên Map :

public class MapsMarkerActivity extends AppCompatActivity
        implements OnMapReadyCallback {
    // Include the OnCreate() method here too, as described above.
    @Override
    public void onMapReady(GoongMap goongMap) {
        // Add a marker in Hanoi, Vietnam,
        // and move the map's camera to the same location.
        LatLng hanoi = new LatLng(21.0217827, 105.7942671);
        goongMap.addMarker(new MarkerOptions().position(hanoi)
                .title("Marker in Hanoi"));
        goongMap.moveCamera(CameraUpdateFactory.newLatLng(hanoi));
    }
}

Phần 2: Goong Geocoder

Goong Geocoder là thư viện front-end cho Goong Autocomplete. Sau khi tích hợp nó vào thì người dùng app của bạn có thể dễ dàng tìm kiếm địa điểm trên thanh SearchBox, với những đề xuất kết quả được update liên tục khi gõ từ khóa.

Source code: https://github.com/goong-io/Goong-Geocoder-Android

Để tích hợp Goong Geocoder cho Android:

Thêm dòng này vào file gradle và build lại:

implementation 'io.goong.goongsdk.geocoder:goong-android-geocoder:1.0'

Tạo API Key để gọi (như trên nhưng thay vì chọn Maptile Key, chọn API key)

Có 2 cách để sử dụng Geocoder có sẵn: dùng Activity hoặc Fragment

Start Activity for result:
Intent intent = new PlaceAutocomplete.IntentBuilder()
    .apiKey("Your Api Key")
    .placeOptions(new PlaceOptions.Builder()
                    .limit(20)
                    .location(21.0278, 105.8342) // your lat-long to improve search results
                    .build()
    )
    .build(this);
  startActivityForResult(intent, 100);

Lấy kết quả trả về qua onActivityResult:

@Override
  protected void onActivityResult(final int requestCode, final int resultCode, @Nullable final Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      if (requestCode == 100 && data != null && resultCode == Activity.RESULT_OK) {
          PlaceDetails details = PlaceAutocomplete.getPlaceDetail(data);
          Log.e("Test", details.toString());
          Toast.makeText(this, details.name + "", Toast.LENGTH_SHORT).show();
      }
  }
Add Fragment
AutocompleteFragment autocompleteFragment = AutocompleteFragment.newInstance("Your API Key",
          new PlaceOptions.Builder().build());
  autocompleteFragment.setOnPlaceSelectedListener(details -> {
        Log.e("Test", details.toString());
        Toast.makeText(this, details.name + "", Toast.LENGTH_SHORT).show();
  });
  // add/replace your fragment into your view
Place Options:
  • Ta có thể điều chỉnh kết quả tìm kiếm bằng `PlaceOptions`
new PlaceOptions.Builder()
      .limit(20) // limit the results returned
      .location(21.0278, 105.8342) // your lat-long location to improve search results. This is recommended
      .radius(2500) // results will be in the radius from the location you provided above
      .build()

Hướng dẫn viết 1 app iOS cơ bản với Goong SDK

Trong bài hôm nay, các bạn sẽ được hướng dẫn cách dùng Goong SDK để build một ứng dụng dùng map cơ bản cho iOS. Đến cuối tutorial, các bạn đã có thể hoàn thành một app với các chức năng map view, tìm kiếm với đề xuất kết quả và ghim pin trên bản đồ.

Full source code available at https://github.com/goong-io/Goong-iOS-Example

Bước 1:

  • Tạo Project Xcode và chạy các lệnh sau:
cd YourProject/
pod init

thêm dòng sau vào Podfile:

pod 'GoongSDK'

chạy

pod update

Để dùng được SDK và API, các bạn cần keys/token. Hãy truy cập vào account.goong.io để tạo tài khoản, rồi tạo keys tại https://account.goong.io/keys. Xin lưu ý là cần 1 key cho API và 1 key cho Map Tiles.

  • Mở YourProject.xcworkspace
  • Điền key Map Tiles vào Info.plist tại YOUR_ACCESS_TOKEN như sau:

Bước 2 — Tạo MapView: (https://docs.goong.io/guide/ios)

  • Điền NSLocationWhenInUseUsageDescriptionvào Info.plist
  • Import GoongSDK

Swift: import GoongSDK

Objective C: @import GoongSDK

  • Tạo MapView trong viewDidLoad()
import UIKit
import GoongSDK

class ViewController: UIViewController, MGLMapViewDelegate {

override func viewDidLoad() {
super.viewDidLoad()
let mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.delegate = self
// View more style at MGLStyle.h
mapView.styleURL = MGLStyle.dayStyleURL
// Optionally set a starting point.
mapView.setCenter(CLLocationCoordinate2DMake(21.028511, 105.804817), zoomLevel: 12, animated: false)
mapView.myLocationEnabled = true

view.addSubview(mapView)
}
}

Chúc mừng! Sau khi build thì bạn đã có một ứng dụng hiển thị MapView đơn giản, có hỗ trợ các tương tác zoom và scroll.

Bước 3 — Tạo SearchBar với Autocomplete

  • thêm dòng sau vào Podfile:
pod 'GoongGeocoder'

sau đó chạy

pod update

Import GoongGeocoder vào ViewController

import GoongGeocoder

Tạo một Search Button:

let searchButton = UIButton(frame: CGRect(x: view.frame.size.width - 100 , y: 50, width: 80, height: 30))  
searchButton.setTitle("Search", for: .normal)
searchButton.backgroundColor = .darkGray
searchButton.setTitleColor(.white, for: .normal)
searchButton.addTarget(self, action: #selector(self.search), for: .touchUpInside)
view.addSubview(searchButton)

Cung cấp API key mà các bạn đã tạo sau accessToken:

@objc func search() {  
let vc = GoongAutocompleteViewController(accessToken: "insert API key here")
let nav = UINavigationController(rootViewController: vc)
vc.delegate = self
self.present(nav, animated: true, completion: nil)
}

Build and Run!

Bước 4 — Ghim Pin trên Map :

Thêm pin icon vào Assets.xcassets.

Download icon

Implement GoongAutocompleteDelegate để xử lý lựa chọn kết quả trong autocomplete:

class ViewController: UIViewController, MGLMapViewDelegate, GoongAutocompleteDelegate {  
.....func viewController(_ viewController: GoongAutocompleteViewController, didAutocompleteWith place: Placemark?) {
guard let place = place else {return}
let marker = MGLMarker()
marker.coordinate = place.location!.coordinate
marker.title = place.name
marker.reuseIdentifier = "markerIdentifier"
marker.icon = UIImage(named: "pin")!
marker.map = self.mapView
// Move map camera to marker coordinate
self.mapView.setCenter(marker.coordinate, animated: true)
}
}

Thêm vài dòng code cho việc xử lý lỗi:

func viewController(_ viewController: GoongAutocompleteViewController, didFailAutocompleteWithError error: Error?) {
print(error)
}

Chúc mừng các bạn đã hoàn thành bài 1 của series blog hướng dẫn sử dụng Goong SDK. Xin cảm ơn và hẹn gặp lại vào các bài hướng dẫn sắp tới 🙂

Goong
Goong Documents
Goong Account