Flutter로 지도를 넣는 경우가 있습니다. 이때 가장 추천하는 것이 바로 Mapbox를 이용하는 것인데요, 커스텀이 자유롭고 전 세계가 커버된다는 점에서 Google맵과 네이버 지도보다 선호됩니다.
오늘은 "flutter_map" package를 이용하여 IOS앱에 Mapbox를 불러와보겠습니다.
https://pub.dev/packages/flutter_map
https://www.mapbox.com
여기서 회원가입을 진행합니다.
일정량의 API 콜까진 무료이니 안심하셔도 됩니다.
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을 저장해둡니다.
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(),
),
),
],
),
],
),
);
}
}
flutter_map: ^0.14.0