Pathing with Leaflet

As of February 22, 2023, MVF no longer includes collections, unattached nodes, and neighbour nodes and should not be used for pathing. This guide has been deprecated.

MVF for Pathing

MVF is the Mappedin Venue Format, an extension to GeoJSON. MVF allows for easy data exports from the Mappedin system, where the map data is managed in the Mappedin CMS.

In previous posts we have explained the MVF data model and how to draw the maps using Leaflet. This guide will take a step further and also render the pathing graph data on the map while explaining how the path network is present in the MVF.

MVF is delivered as a Zip-package with 4 top-level files and 5 folders for data that is divided between map layer specific files. Nodes are found in the node folder in the MVF package. The examples used in this post are found in the sample MVF Mappedin Demo Mall.

Nodes

As described in the Data Model node is a point on the map that is used to create a path. Nodes may be linked to other nodes using its neighbors property. This is what an example Node in an MVF looks like:

Copy
{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [
            -80.5355190856705,
            43.52006516665369
        ]
    },
    "properties": {
        "id": "n_583740db932117799a000002",
        "level": "5835ab589321170c11000000",
        "neighbors": [
            "n_58374cf6932117799a00012d",
            "n_58374d06932117799a00012f",
            "n_58374d0c932117799a000130"
        ],
        "weight": 0,
        "multiplier": 1,
        "accessible": true,
        "externalId": null
    }
},

Each of the points have coordinates in the geometry object in a two-value array: [longitude, latitude]. This is enough to draw the Node on a map using a map renderer that understands GeoJSON.

The example point as seen on GeoJSON.io.

Pathing

Properties object of a Node has the following properties that can be used to create the pathing graph between nodes.

The most important property is the neighbors array that defines, which other nodes this node has direct connections to. That will form the basis of the routing graph. Weight and multiplier are used in algorithms that take into account different costs for paths. Following nodes that are marked as accessible creates a path that is marked as accessible in the CMS.

Linking to spaces

Space in the MVF represents a traversable area such as a room in a Level. Location such as a grocery store exists in a space. Spaces are polygons and have entrance nodes that describe how one could walk into that space.

The id property of a node corresponds with an entrance property in a Space. By linking entrances to nodes (note that in node file the unique id has n_ in the beginning.) it is possible to create a graph and user interface for navigating from one shop in the mall to another.

Copy
"entrances": [
    {
        "id": "58374e49932117799a000140",
        "level": "5835ab589321170c11000000"
    }
]

Rendering the paths

This interactive code sample shows how to render the paths using Leaflet.

Connecting to other levels

The pathing network above has been on a single map level. To travel between levels, MVF uses Connections, which is another folder in the MVF Zip-file. A single connection looks like the following:

Copy
{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [
            -80.53550874023773,
            43.521043530625384
        ]
    },
    "properties": {
        "id": "583862b5932117641c00001e",
        "level": "5835ac489321170c11000001",
        "destinations": [
            "5838616a932117641c000012-58386123932117641c00000f",
            "5838616a932117641c000012-583740ad932117799a000001"
        ],
        "name": "Escalator 2",
        "type": "escalator",
        "weight": 1000,
        "multiplier": 1,
        "accessible": false
    }
}

The strings in the destinations property link nodes in different levels creating a multi-floor pathing graph. It has two node ids separated with a -, which can be parsed and added to the graph.