flutter_map_gl 0.0.6

Flutter paketi ile mobil uygulamalarda (iOS ve Android) haritaları kullanmanıza olanak tanıyan bir paket.

Flutter Map GL

Flutter Map GL, mobil uygulamalarda (iOS ve Android) var olan web haritalarını WebView ile göstermenize olanak tanıyan bir Flutter paketidir.

Özellikler

• Web haritalarını mobil uygulamalarda (iOS ve Android) WebView ile görüntüleme
• Harita kontrolcüsü ile harita üzerinde işlemler yapma
• Harita olaylarını dinleme (tıklama, hareket, vb.)

Başlangıç

Paketi projenize eklemek için pubspec.yaml dosyanıza şu satırları ekleyin:

dependencies:
  flutter_map_gl: ^0.0.6

Daha sonra bağımlılıkları yükleyin:

flutter pub get

Kullanım

Temel bir harita gösterimi için:

import 'package:flutter/material.dart';
import 'package:flutter_map_gl/flutter_map_gl.dart';

class MapWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterMapGL(
      options: MapOptions(
        center: LatLng(41.0082, 28.9784), // İstanbul
        style: 'https://your-map-server.com/map-style/',
        zoom: 11.0,
      ),
    );
  }
}

Harita kontrolcüsü ile işlemler yapmak için:

final MapController controller = MapController();

FlutterMapGL(
  options: MapOptions(
    center: LatLng(41.0082, 28.9784), // İstanbul
    style: 'https://your-map-server.com/map-style/',
    zoom: 11.0,
  ),
  controller: controller,
  onMapCreated: () {
    print('Harita oluşturuldu!');
  },
  onMapClick: (latLng) {
    print('Haritada tıklandı: $latLng');
  },
)

// Haritayı hareket ettirme
controller.moveCamera(LatLng(41.01, 28.98), zoom: 15.0);

// Yakınlaştırma seviyesini değiştirme
controller.setZoom(12.0);

// Harita stilini değiştirme
controller.setStyle('https://your-map-server.com/different-style/');

WebView İletişimi

Bu paket, web haritasını WebView içinde gösterir. Haritadan Flutter'a veri göndermek için haritanızda JavaScript kanalı kullanabilirsiniz:

// Harita JS kodunuzda:
function onMapClick(lat, lng) {
  // Flutter'a veri gönder
  FlutterMapGL.postMessage(JSON.stringify({
    event: 'click',
    lat: lat,
    lng: lng
  }));
}

function onMapLoaded() {
  // Flutter'a yükleme bilgisi gönder
  FlutterMapGL.postMessage(JSON.stringify({
    event: 'loaded'
  }));
}

// Kamera hareketi fonksiyonu (Flutter'dan çağrılır)
function moveCamera(lat, lng, zoom) {
  // Haritayı belirtilen konuma taşı
  map.setCenter([lng, lat]);
  map.setZoom(zoom);
}

// Zoom değiştirme fonksiyonu (Flutter'dan çağrılır)
function setZoom(zoom) {
  map.setZoom(zoom);
}

Android Manifest İzinleri

Android uygulamanızın AndroidManifest.xml dosyasına aşağıdaki izinleri eklediğinizden emin olun:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

iOS Info.plist Tanımları

iOS uygulamanızın Info.plist dosyasına aşağıdaki tanımları eklediğinizden emin olun:

<key>NSLocationWhenInUseUsageDescription</key>
<string>Harita özelliklerini kullanabilmek için konum izni gerekiyor</string>

<key>io.flutter.embedded_views_preview</key>
<true/>

Platform Desteği

Platform	Durum
Android	✅ Destekleniyor
iOS	✅ Destekleniyor

Katkıda Bulunma

Katkıda bulunmak isterseniz, lütfen bir Pull Request açın veya bir Issue oluşturun.

Lisans

Bu paket MIT lisansı altında lisanslanmıştır.

iOS WebView Sorunu Çözümü

iOS platformunda WebView ile ilgili olarak PlatformException (PlatformException(channel-error, Unable to establish connection on channel... hatası alıyorsanız, aşağıdaki adımları izleyin:

1. Uygulamanızın pubspec.yaml dosyasında webview_flutter paketini açıkça belirtin:

dependencies:
  flutter:
    sdk: flutter
  flutter_map_gl: ^0.0.6
  webview_flutter: ^4.11.0  # Aynı sürümü belirtmek önemli

2. iOS projenizin ios/Runner/Info.plist dosyasına aşağıdaki ayarları ekleyin:

<key>io.flutter.embedded_views_preview</key>
<true/>

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

3. iOS uygulamanızı yeniden oluşturun:

flutter clean
cd ios
pod install
cd ..
flutter run -d ios

4. Uygulama yaşam döngüsünü doğru yönetin - Uygulamanız arka plana alındığında WebView'in kapatılıp tekrar açıldığında sorun çıkmaması için state yönetimini düzgün yapın.