woosmap_flutter 0.0.17

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.

    WoosmapMapViewWidget(
        wooskey: "<<YOUR WOOSMAP KEY>>",
        onRef: (p0) async {
          _controller = p0;
        },
        mapOptions: const {
          "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");
        },
      )

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

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(
        wooskey: "<<YOUR WOOSMAP KEY>>",
        onRef: (p0) async {
          _controller = p0;
        },
        mapOptions: const {
          "center": {"lat": 51.52, "lng": -0.13},
          "zoom": 5
        },
        routeIndex_changed: (index) {
            debugPrint(jsonEncode(index));
        },
      )))

To display route on map.

    _controller
            ?.route(DirectionRequest(
          "origin": {"lat": 48.86288, "lng": 2.34946},
          "destination": {"lat": 52.52457, "lng": 13.42347}
        }))
            .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.

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));
  },
)))

2. Accessing various functions in WoosmapMapViewWidget

• Load Indoor map

_controller.setVenue('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');

• Fetching and displaying direction

By using Lat/Lng

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

By using Poi ID

_controller.directions(DirectionParameter.fromJson({
          "venueId": 'mtp',
          "originId": 614309,
          "destinationId": 614165,
          "language": "en",
          "units": "metric",
          "mode": "wheelchair"
        }))
        .then((route) => {_controller.setDirections(route)});

By using Poi Ref

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

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

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

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.