Flutter_map plugin to display geojson, vector tiles, clusters using sliced vectors

Overview

geojson_vector_slicer

A flutter_map plugin to display fast geojson by slicing into tiles. Slicing based off https://github.com/mapbox/geojson-vt

IMPORTANT! This is an alpha/proof of concept version currently.

Getting Started

See the example main.dart, will create specific examples later.

Main features:

  • Display GeoJSON by splitting them into tiles (tiles are stored in an Index).

  • Line simplification on GeoJSON.

  • Polyline/polygon tap/hit detection code.

  • Can Display Vector tiles (no mapbox styling works on this or is intended to).

  • Can cluster markers (basic) based on tiles (no spiderfy features).

How it works

Tiles belong to an Index we create at first.

geoJsonIndex = await geoJSON.createIndex('assets/ids.json', tileSize: tileSize);

This creates an index, precalculates zoom 0-2 for performance (higher zooms are calculated on the fly)

Tile Index Options

{
  'maxZoom': 14,            // max zoom to preserve detail on
  'indexMaxZoom': 5,        // max zoom in the tile index
  'indexMaxPoints': 100000, // max number of points per tile in the tile index
  'tolerance': 3,           // simplification tolerance (higher means simpler)
  'extent': 4096,           // tile extent
  'buffer': 64,             // tile buffer on each side
  'lineMetrics': false,     // whether to calculate line metrics
  'promoteId': null,        // name of a feature property to be promoted to feature.id
  'generateId': false,      // whether to generate feature ids. Cannot be used with promoteId
  'debug': 2                // logging level (0, 1 or 2)
};

GeoJsonWidget options

index: Our index we created earlier.
options: our GeoJSONOptions (see below)
drawClusters: true to erm draw clusters instead of raw features.
drawFeatures: true to erm draw the features
(You probably only want one of these enabled, but you can have both enabled for testing).
featuresHaveSameStyle: true if all geometry has the same color. This may give a performance tweak as we can batch draw calls up

Available GeoJSONOptions are:


Function? lineStringFunc;
Function? lineStringStyle;
Function? polygonFunc;      // callback for polys
Function? polygonStyle;     // styling for polys
Function? pointFunc;        // marker/points, draw to canvas
Function? pointWidgetFunc;  // marker/points, show a widget
Function? pointStyle;       // marker/points styling
Function? overallStyleFunc; // one overall callback for a feature
Function? clusterFunc;      // call this if we're displaying a cluster
bool featuresHaveSameStyle; // performance improvement (maybe) if all features are the same

Example Widget

GeoJSONWidget(
  drawClusters: true,
  drawFeatures: false,
  index: geoJsonIndex,
  options: GeoJSONOptions(
    featuresHaveSameStyle: false,
    overallStyleFunc: (TileFeature feature) {
      var paint = Paint()
        ..style = PaintingStyle.stroke
        ..color = Colors.blue
        ..strokeWidth = 5
        ..isAntiAlias = false;
      if(feature.type == 3) { // lineString
        ///paint.style = PaintingStyle.fill;
      }
      return paint;
    },
    pointWidgetFunc: (TileFeature feature) {
      //return const Text("Point!", style: TextStyle(fontSize: 10));
      return const Icon(Icons.airplanemode_on);
    },
    pointStyle: (TileFeature feature) { return Paint(); },
    pointFunc: (TileFeature feature, Canvas canvas) {
      if(CustomImages.imageLoaded) {
        canvas.drawImage(CustomImages.plane, const Offset(0.0, 0.0), Paint());
      }
    },
    ///clusterFunc: () { return Text("Cluster"); },
    ///lineStringFunc: () { if(CustomImages.imageLoaded) return CustomImages.plane;}
    polygonFunc: null,
    polygonStyle: (feature) {
      var paint = Paint()
        ..style = PaintingStyle.fill
        ..color = Colors.red
        ..strokeWidth = 5
        ..isAntiAlias = false;

      if(feature.tags != null && "${feature.tags['NAME']}_${feature.tags['COUNTY']}" == featureSelected) {
        return paint;
      }
      paint.color = Colors.lightBlueAccent;
      return paint;
    }
  ),

Example Vector Tile Widget

      VectorTileWidgetStream(size: 256.0, index: vectorTileIndex,
                  options:   const {
                  'urlTemplate': 'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?mapbox://styles/<name>/<key/',
                  'subdomains': ['a', 'b', 'c']},
      ),

onTap for polygons

              onTap: (tapPosition, point) {
                featureSelected = null;
                // figure which tile we're on, then grab that tiles features to loop through
                // to find which feature the tap was on. Zoom 14 is kinda arbitrary here
                var pt = const Epsg3857().latLngToPoint(point, mapController.zoom.floorToDouble());
                var x = (pt.x / tileSize).floor();
                var y = (pt.y / tileSize).floor();
                var tile = geoJsonIndex.getTile(mapController.zoom.floor(), x, y);

                if(tile != null) {
                  for (var feature in tile.features) {
                    var polygonList = feature.geometry;

                    if (feature.type != 1) {
                      if(geoJSON.isGeoPointInPoly(pt, polygonList, size: tileSize)) {
                         infoText = "${feature.tags['NAME']}, ${feature.tags['NAME']} tapped";
                         if(feature.tags.containsKey('NAME')) {
                           featureSelected = "${feature.tags['NAME']}_${feature.tags['COUNTY']}";
                         }

                      }
                    }
                  }
                  if(featureSelected != null) {
                    print("Tapped $infoText $featureSelected");
                  }
                }
                setState(() {});
                },
You might also like...

Apple Maps Plugin for Flutter

apple_maps_flutter A Flutter plugin that provides an Apple Maps widget. The plugin relies on Flutter's mechanism for embedding Android and iOS views.

Sep 4, 2022

Flutter plugin for launching maps

Map Launcher Map Launcher is a flutter plugin to find available maps installed on a device and launch them with a marker or show directions. Marker Na

Sep 22, 2022

Android and iOS Geolocation plugin for Flutter

Flutter geolocator plugin The Flutter geolocator plugin is build following the federated plugin architecture. A detailed explanation of the federated

Sep 23, 2022

Android and iOS Geolocation plugin for Flutter

Flutter geolocator plugin The Flutter geolocator plugin is build following the federated plugin architecture. A detailed explanation of the federated

Nov 14, 2021

A Flutter plugin to easily handle realtime location in iOS and Android. Provides settings for optimizing performance or battery.

A Flutter plugin to easily handle realtime location in iOS and Android. Provides settings for optimizing performance or battery.

Flutter Location Plugin This plugin for Flutter handles getting a location on Android and iOS. It also provides callbacks when the location is changed

Sep 26, 2022

A plugin that offers widgets for Wear OS by Google

Flutter Wear Plugin A plugin that offers Flutter support for Wear OS by Google (Android Wear). To use this plugin you must set your minSdkVersion to 2

Sep 28, 2022

Android and iOS Geolocation plugin for Flutter

Flutter geolocator plugin The Flutter geolocator plugin is build following the federated plugin architecture. A detailed explanation of the federated

Sep 23, 2022

A Flutter plugin for appodeal

flutter_appodeal A Flutter plugin for iOS and Android to use Appodeal SDK in your apps Getting Started For help getting started with Flutter, view our

Feb 19, 2022

A Flutter plugin for integrating Google Maps in iOS, Android and Web applications

flutter_google_maps A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobi

Sep 6, 2022
Comments
  • Adding stroke parameter in paint for polygon always result in filled polygons

    Adding stroke parameter in paint for polygon always result in filled polygons

    I added the geojson widget for FlutterMap as per the main.dart file and changed the polygonStyle function as follows.

      polygonStyle: (TileFeature feature) {
        var paint = Paint()
          ..style = PaintingStyle.fill
          ..color = Colors.red.withOpacity(0.7)
          ..strokeWidth = 5
          ..isAntiAlias = false;
        
        if ("${feature.tags['NAME']}_${feature.tags['COUNTY']}" ==
                featureSelected) {
          return paint;
        }
        paint.color = Colors.yellow.withOpacity(0.6);
        paint.style = PaintingStyle.stroke;
        return paint;
      },
    

    But the resulting map has polygon filled in yellow colour, not the stroked ones as required. Also when tapping the polygon also highlights in red colour but not in the stroked mode as defined in the above. Please refer the image for further understading.

    image

    Thanks for the amazing work.

    opened by DinithHerath 2
Owner
Ian
Ian
flutter_map plugin to request and display the users location and heading on the map

The plugin is discontinued. Feel free to fork it or checkout similar plugins. Flutter Map – Location plugin A flutter_map plugin to request and displa

Fabian Rosenthal 18 Sep 13, 2022
Plugin for 'flutter_map' providing advanced caching functionality, with ability to download map regions for offline use. Also includes useful prebuilt widgets.

flutter_map_tile_caching A plugin for the flutter_map library to provide an easy way to cache tiles and download map regions for offline use. Installa

Luka S 55 Sep 19, 2022
Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster

Flutter Map Marker Cluster A Dart implementation of Leaflet.markercluster for Flutter apps. This is a plugin for flutter_map package Usage Add flutter

Lorenzo Pongetti 168 Sep 28, 2022
Flutter plugin to display a simple flat world map with animated points in real time

Flutter Simple Map Flutter plugin to display a simple flat world map with animated points in real time. Can be used as a presentation of online users,

Vladyslav Korniienko 5 Aug 22, 2022
A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin

maps_demo A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin Getting Started Get an A

Gerry High 41 Feb 14, 2022
A Flutter plugin which provides 'Picking Place' using Google Maps widget

Google Maps Places Picker Refractored This is a forked version of google_maps_place_picker package, with added custom styling and features.

Varun 4 Jul 18, 2022
A flutter plugin for Google Maps

IMPORTANT: This plugin is no longer under development Why? We initially built this plugin to fill an early gap in flutter. Since then, Google has made

AppTree Software, Inc 417 Sep 15, 2022
Flutter plugin for forward and reverse geocoding

geocoder Forward and reverse geocoding. Usage Import package:geocoder/geocoder.dart, and use the Geocoder.local to access geocoding services provided

Aloïs Deniel 174 Sep 15, 2022
A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

Boris Gautier 5 Sep 14, 2022
Flutter geolocation plugin for Android and iOS.

geolocation Flutter geolocation plugin for Android API 16+ and iOS 9+. Features: Manual and automatic location permission management Current one-shot

Loup 219 Aug 12, 2022