floors_map_widget 1.0.1

This widget allows you to create an interactive building map from an SVG image

Floors Map Widget

This widget allow you to create an interactive floors map from an SVG image.

Table of Contents

• About the Project
• Features
• How to Use
• How to Contribute

About the Project

This widget allows you to create an interactive floor map based on an SVG image.

Features

• Generation of an interactive map based on an SVG image.
• Creating and visualizing routes between different points.
• Configuring interactions when clicking on a block.

Supported Object Classes

• shop
• parkingspace
• atmmachine
• toilet
• stairs

Toilet SubTypes

• male
• female
• mother_and_child

Stairs SubTypes

• simple
• fire_escape
• escalator
• elevator

How to Use

Working with the library is divided into several stages.

• Adding Route Points
• Assigning Correct IDs to Room Objects
• Integrating the Library into Your Project

Stage 1 - Adding Route Points

Using Figma or any other SVG editor, create a floor map or use an existing one. Now, you need to prepare this map to work with FloorMapWidget. You need to set route points and entrance points to room objects. You can use the ready-made Figma extension here or do it manually.

Figma Extension

Place the points and connect them into routes. You can read a more detailed description here.

Manual Implementation

You can use either a circle shape or a custom shape using a path. Point binding occurs using the id attribute. For example, in this example, we created a point in two ways and connected it to three neighboring points.

point-43=44-39-45
│     │  └‒‒└‒‒└‒‒‒‒‒ unique IDs of connected neighbors
│     └‒‒‒‒‒ unique ID of the object
└‒‒‒‒‒ class of the object - point

<circle id="point-43=44-39-45" cx="4.5" cy="4.5" r="4.5" fill="black"/>

<path id="point-43=44-39-45" d="M4.2 8.39999C6.52 8.39999 8.39999 6.52 8.39999 4.2C8.39999 1.88 6.52 0 4.2 0C1.88 0 0 1.88 0 4.2C0 6.52 1.88 8.39999 4.2 8.39999Z" fill="black"/>

Stage 2 - Assigning Correct IDs to Room Objects

You can see the supported objects here. The rules for creating IDs are the same as for Point.

shop-1=2
│    │ └‒‒‒‒‒ unique ID of the connected entrance point (there can be only one)
│    └‒‒‒‒‒ unique ID of the object
└‒‒‒‒‒ class of the object

stairs-elevator-1=2
│      │        │ └‒‒‒‒‒ unique ID of the connected entrance point (there can be only one)
│      │        └‒‒‒‒‒ unique ID of the object
│      └‒‒‒‒‒ subtype of the object (required for stairs and toilet)
└‒‒‒‒‒ class of the object

Ready Example

<path id="shop-3=5" d="M477.648 206.928H428.712V323.772H565.44V315H569.448V235.404H481.044H477.648V231.996V206.928Z" fill="#EEF9FE" />

Stage 3 - Integrating the Library into Your Project

Add the library to your project and embed the ready widget containing the necessary parameters.

FloorMapWidget(
    // String from SVG Map
    _svgContent,
    // Floors widgets
    _listWidgets,
    // Use to build a route
    startIdPoint: _startPointItem?.idPoint,
    endIdPoint:_endPointItem?.idPoint,
    // Use to remove points from SVG
    unvisiblePoints: true,
),

To add interactive objects to the map, you need to initialize them with the FloorItemWidget and pass them as a list to FloorItemWidget.

FloorItemWidget(
    // FloorItem
    item: element,
    // Function (FloorItem)
    onTap: _handleFloorItemTap,
    // An example of how to change the color of an
    // interaction animation
    selectedColor: Colors.orange[200]!.withOpacity(0.5),
    // An example of how to turn on an object's blinking
    // Thanks to this, you can highlight some objects on the map.
    // For example toilets or ATM
    isActiveBlinking: false,
),

You can get the objects using FloorSvgParser.

final parser = FloorSvgParser(svgContent: svgContent);
// You can get anchor points from the map
final listPoints = parser.getPoints();
// You can get all objects supported by the library
final listItems = parser.getItems();

For more information, visit the Example with prepared code and map example.

How to Contribute

To get started, read CONTRIBUTING.md to learn about the guidelines within this project.

Changelog

Refer to the Changelog to get all release notes.

Maintainers

ADC STUDIO

Valerij Shishov | Arthur Lokhov

This library is open for issues and pull requests. If you have ideas for improvements or bugs, the repository is open to contributions!