Suggestion on how to use icons with live location

[jesussmile]

Apologies first it's a bit off topic, I am using flutter_geofire with this project, so far I can send my live location and retrieve other joggers live locations as well,
I use this method to get the location of joggers from the database successfully

 void joggersOnMap() {
    
    for (NearByJoggers jogger
        in GeoFireAssistant.nearbyJoggersList) {
      print("joggersOnMapKey : ${jogger.key}"); //unique key from the database
      print("joggersOnMapLat ${jogger.latitude}");
      print("joggersOnMapLng ${jogger.longitude}");

    }
     setState(() {
    //   //    markersSet = tMarkers;
  / });
  }

The result is this for example

I/flutter (32532): joggersOnMapKey: mVNadfsedauScwT9KEr123qEI2lH3
I/flutter (32532): joggersOnMapLat 30.710307259909893
I/flutter (32532): joggersOnMapLng 77.34448976382481

Now I want to tie each Jogger with their key and show them on a map as well as update their movement.
This is the method I use, for now, I can get the latitude and longitude of movement but can't think of how to use an image instead of the lat/long/key-values I get, Could you please tell me how can I do that and do I need to use bitmap or something? I would be grateful if you could give me some tips or point me in the correct direction. Thanx

Geofire.queryAtLocation(30.730743, 76.774948, 5).listen((map) {
        print(map);
        if (map != null) {
          var callBack = map['callBack'];

          switch (callBack) {
            case Geofire.onKeyEntered:
              keysRetrieved.add(map["key"]);
              joggersOnMap();  //joggers online
              break;

            case Geofire.onKeyExited:
              keysRetrieved.remove(map["key"]);
               joggersOnMap();  //joggers offline
              break;

            case Geofire.onKeyMoved:
            // Update your key's location  
             joggersOnMap();  //movement of joggers (can get successfully)
              break;

            case Geofire.onGeoQueryReady:
            // All Intial Data is loaded
            joggersOnMap();  //query of joggers on the map
            print(map['result'])

              break;
          }
        }

        setState(() {});

[liodali]

is every joggers should have separate image on the map ?

[jesussmile]

Ok no problem I will work with what I have for now. Thank you .

[jesussmile]

Oh well! it was pretty simple, Thank you so much

void joggersOnMap() async {
    for (NearByJoggers jogger in GeoFireAssistant.nearbyJoggersList) {
      StaticPositionGeoPoint(
          jogger.key,
          MarkerIcon(
            icon: Icon(Icons.star),
            image: AssetImage("images/images/jogger_ios.png"),
          ),
          [GeoPoint(latitude: jogger.latitude, longitude: jogger.longitude)]);
      await osmController.setStaticPosition(
          [GeoPoint(latitude: jogger.latitude, longitude: jogger.longitude)],
          jogger.key);
    }
  }

Just one part, no matter what Icons or image I change to it keeps showing the point down icon, as in the picture below is it hard coded in plugin somewhere? is it not deprecated?

https://imgur.com/a/ldXDaYb
As these marker Icons are constantly moving do you think I need to convert them to bitmap?

[liodali]

in StaticPositionGeoPoint you should only use icon or image not both of them
and could you please share OSMFlutter widget to see you configuration

[jesussmile]

I am using only one either icon or image but both show the same icon as shown in the picture above, I have extracted the widget.

class osmFlutter extends StatelessWidget {
  const osmFlutter({
    Key key,
    @required GlobalKey<State<StatefulWidget>> mapKey,
    @required this.osmController,
  }) : _mapKey = mapKey, super(key: key);

  final GlobalKey<State<StatefulWidget>> _mapKey;
  final MapController osmController;

  @override
  Widget build(BuildContext context) {
    return OSMFlutter(
      key: _mapKey,
      controller: osmController,

      //currentLocation: false,
      road: Road(
        startIcon: MarkerIcon(
          icon: Icon(
            Icons.person,
            size: 64,
            color: Colors.brown,
          ),
        ),
        roadColor: Colors.yellowAccent,
      ),
      markerIcon: MarkerIcon(
        icon: Icon(
          Icons.person_pin_circle,
          color: Colors.blue,
          size: 56,
        ),
      ),
    );
  }

The jogerOnMap method

void joggersOnMap() async {
    for (NearByJoggers jogger in GeoFireAssistant.nearbyJoggersList) {
      StaticPositionGeoPoint(
          jogger.key,
          MarkerIcon(
            icon: Icon(Icons.star),
           // image: AssetImage("images/images/jogger_ios.png"),
          ),
          [GeoPoint(latitude: jogger.latitude, longitude: jogger.longitude)]);
      await osmController.setStaticPosition(
          [GeoPoint(latitude: jogger.latitude, longitude: jogger.longitude)],
          jogger.key);
    }
  }

plugin flutter_osm_plugin: ^0.7.9+2

[liodali]

you should pass joggers keys to osmFlutter widget
and put

StaticPositionGeoPoint(
          jogger.key,
          MarkerIcon(
            icon: Icon(Icons.star),
           ),
         )

in OSMFlutter
it will become like this

OSMFlutter(
      key: _mapKey,
      controller: osmController,
     staticPoints :joggersKey.map((key)=> StaticPositionGeoPoint(
          key,
          MarkerIcon(
            icon: Icon(Icons.star),
           ),
         )).toList(),
      //currentLocation: false,
      road: Road(
        startIcon: MarkerIcon(
          icon: Icon(
            Icons.person,
            size: 64,
            color: Colors.brown,
          ),
        ),
        roadColor: Colors.yellowAccent,
      ),
      markerIcon: MarkerIcon(
        icon: Icon(
          Icons.person_pin_circle,
          color: Colors.blue,
          size: 56,
        ),
      ),
    );

[jesussmile]

Could you please take a look at this video of other people's live location
https://www.youtube.com/watch?v=NRY1SYlEdTc

Following your advice, I can get the list of live locations and movement of joggers perfectly, I just can't change the icon, Here is the updated code,

class _MainScreenState extends State<MainScreen> {
 
  String joggerKey;
  double joggerLat;
  double joggerLon;

 @override
  Widget build(BuildContext context) {
 child: (OSMFlutter(
                  key: _mapKey,
                  controller: osmController,
                  staticPoints: [
                    StaticPositionGeoPoint(
                      joggerKey,
                      MarkerIcon(
                        icon: Icon(Icons.star),
                      ),
                      [GeoPoint(latitude: joggerLat, longitude: joggerLon)],
                    ),
                  ],
                  //currentLocation: false,
                  road: Road(
                    startIcon: MarkerIcon(
                      icon: Icon(
                        Icons.person,
                        size: 64,
                        color: Colors.brown,
                      ),
                    ),
                    roadColor: Colors.yellowAccent,
                  ),
                  markerIcon: MarkerIcon(
                    icon: Icon(
                      Icons.person_pin_circle,
                      color: Colors.blue,
                      size: 56,
                    ),
                  ),
                )),


}


void updateAvailablejoggersOnMap() async {
    for (NearByAvailablejoggers jogger
        in GeoFireAssistant.nearByAvailablejoggersList) {
      joggerKey = jogger.key;
      joggerLat = jogger.latitude;
      joggerLon = jogger.longitude;
      StaticPositionGeoPoint(
          jogger.key,
          MarkerIcon(
            icon: Icon(Icons.star),
            //image: AssetImage("images/images/jogger_ios.png"),
          ),
          [GeoPoint(latitude: jogger.latitude, longitude: jogger.longitude)]);
      await osmController.setStaticPosition(
          [GeoPoint(latitude: jogger.latitude, longitude: jogger.longitude)],
          jogger.key);
    }
  }

[jesussmile]

I have tried with both before and after, To manually wait for the map to load I put my code in a floating action button and when pressed, called the function initGeoFireListener(); still the result is the same,

Just to check I put an empty container on top of the map, the Icon then shows up (check picture) but it's not inside the map, I also checked with different icons in the StaticPostionGeoPoint() method, only one that is inside the flutter widget will show.

[liodali]

i'm currently adding new method to set icon of static points dynamically it will be ready this night

[jesussmile]

i'm currently adding new method to set icon of static points dynamically it will be ready this night

Awesome! can't wait. :D

[liodali]

i published new version 0.8.1
to set icon you should this method

await controller.setMarkerOfStaticPoint(String id,MarkerIcon markerIcon );

you can used before you set the position

[jesussmile]

Wow! it works perfectly!! Thank you so very much !