Flutter mapbox polyline maps

Question

I am trying to create polyline map using mapbox, which I am able to create properly. User can come back and can see see polyline maps in his profile.

Doubt - Is there any way I can convert my list of lat long into some format and store in db and later on we fetch it from db and render map?

I checked geojson format also but if we use geoJson with mapbox it generates static maps.

I am using flutter_map to generate maps.

Updated -

var geoJson =   {
              "type": "polyline",
              "coordinates": [
                [
                  76.61219358444214,
                  27.555764420824236
                ],
                [
                  76.6120433807373,
                  27.55395717009122
                ],
                [
                  76.61094903945923,
                  27.55285378133631
                ],
                [
                  76.61021947860718,
                  27.55138892051556
                ],
                [
                  76.61000490188599,
                  27.550285505956428
                ],
                [
                  76.6101336479187,
                  27.549372326903264
                ],
                [
                  76.6107988357544,
                  27.548287916916344
                ],
                [
                  76.61150693893433,
                  27.547831320034653
                ],
                [
                  76.61109924316406,
                  27.54568148421033
                ],
                [
                  76.61097049713135,
                  27.54391211873852
                ]
              ]
            }

Currently I am using flutter_map package and using below code to render map.

var points =  [LatLng(latitude:27.591585, longitude:76.61139), LatLng(latitude:27.591548, longitude:76.611397), LatLng(latitude:27.591473, longitude:76.611407), LatLng(latitude:27.591437, longitude:76.611413), LatLng(latitude:27.591362, longitude:76.611425), LatLng(latitude:27.591325, longitude:76.61143), LatLng(latitude:27.59125, longitude:76.611442), LatLng(latitude:27.591177, longitude:76.611452), LatLng(latitude:27.59114, longitude:76.611458), LatLng(latitude:27.591065, longitude:76.61147), LatLng(latitude:27.591028, longitude:76.611475), LatLng(latitude:27.591007, longitude:76.611587), LatLng(latitude:27.591013, longitude:76.611693), LatLng(latitude:27.590777, longitude:76.611805), LatLng(latitude:27.590657, longitude:76.611822), LatLng(latitude:27.590535, longitude:76.61184), LatLng(latitude:27.590413, longitude:76.611857), LatLng(latitude:27.590293, longitude:76.611875), LatLng(latitude:27.590172, longitude:76.611892)]



return new Scaffold(
        appBar: new AppBar(title: new Text('Leaflet Maps')),
        body: new FlutterMap(
            options: new MapOptions(
                center:  new LatLng(27.563896, 76.600460), minZoom: 10.0),
            layers: [
              new TileLayerOptions(
                  urlTemplate:
             "https://api.mapbox.com/styles/v1/jainaman8/ckd5v8bs00zm01ir3w3bjrrb3/tiles/256/{z}/{x}/{y}@2x?access_token=ACCESS_TOKEN",
                  additionalOptions: {
                    'accessToken': '',
                    'id': 'mapbox.mapbox-streets-v8'
                  }
              ),

            new PolylineLayerOptions(
              polylines: [
                new Polyline(
                  points: points,
                  strokeWidth: 2.0,
                  color:  Colors.red
                )
              ]
            )

I want to store geoJson object into firebase and then pull this data from there and render map using mapbox.

I read on google that firebase does not support arrays so another doubt is that how can I store this data on firebase ?

Answer 1

You can do the desired by making a collection of field of type geopoint and then get those fields in your flutter project.