Source: https://developers.woosmap.com/products/mobile/flutter/markers/ > For clean Markdown of any page, append `.md` to the page URL. > For a complete documentation index, see https://developers.woosmap.com/llms.txt # Woosmap for Flutter - Marker To add marker on the map, you can create an object of `Marker` class set it's properties and call its `add` method. ``` 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(); ``` ``` dart import 'package:flutter/widgets.dart'; class AppConstants extends InheritedWidget { static AppConstants? of(BuildContext context) => context.dependOnInheritedWidgetOfExactType(); const AppConstants({required super.child, super.key}); final String privateKeyiOS = "<>"; final String privateKeyAndroid = "<>"; @override bool updateShouldNotify(AppConstants oldWidget) => false; } ``` ``` dart 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 createState() => _MarkersSnippetState(); } class _MarkersSnippetState extends State { 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 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: [ MarkerEventsMenu( webViewController: _controller, onMenuSelected: menuActions), ], ), body: SafeArea( child: Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ 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( key: const ValueKey('ShowPopupMenu'), onSelected: (MarkerMenuOptions value) { onMenuSelected(value); }, itemBuilder: (BuildContext context) => >[ const PopupMenuItem( value: MarkerMenuOptions.setIcon, child: Text('setIcon'), ), const PopupMenuItem( value: MarkerMenuOptions.setOpacity, child: Text('setOpacity'), ), const PopupMenuItem( value: MarkerMenuOptions.getOpacity, child: Text('getOpacity'), ), const PopupMenuItem( value: MarkerMenuOptions.getPosition, child: Text('getPosition'), ), const PopupMenuItem( value: MarkerMenuOptions.setPosition, child: Text('setPosition'), ), const PopupMenuItem( value: MarkerMenuOptions.setPositionAnimate, child: Text('setPosition (Animate)'), ), const PopupMenuItem( value: MarkerMenuOptions.getOffset, child: Text('getOffset'), ), const PopupMenuItem( value: MarkerMenuOptions.setOffset, child: Text('setOffset'), ), const PopupMenuItem( value: MarkerMenuOptions.setDraggable, child: Text('setDraggable'), ), const PopupMenuItem( value: MarkerMenuOptions.getDraggable, child: Text('getDraggable'), ), const PopupMenuItem( value: MarkerMenuOptions.setRotation, child: Text('setRotation'), ), const PopupMenuItem( value: MarkerMenuOptions.getRotation, child: Text('getRotation'), ), const PopupMenuItem( value: MarkerMenuOptions.setRotationAlignment, child: Text('setRotationAlignment'), ), const PopupMenuItem( value: MarkerMenuOptions.getRotationAlignment, child: Text('getRotationAlignment'), ), const PopupMenuItem( value: MarkerMenuOptions.setPitchAlignment, child: Text('setPitchAlignment'), ), const PopupMenuItem( value: MarkerMenuOptions.getPitchAlignment, child: Text('getPitchAlignment'), ), ], ); } } ```