jmap_flutter 1.2.3
jmap_flutter: ^1.2.3 copied to clipboard
The main Jibestream Map Flutter SDK
Jibestream Map for Flutter #
A Flutter plugin that provides a JMap widget.
Android | iOS | |
---|---|---|
Support | SDK 21+ | iOS 12+ |
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.