Woosmap for Flutter - Marker
Markers are used to display clickable/draggable icons on the map. You can attach a wide variety of event listeners to control user interaction..
To add marker on the map, you can create an object of Marker class set it’s properties and call its add method.
lib/marker_snippet.dart
MarkerOptions markerOptions = MarkerOptions(position: LatLng(lat: 51.522, lng: -0.13));
markerOptions.icon = WoosIcon(url: "https://images.woosmap.com/dot-marker.png", scaledSize: WoosSize(height: 64, width: 46));
testMarker = Marker.create(
markerOptions,
_controller!,
click: (value) {
txtLogController?.text = "click, ${txtLogController?.text}";
},
mouseover: (value) {
txtLogController?.text = "mouseover, ${txtLogController?.text}";
},
mouseout: (value) {
txtLogController?.text = "mouseout, ${txtLogController?.text}";
},
clickable_changed: (value) {
txtLogController?.text = "clickable_changed, ${txtLogController?.text}";
},
cursor_changed: (value) {
txtLogController?.text = "cursor_changed, ${txtLogController?.text}";
},
icon_changed: (value) {
txtLogController?.text = "icon_changed, ${txtLogController?.text}";
},
position_changed: (value) {
txtLogController?.text = "position_changed, ${txtLogController?.text}";
},
dragstart: (value) {
txtLogController?.text = "dragstart, ${txtLogController?.text}";
},
drag: (value) {
txtLogController?.text = "drag, ${txtLogController?.text}";
},
dragend: (value) {
txtLogController?.text = "dragend, ${txtLogController?.text}";
},
draggable_changed: (value) {
txtLogController?.text = "draggable_changed, ${txtLogController?.text}";
},
visible_changed: (value) {
txtLogController?.text = "visible_changed, ${txtLogController?.text}";
},
zIndex_changed: (value) {
txtLogController?.text = "zIndex_changed, ${txtLogController?.text}";
},
);
testMarker?.add();
import 'package:flutter/widgets.dart';
class AppConstants extends InheritedWidget {
static AppConstants? of(BuildContext context) =>
context.dependOnInheritedWidgetOfExactType<AppConstants>();
const AppConstants({required super.child, super.key});
final String privateKeyiOS = "<<Your private iOS woosmap key>>";
final String privateKeyAndroid = "<<Your private Android woosmap key>>";
@override
bool updateShouldNotify(AppConstants oldWidget) => false;
}
import 'dart:convert';
import 'dart:core';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:woosmap_flutter/woosmap_flutter.dart';
import './constants.dart';
class MarkersSnippet extends StatefulWidget {
const MarkersSnippet({super.key});
@override
State<MarkersSnippet> createState() => _MarkersSnippetState();
}
class _MarkersSnippetState extends State<MarkersSnippet> {
WoosmapController? _controller;
TextEditingController? txtLogController;
Marker? testMarker;
@override
void initState() {
super.initState();
txtLogController = TextEditingController();
if (_controller != null) {
debugPrint("info ===> Indoor controller not initialize");
}
}
@override
void dispose() {
txtLogController?.dispose();
super.dispose();
}
Future<void> reloadMenu() async {
setState(() {});
}
void addTestMarker() {
MarkerOptions markerOptions =
MarkerOptions(position: LatLng(lat: 51.522, lng: -0.13));
markerOptions.icon = WoosIcon(
url: "https://images.woosmap.com/dot-marker.png",
scaledSize: WoosSize(height: 64, width: 46));
testMarker = Marker.create(
markerOptions,
_controller!,
click: (value) {
txtLogController?.text = "click, ${txtLogController?.text}";
},
mouseover: (value) {
txtLogController?.text = "mouseover, ${txtLogController?.text}";
},
mouseout: (value) {
txtLogController?.text = "mouseout, ${txtLogController?.text}";
},
clickable_changed: (value) {
txtLogController?.text = "clickable_changed, ${txtLogController?.text}";
},
cursor_changed: (value) {
txtLogController?.text = "cursor_changed, ${txtLogController?.text}";
},
icon_changed: (value) {
txtLogController?.text = "icon_changed, ${txtLogController?.text}";
},
position_changed: (value) {
txtLogController?.text = "position_changed, ${txtLogController?.text}";
},
dragstart: (value) {
txtLogController?.text = "dragstart, ${txtLogController?.text}";
},
drag: (value) {
txtLogController?.text = "drag, ${txtLogController?.text}";
},
dragend: (value) {
txtLogController?.text = "dragend, ${txtLogController?.text}";
},
draggable_changed: (value) {
txtLogController?.text = "draggable_changed, ${txtLogController?.text}";
},
visible_changed: (value) {
txtLogController?.text = "visible_changed, ${txtLogController?.text}";
},
zIndex_changed: (value) {
txtLogController?.text = "zIndex_changed, ${txtLogController?.text}";
},
);
testMarker?.add();
}
void menuActions(MarkerMenuOptions menuId) {
switch (menuId) {
case MarkerMenuOptions.setIcon:
testMarker?.setIcon(
icon: WoosIcon(
url: 'https://images.woosmap.com/marker-red.png',
scaledSize: WoosSize(height: 64, width: 46)
));
break;
case MarkerMenuOptions.setOpacity:
testMarker?.setOpacity(0.5);
break;
case MarkerMenuOptions.getOpacity:
testMarker?.getOpacity().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Opacity: $value")),
);
});
break;
case MarkerMenuOptions.getPosition:
testMarker?.getPosition().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Location: ${jsonEncode(value.toJson())}")),
);
});
break;
case MarkerMenuOptions.setPosition:
testMarker?.setPosition(LatLng(lat: 19.215932, lng: 72.900852));
break;
case MarkerMenuOptions.setPositionAnimate:
testMarker?.setPosition(LatLng(lat: 19.215932, lng: 72.900852),
animate: true, duration: 3000);
break;
case MarkerMenuOptions.getOffset:
testMarker?.getOffset().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Point: ${jsonEncode(value.toJson())}")),
);
});
break;
case MarkerMenuOptions.setOffset:
testMarker?.setOffset(WoosPoint(x: 0.5, y: 0.5));
break;
case MarkerMenuOptions.getDraggable:
testMarker?.getDraggable().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Draggable: $value")),
);
});
break;
case MarkerMenuOptions.setDraggable:
testMarker?.setDraggable(true);
break;
case MarkerMenuOptions.getRotation:
testMarker?.getRotation().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Rotation: $value")),
);
});
break;
case MarkerMenuOptions.setRotation:
testMarker?.setRotation(30);
break;
case MarkerMenuOptions.getRotationAlignment:
testMarker?.getRotationAlignment().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Rotation Alignment: $value")),
);
});
break;
case MarkerMenuOptions.setRotationAlignment:
testMarker?.setRotationAlignment('map');
break;
case MarkerMenuOptions.getPitchAlignment:
testMarker?.getPitchAlignment().then((value) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Pitch Alignment: $value")),
);
});
break;
case MarkerMenuOptions.setPitchAlignment:
testMarker?.setPitchAlignment('map');
break;
default:
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Not Implemented")),
);
break;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Woosmap app (Markers)'),
actions: <Widget>[
MarkerEventsMenu(
webViewController: _controller, onMenuSelected: menuActions),
],
),
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Align(
alignment: const AlignmentDirectional(-1, -1),
child: WoosmapMapViewWidget(
wooskey: Platform.isAndroid
? AppConstants.of(context)?.privateKeyAndroid ?? ""
: AppConstants.of(context)?.privateKeyiOS ?? "",
onRef: (p0) async {
_controller = p0;
addTestMarker();
reloadMenu();
},
mapOptions: const {
"center": {"lat": 51.52, "lng": -0.13},
"zoom": 10
},
))),
Container(
width: 100,
height: 100,
decoration: const BoxDecoration(
color: Color(0xFFDEE6E6),
),
child: Column(mainAxisSize: MainAxisSize.max, children: [
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(10, 5, 10, 5),
child: TextFormField(
controller: txtLogController,
minLines: null,
maxLines: null,
autofocus: true,
enabled: false,
obscureText: false,
decoration: const InputDecoration(
labelText: 'Events Log\n',
hintText: 'Event fired',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0x00000000),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
),
))
]))
],
),
),
);
}
}
enum MarkerMenuOptions {
setIcon,
setOpacity,
getOpacity,
getPosition,
setPosition,
setPositionAnimate,
getOffset,
setOffset,
setDraggable,
getDraggable,
setRotation,
getRotation,
setRotationAlignment,
getRotationAlignment,
setPitchAlignment,
getPitchAlignment
}
class MarkerEventsMenu extends StatelessWidget {
const MarkerEventsMenu({
super.key,
required this.webViewController,
required this.onMenuSelected,
});
final WoosmapController? webViewController;
final Function(MarkerMenuOptions) onMenuSelected;
@override
Widget build(BuildContext context) {
return PopupMenuButton<MarkerMenuOptions>(
key: const ValueKey<String>('ShowPopupMenu'),
onSelected: (MarkerMenuOptions value) {
onMenuSelected(value);
},
itemBuilder: (BuildContext context) => <PopupMenuItem<MarkerMenuOptions>>[
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setIcon,
child: Text('setIcon'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setOpacity,
child: Text('setOpacity'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getOpacity,
child: Text('getOpacity'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getPosition,
child: Text('getPosition'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setPosition,
child: Text('setPosition'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setPositionAnimate,
child: Text('setPosition (Animate)'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getOffset,
child: Text('getOffset'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setOffset,
child: Text('setOffset'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setDraggable,
child: Text('setDraggable'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getDraggable,
child: Text('getDraggable'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setRotation,
child: Text('setRotation'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getRotation,
child: Text('getRotation'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setRotationAlignment,
child: Text('setRotationAlignment'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getRotationAlignment,
child: Text('getRotationAlignment'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.setPitchAlignment,
child: Text('setPitchAlignment'),
),
const PopupMenuItem<MarkerMenuOptions>(
value: MarkerMenuOptions.getPitchAlignment,
child: Text('getPitchAlignment'),
),
],
);
}
}
Was this article helpful?
Have more questions? Submit a request
