今回は、mapbox_searchを使って店舗の情報をPinに表示させるについて紹介しようと思います。

初めに

MapBoxにおいて基礎についてです。これらを参考にしてもらえるといいと思います。

mapbox_searchについて

ここのpackageを使用します。
https://pub.dev/packages/mapbox_search

解説コード

コードを書くにおいて、必要なpackageを記載しておきます。

https://pub.dev/packages/geocoding
https://pub.dev/packages/geolocator
https://pub.dev/packages/location
https://pub.dev/packages/mapbox_gl

// Dart imports:
import 'dart:async';

// Flutter imports:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:geocoding/geocoding.dart';
import 'package:geolocator/geolocator.dart';
import 'package:location/location.dart' as location;
import 'package:mapbox_search/mapbox_search.dart' as map_box_search;

// Package imports:
import 'package:mapbox_gl/mapbox_gl.dart';
import 'package:mapbox_search/mapbox_search.dart';

class MapScreen extends StatefulWidget {
  const MapScreen({Key? key}) : super(key: key);

  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final List<String> restaurantList = [];
  final Completer<MapboxMapController> controller = Completer();
  final double initialLat = 0;
  final double initialLong = 0;
  location.LocationData? yourLocation;

  @override
  Future<void> initState() async {
    super.initState();
    getLocation();

    restaurantList.clear();
    final placesService = PlacesSearch(
      apiKey: 'mapBoxで取得したAPIKEYをここに入力する',
      country: 'JP',
      limit: 10,
      types: PlaceType.poi,
    );
    final position = await Geolocator.getCurrentPosition();
    final restaurants = await placesService.getPlaces(
      'restaurant',
      location: map_box_search.Location(
        lat: position.latitude,
        lng: position.longitude,
      ),
    );
    for (var i = 0; i < 10; i++) {
      restaurantList.add(restaurants![i].toString());
      final address = restaurants[i].properties!.address;
      final restaurant = restaurantList[i];
      final locations = await locationFromAddress(address!);
      await controller.future.then(
        (mapBoxMap) {
          mapBoxMap.addSymbol(
            SymbolOptions(
              geometry: LatLng(
                locations.first.latitude,
                locations.first.longitude,
              ),
              textField: restaurant,
              textAnchor: 'top',
              textHaloWidth: 3,
              textSize: 12,
              iconImage: 'pin',
              iconSize: 0.8,
              iconAnchor: 'top',
              iconHaloBlur: 100,
              iconHaloColor: '#FFF',
              iconOffset: const Offset(0, -55),
            ),
          );
        },
      );
    }
  }
  
  Future<void> getLocation() async {
    yourLocation = await locationService.getLocation();
    locationChangedListen = locationService.onLocationChanged.listen(
      (location.LocationData result) async {
        yourLocation = result;
        gpsTracking = true;
      },
    );
    notifyListeners();
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Scaffold(
        backgroundColor: Colors.white,
        body: ClipRRect(
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
          child: (yourLocation == null)
              ? const Center(
                  child: CircularProgressIndicator(),
                )
              : MapboxMap(
                  styleString: 'MapBox内のStyleを入れてあげる',
                  initialCameraPosition: CameraPosition(
                    target: LatLng(
                      yourLocation!.latitude ?? initialLat,
                      yourLocation!.longitude ?? initialLong,
                    ),
                    zoom: 13.5,
                  ),
                  onMapCreated: controller.complete,
                  myLocationEnabled: true,
                ),
        ),
      ),
    );
  }
}

最後に

Verooは、Blockchain技術を活用した「想いの巡るグルメSNSアプリ」です。食に対する熱量、例えばラーメンがめちゃくちゃ好きで年間400杯食べているとか、変態的に具材にこだわった中華料理を作っているなどのような、今まで直接お金にはならなかった食に対する情熱や熱量、その裏側にある想いがトークンを使うことで巡る世界。自分のラーメンに費やす熱量がコミュニティに承認される。自分がほんとにいいと思って作った食べ物がコミュニティで広まる。Verooは単なるSNSアプリではなく、クリエイターたちの想いが紡がれるソーシャルグルメアプリです。

Homepage: https://veroo.xyz/

Discord URL：https://t.co/VoT0gpsflA