Giter VIP home page Giter VIP logo

flutter_map_geojson's Introduction

GeoJson is becoming defacto standard for retrieving spatial data like points, lines and polygons. GeoJson Format specification is defined in RFC7964 - see https://www.rfc-editor.org/rfc/rfc7946 This package parses GeoJson data and creates spatial objects like [Marker]s, [Polyline]s and [Polygon]s, which are defined in [flutter_map] package.

The creation of these objects is done by default callback functions. However, one can and probably should write his own callback functions which are implementing the necessary customization of creating spatial objects by specifying the color, stroke, label text and other parameters.

Features

The GeoJson parser creates three (four) lists of spatial objects - separate lists of [Marker]s, [Polyline]s and [Polygon]s (and Circles) which are input data for creating layers in flutter_map. The parser supports parsing the following geometries:

  • Point - transformed into [Marker]s
  • Circle - transformed into [CircleMarker]s - not part of the spec, but handy to have. Specify radius in the properties.
  • Multipoint - transformed into multiple [Marker]s with same ID property
  • LineString - tranformed in [Polyline]
  • MultiLineString - transformed into multiple [Polyline]s
  • Polygon - transformed into [Polygon]
  • MultiPolygon - transformed into multiple [Polygon]s with same ID property

Getting started

Add the package in pubspec.yaml file:

flutter_map_geojson ^1.0.8

Import it in the code:

import 'package:flutter_map_geojson/flutter_map_geojson.dart';

Usage

 // initiate parser 
 GeoJsonParser myGeoJson = GeoJsonParser();
 
 // parse GeoJson data - GeoJson is stored as [String]
 myGeoJson.parseGeoJsonAsString(testGeoJson);

 // after parsing the results are stored in 
 // myGeoJson.markers -> List<Marker>
 // myGeoJson.polylines -> List<Polyline>
 // myGeoJson.ploygons -> List<Polygon>

 // now create flutter_map layers

 FlutterMap(
          mapController: MapController(),
          options: MapOptions(
            center: LatLng(45.993807, 14.483972),
            zoom: 14,
          ),
          children: [
            TileLayer(
                urlTemplate:
                    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                subdomains: const ['a', 'b', 'c']),
            PolygonLayer(polygons: myGeoJson.polygons),
            PolylineLayer(polylines: myGeoJson.polylines),
            MarkerLayer(markers: myGeoJson.markers)
          ],
        ));

The default [Marker], [Polyline] [CircleMarkers] and [Polygon] creation callback functions can be replaced with user-defined highly customized functions. A good starting point are default callback functions which can be custimized to the needs of the project. The default callback functions have only basic functionality to display the spatial objects on the map. The default callback functions support changing the colors, stroke and fill color and marker icon. All these can be defined in default constructor or via setters. One can also apply a filtering function which returns only spatial features that have certian propertis. The filtering function returns a boolean value. For more details see the example program.

For creating tappable polylines one can use package flutter_map_tappable_polyline.

flutter_map_geojson's People

Contributors

almiszzp avatar hunterino avatar jozes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

flutter_map_geojson's Issues

unable to parse the world data to get borders on flutter_map

for example, i am using the world data from here to draw country borders https://datahub.io/core/geo-countries coutries.geojson,
Next i am using your plugin to parse thedata

  Future<void> startParam() async {
    osmController = MapController();
  
    final data = await rootBundle.loadString('assets/countries.geojson');

    myGeoJson.parseGeoJsonAsString(data);
    setState(() {});
  }

and using it normally in the flutter_map in polyline

  PolylineLayer(
                    polylines: myGeoJson.polylines,
                  ),

nothing happens there was a error initially in ur plugin regarding exceeding the lat lan value being under 180 so, updated your code as such

 case 'MultiPolygon':
          {
            for (final polygon in f['geometry']['coordinates'] as List) {
              final List<LatLng> outerRing = [];
              final List<List<LatLng>> holesList = [];
              int pathIndex = 0;
              for (final path in polygon as List) {
                List<LatLng> hole = [];
                for (final coords in path as List<dynamic>) {
                  double latitude = coords[1] as double;
                  double longitude = coords[0] as double;
                  if (longitude > 180) {
                    longitude = longitude - 360;
                  } else if (longitude < -180) {
                    longitude = longitude + 360;
                  }
                  if (pathIndex == 0) {
                    // add to polygon's outer ring
                    outerRing.add(LatLng(latitude, longitude));
                  } else {
                    // add it to a hole
                    hole.add(LatLng(latitude, longitude));
                  }
                }
                if (pathIndex > 0) {
                  // add to polygon's list of holes
                  holesList.add(hole);
                }
                pathIndex++;
              }
              polygons.add(polygonCreationCallback!(outerRing, holesList,
                  f['properties'] as Map<String, dynamic>));
            }
          }
          break;
      }

i don't get any results or update, what am i missing here .? could u give it a try ?

Possible to color code terrain using this plugin?

Is it possible to color code the terrain based on this plugin? For example is the terrain is at your current altitude then color code it red, if the terrain is below 500 feet then color code it yellow, and if below thousand feet then color code it green ?

Filters missing

I need to filter data according to filter name. I cannot do it directly because the plugins directly parse the data

Does it support coordinates

Hi,

Thank you for the great library.
I attached a complex Geojson, which also has coordinates and other types such as description and so on; do you think your library supports those?
mygeodata.zip

type 'int' is not a subtype of type 'double' in type cast

Hello!

Thanks for this code. I'm having an issue while reading some geojson. Here is a screen capture that documents the issue:

Window_y_geojson_parser_dart_โ€”_dron_es

As you can see, the selected point contains an int in the coordinates and the conversion assumes they are double value.

IOS GeoJson map crashes

Hello, I encountered a crash problem
There are strange lines, and it will crash if you zoom in.

20240614_195717.mov

I put the wrong question. Sorry.

FM v6 is coming soon

The next version of flutter_map is coming soon, with breaking changes for all users and plugins!

Expected CHANGELOG: https://github.com/fleaflet/flutter_map/blob/release-prep/CHANGELOG.md
Likely to be merged PR with significant impacts: fleaflet/flutter_map#1615
Release prep PR: fleaflet/flutter_map#1632
New documentation (path liable to change): https://docs.fleaflet.dev/v/v6-1
Expected migration instructions, suitable for most users: https://docs.fleaflet.dev/v/v6-1/getting-started/migrating-to-v6
List of commits since v5 (more to come): fleaflet/flutter_map@v5.0.0...master

geojson to latlng

in geojson corrdination value
[
[
212.1079454740286,
56.97082786802997
],
[
224.46248916782633,
64.50936114954698
],
[
245.94986061613014,
75.8975769875282
],
[
13.041330817213094,
77.07190622818226
],
[
212.1079454740286,
56.97082786802997
]
]
when it convert to latlng its give an error because latlng range is
Latitude is specified in degrees within the range [-90, 90]. Longitude is specified in degrees within the range [-180, 180).
how we can handle this json

parsing of non-double coordinates

Thank you for your work. It is really helpful, but I have some geojson data which sometimes contains coordinates like [10,47.7875]. The first value is not a double value; therefore, the casting e.g here:

.add(LatLng(coords[1] as double, coords[0] as double));
results in the exception:

type 'int' is not a subtype of type 'double' in type cast

Expected behavior:
Correct parsing of non-double coordinates.

how can I change the color of each polygon in stateful widget

I want to check whether my car is in the position of the polygon drawn on the map or not.
When the position of my car is inside the polygon, the color of the polygon becomes blue and when it leaves the polygon, it changes color to red

In short, how can I change the color of each polygon after the map is fully loaded?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.