woosmap_flutter 0.3.0

Get started with the Woosmap Indoor API. View simple examples, learn the concepts, and create custom indoor maps for your site.

woosmap_flutter

The Woosmap Flutter SDK is a library that embeds interactive maps directly into your application. You can also add stores overlay to the map to call out points of interest and get relative information.

The SDK offers an interface to manage the Indoor Mapview and subscribe to events on the map.

Please get your email and token from your pro account. You may ask for one if necessary, or you can test with our developers' credentials if you lack time.

	Android	iOS
Support SDK	33+	13.0+

Usage

Add woosmap_flutter as a dependency in your pubspec.yaml file.

How to display Map

1. Instantiating a WoosmapMapViewWidget.

Note: Default constructor of WoosmapMapViewWidget is deprecated. Though it will work the way it used to in past, we suggest you use new WoosmapMapViewWidget.create to create WoosmapMapViewWidget object.

Old way

Using default constructor

    WoosmapMapViewWidget(
        wooskey: "<<YOUR WOOSMAP KEY>>",
        onRef: (p0) async {
          _controller = p0;
        },
        mapOptions: {
          "center": {"lat": 19.115932, "lng": 72.907852},
          "zoom": 10
        },
        click: (message) {
          debugPrint("idle");
        },
        bounds_changed: () {
          debugPrint("idle");
        },
        center_changed: () {
          debugPrint("idle");
        },
        dblclick: (m) {
          debugPrint("idle");
        },
        drag: () {
          debugPrint("idle");
        },
        dragend: () {
          debugPrint("idle");
        },
        dragstart: () {
          debugPrint("idle");
        },
        idle: () {
          debugPrint("idle");
        },
        mousemove: (x) {
          debugPrint("idle");
        },
        mouseout: (x) {
          debugPrint("idle");
        },
        mouseover: (x) {
          debugPrint("idle");
        },
        rightclick: (x) {
          debugPrint("idle");
        },
        zoom_changed: () {
          debugPrint("idle");
        },
      )

New Way

Using WoosmapMapViewWidget.create constructor

    WoosmapMapViewWidget.create(
        wooskey: "<<YOUR WOOSMAP KEY>>",
        onRef: (p0) async {
          _controller = p0;
        },
        mapOptions: MapOptions(
          center: LatLng.fromJson({"lat": 19.115932, "lng": 72.907852}),
          zoom: 10
        ),
        click: (message) {
          debugPrint("idle");
        },
        bounds_changed: () {
          debugPrint("idle");
        },
        center_changed: () {
          debugPrint("idle");
        },
        dblclick: (m) {
          debugPrint("idle");
        },
        drag: () {
          debugPrint("idle");
        },
        dragend: () {
          debugPrint("idle");
        },
        dragstart: () {
          debugPrint("idle");
        },
        idle: () {
          debugPrint("idle");
        },
        mousemove: (x) {
          debugPrint("idle");
        },
        mouseout: (x) {
          debugPrint("idle");
        },
        mouseover: (x) {
          debugPrint("idle");
        },
        rightclick: (x) {
          debugPrint("idle");
        },
        zoom_changed: () {
          debugPrint("idle");
        },
      )

2. Accessing various map functions

• fitBounds: Sets the viewport to contain the given bounds.

await _controller.fitBounds(
        LatLngBounds.fromJson({
          "ne": {"lat": 48.844437932920535, "lng": 2.3743880269761393},
          "sw": {"lat": 48.854437932920535, "lng": 2.3843880269761393}
        }),
        WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}));

• getCenter: Returns the position displayed at the center of the map.

LatLng result = await _controller.getCenter();

• getBounds: Returns the lat/lng bounds of the current viewport. Optionally takes a padding parameter.

LatLngBounds result = await _controller.getBounds(
        WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}));

• getHeading: Returns the compass heading. The heading value is measured in degrees (clockwise) from cardinal direction North.

double result = (await _controller.getHeading()) as double;

• getTilt: Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane

double result = (await _controller.getTilt()) as double;

• getZoom: Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane.

double result = (await _controller.getZoom()) as double;

• panBy: Changes the center of the map by the given distance in pixels

await _controller.panBy(20, 10);

• panTo: Changes the center of the map to the given LatLng.

await _controller.panTo(
        LatLng.fromJson({"lat": 48.844437932920535, "lng": 2.3743880269761393}),
        WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}));

• panToBounds: Pans the map by the minimum amount necessary to contain the given LatLngBounds. It makes no guarantee where on the map the bounds will be, except that the map will be panned to show as much of the bounds as possible inside {currentMapSizeInPx} - {padding}.

await _controller.panToBounds(
        LatLngBounds.fromJson({
          "ne": {"lat": 48.844437932920535, "lng": 2.3743880269761393},
          "sw": {"lat": 48.854437932920535, "lng": 2.3843880269761393}
        }),
        WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}));

• setCenter: Sets the map center

await _controller.setCenter(
        LatLng.fromJson({"lat": 48.844437932920535, "lng": 2.3743880269761393}),
        WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}));

• setHeading: Sets the compass heading for map measured in degrees from cardinal direction North.

await _controller.setHeading(20);

• setTilt: Sets tilt of map

await _controller.setTilt(5);

• setZoom: Set zoom level of map

await _controller.setZoom(20);

Add Marker on the map.

To add marker on the map, you can create an object of Marker class set it's properties and call its add method.

Note: Default constructor of Marker is deprecated. Though it will work the way it used to in past, we suggest you use new Marker.create to create Marker object.

Old way

  testMarker = Marker(
      {
        "position": {"lat": 51.522, "lng": -0.13},
        "icon": {
          "url": "https://images.woosmap.com/dot-marker.png",
          "scaledSize": {"height": 64, "width": 46}
        },
        "label": {},
        "anchorPoint":{},
      },
      _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();

New way

  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();

Building Directions Request

You can calculate directions and plot by using the WoosmapMapViewWidget.route method. This method is an interface to the Route endpoint of Woosmap Distance API. This service compute travel distance, time and path for a pair of origin and destination.

You may either display these directions results using custom overlays or use the WoosmapMapViewWidget.setRoute method to render these results.

    WoosmapMapViewWidget.create(
        wooskey: "<<YOUR WOOSMAP KEY>>",
        onRef: (p0) async {
          _controller = p0;
        },
        mapOptions: MapOptions(
          center: LatLng.fromJson({"lat": 51.52, "lng": -0.13}),
          zoom: 5
        ),
        routeIndex_changed: (index) {
            debugPrint(jsonEncode(index));
        },
      )

To display route on map.

  _controller?.route(DirectionRequest(
    origin: LatLng(lat: 48.86288, lng: 2.34946),
    destination: LatLng(lat: 52.52457, lng: 13.42347),
    unitSystem: UnitSystem.metric,
    travelMode: TravelMode.driving,
    provideRouteAlternatives: true
  ))
  .then((route) {
    _controller?.setRoute(route: route);
  });

To clear displayed route on map.

    _controller?.setRoute(route: null);

Please check the javascript guide for more implementation. javascript guide

How to display a Indoor maps

1. Instantiating a WoosmapMapViewWidget.

Note: Default constructor of WoosmapMapViewWidget is deprecated. We suggest you use new WoosmapMapViewWidget.create which accepts IndoorWidgetOptions and IndoorRendererOptions objects.

Old way

WoosmapMapViewWidget(
  wooskey: "<<YOUR WOOSMAP KEY>>",
  widget: true,
  indoorRendererConfiguration: const {
    "centerMap": true,
    "defaultFloor": 3
  },
  indoorWidgetConfiguration: const {
    "units": "metric",
    "ui": {
      "primaryColor": "#318276",
      "secondaryColor": "#004651",
      "tertiaryColor": "#E20813"
    },
  },
  onRef: (p0) async {
    _controller = p0;
  },
  indoor_venue_loaded: (message) {
    debugPrint(jsonEncode(message));
  },
  indoor_feature_selected: (message) {
    debugPrint(jsonEncode(message));
  },
  indoor_level_changed: (message) {
    debugPrint("$message");
  },
  indoor_user_location: (message) {
    debugPrint(jsonEncode(message));
  },
  indoor_highlight_step: (message) {
    debugPrint(jsonEncode(message));
  },
);

New way

WoosmapMapViewWidget.create(
  wooskey: AppConstants.of(context)?.wooskey ?? "",
  widget: true,
  activate_indoor_product: true,
  indoorRendererConfiguration: IndoorRendererOptions(
    centerMap: true,
    defaultFloor: 3
  ),
  indoorWidgetConfiguration: IndoorWidgetOptions (
    units: UnitSystem.metric,
    ui: IndoorWidgetOptionsUI(
      primaryColor: "#318276",
      secondaryColor: "#004651"
    ),
  ),
  onRef: (p0) async {
    _controller = p0;
    reloadMenu();
  },
  indoor_venue_loaded: (message) {
    debugPrint(jsonEncode(message));
  },
  indoor_feature_selected: (message) {
    debugPrint(jsonEncode(message));
  },
  indoor_level_changed: (message) {
    debugPrint("$message");
  },
  indoor_user_location: (message) {
    debugPrint(jsonEncode(message));
  },
  indoor_directions: (message) {
    _controller?.setDirections(message);
    debugPrint(jsonEncode(message));
  },
  indoor_highlight_step: (message) {
    debugPrint(jsonEncode(message));
  },
);

2. Accessing various functions in WoosmapMapViewWidget

• Load Indoor map

_controller.setVenue('wgs_mtp');

• Show all venue

_controller.loadIndoorMap('');

• Change Indoor Floor

_controller.setFloor(3);

• Display use position on map

_controller.setUserLocation(43.606573820824764, 3.92177514731884, 3, 0, true);

• Showing Information about any indoor area

_controller.highlightFeatureByRef('tropiques');

• Change Direction mode (Widget specific)

_controller.setDirectionsMode('wheelchair');

• Filter POI to display only labels and icons of POIs which are matching the filters

_controller.filterPois(advancedFilter: 'room:=meeting');

you can also pass an optional boolean parameter ignoreZoomRules. If true, ignores the zoom rules for the filtered POIs. Default value if false.

• Fetching and displaying direction

Note: Class DirectionParameter is deprecated. We suggest you use new IndoorDirectionRequest instead.

By using Lat/Lng

///Old way
_controller.directions(DirectionParameter.fromJson({
          "venueId": 'wgs_mtp',
          "origin": {"lat": 43.60664187325, "lng": 3.921814671575},
          "originLevel": 3,
          "destination": {"lat": 43.60665215333, "lng": 3.921680093435},
          "destinationLevel": 3,
          "language": "en",
          "units": UnitSystem.metric,
          "mode": "wheelchair"
        }))
        .then((route) => {_controller.setDirections(route)});

///New way
_controller.directions(IndoorDirectionRequest(
        venueId: 'wgs_mtp',
        origin: LatLng(lat: 43.60664187325, lng: 3.921814671575),
        originLevel: 3,
        destination: LatLng(lat: 43.60665215333, lng: 3.921680093435),
        destinationLevel: 3,
        language: "en",
        units: UnitSystem.metric,
        mode: "wheelchair",
      ))
      .then((route) => {_controller.setDirections(route)});

By using Poi ID

///Old way
_controller.directions(DirectionParameter.fromJson({
          "venueId": 'wgs_mtp',
          "originId": 3694972,
          "destinationId": 3694921,
          "language": "en",
          "units": "metric",
          "mode": "wheelchair"
        }))
        .then((route) => {_controller.setDirections(route)});

///New way
_controller.directions(IndoorDirectionRequest(
        venueId: 'wgs_mtp',
        originId: 3694972,
        destinationId: 3694921,
        language: "en",
        units: UnitSystem.metric,
        mode: "wheelchair",
      ))
      .then((route) => {_controller?.setDirections(route)});

By using Poi Ref

///Old way
_controller.directions(DirectionParameter.fromJson({
          "venueId": 'wgs_mtp',
          "originId": "ref:meeting002",
          "destinationId": "ref:tropiques",
          "language": "en",
          "units": "metric",
          "mode": "wheelchair"
        }))
        .then((route) => {_controller.setDirections(route)});

///New way
_controller.directions(IndoorDirectionRequest(
          venueId: 'wgs_mtp',
          originId: "ref:meeting002",
          destinationId: "ref:tropiques",
          language: "en",
          units: UnitSystem.metric,
          mode: "wheelchair"
        ))
        .then((route) => {_controller.setDirections(route)});

By using WayPoint Valid Waypoint formats are lat,lng,level or poiid or ref:poiref

///Old way
_controller.directions(DirectionParameter.fromJson({
          "venueId": 'wgs_mtp',
          "originId": "ref:meeting002",
          "destinationId": "ref:tropiques",
          "waypoints": ["ref:meeting001", "ref:tropiques"]
        }))
        .then((route) => {_controller.setDirections(route)});

///New way
_controller.directions(IndoorDirectionRequest(
          venueId: 'wgs_mtp',
          originId: "ref:meeting002",
          destinationId: "ref:tropiques",
          waypoints: ["ref:meeting001", "ref:tropiques"]
        ))
        .then((route) => {_controller.setDirections(route)});

Indoor Navigation

To initiate navigation experince you need to call following methods of the WoosmapController object in the same order as given below.

1. directions - As explained in the earlier section directions method will find the route between two points inside an indoor venue. This method returns a route object upon it's completion.

2. setDirections - This method will plot the given route on the map. You can pass the route object returned by directions method.

3. startNavigation - This method will initiate the "Turn By Turn" navigation experience.

_controller.startNavigation();

4. exitNavigation - This method will result in the exit from "Turn By Turn" navigation mode.

_controller.exitNavigation();

5. clearDirections - Removes the plotted path on the map. If the navigation experience is started then it first exits from the navigation then removes the path.

_controller.clearDirections(); 

Please note that setDirections method will no longer trigger navigation. Method startNavigation should explicitly be called to initiate the navigation.

How to add a store overlay

1. Instantiating a WoosmapMapViewWidget.

  WoosmapMapViewWidget.create(
        wooskey: "<<YOUR WOOSMAP KEY>>",
        onRef: (p0) async {
          _controller = p0;
        },
        mapOptions: MapOptions(
          center: LatLng.fromJson({"lat": 19.115932, "lng": 72.907852}),
          zoom: 10
        ),
        click: (message) {
          debugPrint("idle");
        },
        bounds_changed: () {
          debugPrint("idle");
        },
        center_changed: () {
          debugPrint("idle");
        },
        dblclick: (m) {
          debugPrint("idle");
        },
        drag: () {
          debugPrint("idle");
        },
        dragend: () {
          debugPrint("idle");
        },
        dragstart: () {
          debugPrint("idle");
        },
        idle: () {
          debugPrint("idle");
        },
        mousemove: (x) {
          debugPrint("idle");
        },
        mouseout: (x) {
          debugPrint("idle");
        },
        mouseover: (x) {
          debugPrint("idle");
        },
        rightclick: (x) {
          debugPrint("idle");
        },
        zoom_changed: () {
          debugPrint("idle");
        },
    );

2. Configuring store overlay.

Note: Default constructor of StoreOverlay is deprecated. Though it will work the way it used to in past, we suggest you use new StoreOverlay.create to create StoreOverlay object.

Old way

Using default constructor

  storesOverlay = StoreOverlay({
    "breakPoint": 14,
    "rules": [
      {
        "color": "#1D1D1D",
        "type": "takeaway",
        "icon": {
          "url": "https://images.woosmap.com/starbucks-marker-black.svg",
          "scaledSize": {"height": 40, "width": 34}
        },
        "selectedIcon": {
          "url": "https://images.woosmap.com/starbucks-marker-selected.svg",
          "scaledSize": {"height": 50, "width": 43}
        }
      }
    ],
    "default": {
      "color": "#008a2f",
      "size": 8,
      "minSize": 1,
      "icon": {
        "url": "https://images.woosmap.com/starbucks-marker.svg",
        "scaledSize": {"height": 40, "width": 34}
      },
      "selectedIcon": {
        "url": "https://images.woosmap.com/starbucks-marker-selected.svg",
        "scaledSize": {"height": 50, "width": 43}
      }
    }
  }, _controller!);

  storesOverlay?.add();

New way

Using StoreOverlay.create

  ///Defined TypedStyleRule
  TypedStyleRule typedStyleRule = TypedStyleRule(
    color: "#1D1D1D",
    icon: WoosIcon(
        url: "https://images.woosmap.com/starbucks-marker-black.svg", 
        scaledSize: WoosSize(width: 34, height: 40)
      ),
    type: "takeaway",
    selectedIcon: WoosIcon(
      url: "https://images.woosmap.com/starbucks-marker-selected.svg", 
      scaledSize: WoosSize(width: 43, height: 50)
      )
  );
  
  ///Defined StyleRule
  StyleRule styleRule = StyleRule(
    color: "#008a2f",
    icon: WoosIcon(
        url: "https://images.woosmap.com/starbucks-marker.svg", 
        scaledSize: WoosSize(width: 34, height: 40)
      ),
    size: 8,
    minSize: 1,
    selectedIcon: WoosIcon(
        url: "https://images.woosmap.com/starbucks-marker-selected.svg", 
        scaledSize: WoosSize(width: 50, height: 43)
      )
  );
  
  ///Create Style with StyleRule and TypedStyleRule
  Style style = Style(
    breakPoint: 14,
    defaultStyleRule: styleRule,
    rules: [typedStyleRule]
  );
  
  storesOverlay = StoreOverlay.create(style, _controller!);
  storesOverlay?.add();

Android Platform Settings

This plugin uses Platform Views to embed the Android’s WebView within the Flutter app.

You should however make sure to set the correct minSdkVersion in android/app/build.gradle if it was previously lower than 19:

android {
  compileSdkVersion 33
    defaultConfig {
        minSdkVersion 19
        targetSdkVersion 33
    }
}

Add the following permission inside the manifest tag in the AndroidManifest.xml file located at android/app/src/main.

<uses-permission android:name="android.permission.INTERNET"/>

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.