Jibestream Map for Flutter

A Flutter plugin that provides a JMap widget.

Usage

To use this plugin, add jmap_flutter as a dependency in your pubspec.yaml file.

Getting Started

You can now add a JMap widget to your widget tree.

The map view can be controlled with the JMapController that is passed to the JMap's onMapInitialized callback.

Installation

Android

Add the following lines in the project level build.gradle file.

allprojects {
    repositories {
        google()
        mavenCentral()
        // Add the following maven repository
        maven {
            url = uri("https://cxapp.jfrog.io/artifactory/android-cxapp/")
        }

    }
}

Example Usage

class MapScreen extends StatefulWidget {

  int venueID;
  int floorId;

  MapScreen(this.venueID, this.floorId);

  @override
  MapScreenState createState() => MapScreenState();

}

class MapScreenState extends State<MapScreen> {

  bool isLoading = false;
  bool componentAdded = false;
  JMap? jmap;
  JMapController? controller;

  @override
  void initState() {
    super.initState();
    setState(() {
      isLoading = true;
    });
    JMapConfig mapConfig = JMapConfig(
    "https://api.jibestream.com", 
    "********", 
    "********", 
    000, 
    widget.venueID, 
    widget.floorId);
    jmap = JMap(
      mapConfig,
      onTapDetectOnElement: (JMapDestination destination) {
        String? name = destination.name;
        print("On Tap from example app on destination $name");
        controller?.highlightDestination(destination, "#FF0000");
      },
      onMapInitialized: (JMapError? error, JMapController? controller) {
        setState(() {
          isLoading = false;
        });
        if (error != null) {
          String message = error.message;
          print("JMapInitialization Error: $message");
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(error.message)),
          );
        } else {
          print("JMap Initialized successfully");
          this.controller = controller;
        }
      },
      onTapDetectOnComponent: (int id) {
        print("Component tapped with $id");
      },
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
          actions: [
            TextButton(
              onPressed: () {
                changeFloorAction();
              }, 
              child: const Text('Change Floor')
              
            )
          ],
        ),
        body: Stack(
          children: [
            IgnorePointer(
              ignoring: isLoading,
              child: Column(
              children: [
                Expanded(child: Center(child: jmap,)),
                Container(
                  height: 100,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      ElevatedButton(
                        onPressed: () => clearButtonAction(),
                        child: const Text('Clear')
                      ),
                      ElevatedButton(
                        onPressed: () {
                          componentAdded ? controller?.removeImageComponent(55) : loadAndAddImageComponent(const Point(768, 1026));
                          setState(() {
                              componentAdded = !componentAdded;
                          });
                        },
                        child: Text(componentAdded ? "Remove Component" : "Add Component")
                      ),
                    ],
                  )
                )
              ],
            ),
            ),
            if (isLoading) const Center(child: CircularProgressIndicator()),
          ],
        )
      );
  }

  void clearButtonAction() {
    controller?.resetMapStyle();
    controller?.resetAmenityStyle();
    controller?.resetPathTypeStyle();
    controller?.clearWayfindingPath();
  }

  void changeFloorAction() {
    controller?.changeFloor(0000);
  }

  void loadAndAddImageComponent(Point point) async {
    // Load the image bytes from the assets
    ByteData byteData = await rootBundle.load('assets/artist.jpeg');
  
    // Convert the ByteData to Uint8List
    Uint8List imageBytes = byteData.buffer.asUint8List();
  
    // Convert the image bytes to a base64 string
    String base64String = base64Encode(imageBytes);
  
    controller?.addImageComponent(55, base64String, const Size(30, 30), point, cornerRadius: 10);
  }

}

Note: Get the client ID, secret and customer ID from your Jibestream portal

See the example directory for a complete sample app.