woosmap_flutter 0.0.9

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 use to embed 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 to subscribe to events that happen 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	19+ or 20+	9.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);

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

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

• Fetching and displaying direction

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

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 {
    defaultConfig {
        minSdkVersion 19
    }
}

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.