Flutter Mapbox

스타트퓨쳐·2022년 2월 3일
1
post-thumbnail

Flutter로 지도를 넣는 경우가 있습니다. 이때 가장 추천하는 것이 바로 Mapbox를 이용하는 것인데요, 커스텀이 자유롭고 전 세계가 커버된다는 점에서 Google맵과 네이버 지도보다 선호됩니다.

오늘은 "flutter_map" package를 이용하여 IOS앱에 Mapbox를 불러와보겠습니다.

1. 패키지를 설치합니다.

https://pub.dev/packages/flutter_map

2. Mapbox 회원가입

https://www.mapbox.com
여기서 회원가입을 진행합니다.
일정량의 API 콜까진 무료이니 안심하셔도 됩니다.

3. 사용할 Mapbox 지도 생성 및 설정

https://studio.mapbox.com 에 들어갑니다.
1) Style을 생성해줍니다. 원하시는 지도로 해주시면 됩니다. 저는 "Outdoors"로 했습니다.

<이제부터 총 3가지 값들을 저장해두셨다가 아래 코드에 넣어주시면 됩니다.>

2) 공유 버튼을 누르신 후, "Developer resources" > "Third Party" > "CARTO" 선택후, Integration URL를 저장해둡니다.

3) Tileset으로 들어가 원하시는 종류의 Tileset ID를 저장해둡니다.

4) https://account.mapbox.com 로 들어가 Access Token을 저장해둡니다.

4. 코드로 API 콜

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart'; // 추가로 import 해줍니다.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
    
    // 여기부터 보시면 됩니다. 
    
    
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(51.5, -0.09), // 지도의 초기중심
          zoom: 13.0, // 지도의 초기배율
        ),
        layers: [
          TileLayerOptions(
              urlTemplate: "Integration URL"
              additionalOptions: {
                'accessToken': "Access Token",
                'id': "Tileset ID"
              }),
              // 마커 설정
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.5, -0.09),
                builder: (ctx) => Container(
                  child: FlutterLogo(),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

5. Dependencies

flutter_map: ^0.14.0

profile
견디고 쓰다보면 늘어나는 코딩실력

0개의 댓글