synw / geojson

Utilities to work with geojson data in Dart
MIT License
36 stars 53 forks source link

Geojson data from api #21

Closed adnanefouam closed 4 years ago

adnanefouam commented 4 years ago

i have multiple adresses from api with coordinates and i want to display their geojson data on the map like this

Screen Shot 2020-05-12 at 07 51 23

import 'dart:async'; import 'package:map_controller/map_controller.dart'; class Mapboxtest extends StatefulWidget {

final double lat; final double lon; final Object data;

Mapboxtest ({ Key key, @required this.lat,@required this.lon,this.data }): super(key: key); @override _MapboxtestState createState() => new _MapboxtestState(); }

class _MapboxtestState extends State {

MapController mapController; StatefulMapController statefulMapController; StreamSubscription sub; final lines = []; Future parseAndDrawAssetsOnMap() async { final geo = GeoJson(); geo.processedLines.listen((GeoJsonLine line) { setState(() => lines.add(Polyline( borderColor: Colors.red, strokeWidth: 4.0, color: primarycolor, points: line.geoSerie.toLatLng()))); }); geo.endSignal.listen((_) => geo.dispose()); final data = widget.data; await geo.parse(data, verbose: true);

}

@override void initState() { mapController = MapController(); statefulMapController = StatefulMapController(mapController: mapController); statefulMapController.onReady.then((_) => parseAndDrawAssetsOnMap()); sub = statefulMapController.changeFeed.listen((change) => setState(() {})); super.initState(); } @override Widget build(BuildContext context) {

return Scaffold(
    body: Stack(
      children: <Widget>[
        FlutterMap(
            options:
                MapOptions(
                  center: LatLng( widget.lon , widget.lat), zoom: 15,
            minZoom: 3.0,
           maxZoom: 20.0,
                  interactive: true, ),
            layers: [

          TileLayerOptions(
              urlTemplate:
              'https://api.mapbox.com/styles/v1/adnanefouham/cka1mwzas5g9k1iou3qn3odle/tiles/256/{z}/{x}/{y}@2x?access_token=TOKEN_KEY',              additionalOptions: {
                'accessToken':
                    'TOKEN_KEY',
                'id': 'mapbox.mapbox-stretts-v8',
              }),

          MarkerLayerOptions(markers: [
            Marker(
                width: 45.0,
                height: 45.0,
                point: LatLng(widget.lon , widget.lat),
                builder: (context) => Container(
                      child: IconButton(
                        icon: Icon(Icons.location_on),
                        color: primarycolor,
                        iconSize: 45.0,
                        onPressed: () {
                          parseAndDrawAssetsOnMap();
                          print('Marker tapped');
                        },
                      ),
                    ))
          ]),
              PolylineLayerOptions(
                polylines: statefulMapController.lines,
              ),
        ]),

      ],
    ));

} }

adnanefouam commented 4 years ago

i created a variabl named geoJson,

var geoJson = { "type": "FeatureCollection", "features": [ { "geometry": { "coordinates": widget.data, //here i put my data from api "type": "LineString" }, "id": "67482000440040", "properties": { "commune": "67482", "contenance": 9.115727199974797e-07, "created": "", "numero": "40", "prefixe": "000", "section": "44", "updated": "2006-03-09" }, "type": "Feature" }

and i used data =json.encode(geoJson) ; instead of data = await rootBundle .loadString('assets/........');

NOTE : always keep an eye on how much arrays inside the coordinates

thank you guys for this amazing package !!

kingdj commented 4 years ago

Hey I'm trying to load geojson multipolygon into the map but can't do that as it throws various catches being LatLong usage polygon duplication and heatmap. I am using Google map flutter, & geojson package from dart repo.