UXDEV Summit Developing In-Door Maps For Movie Theatres – II

Overview:

UX+Dev Summit: Developing An In-Door Map – II

So far with these articles, we discussed that it is now possible to extend the navigation experience and bring it home with end-to-end indoor capabilities. Mapping can now be applied to any major area such as airports, shopping malls, museums, smart cities and pretty much anything that you can geocode. For this series, we talked about the things we’re going to need to develop the application. Remember, you’ll need to create a WRLD; account and also install Node.js. We also briefly mentioned the capabilities of Node.js and how we can use it in this custom apps development.

Before you continue to through this series, make sure that you’ve acquired an API key and also have Nodejs installed on your local MAC or PC.

Project Setup:

Building The App

First, let’s create the root folder of the project, we’ll call it amc-maps. This will be the directory where we will run all the commands. Open a terminal and run the following command at the location you wish.

    mkdir amc-maps

Second, navigate to this directory:

    cd amc-maps

Now that we’ve established the directory, the next thing we need to do is setup the projects runtime. As you may have suspected, we’ll be developing in NodeJS and JavaScript. For us to set up the project, we’ll start by using hte node package manager (npm). This will be used to initialize a new package.json file which will have some default settings.

    npm init -f

The output of this command is:

{
  "name": "amc-maps",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Next, we’ll need a place to put our assets such as css and images and not to mention the functionality tied ot our application, in this case, javascript files of course! From the same directory, run the following set of commands.

# Create project directories
mkdir src
cd src
mkdir js
mkdir css

# Create project files
type nul > index.html
type nul > js/app.js
type nul > css/app.css
type nul > env.js

With our basic structure in place, we’re ready to import the project into the IDE.

IDE: Sublime

You can choose whatever IDE you wish, if you are following along, I’m going to use Sublime. Sublime is free and it does a great job for what we need. Alternatively, you can use VS Code which is great tool as well. I like lightweight IDE’s with as little overhead as possible.

Download and install the sublime editor from here:

Sublime

In the IDE, select “Open Folder” at the root level, in this case, amc-maps and once you’ve done that, select “Open Folder” at the location of amc-maps:

Developing In-Door Maps

With that imported, you can save the project as a template so that your settings are stored in the future by doing the following. Once you’ve found that option, we’ll go ahead and save the project template as “amc-maps”.
Developing In-Door Maps

Conclusion:

In this article, we discussed that it is now possible to extend the navigation experience and bring it home with end-to-end indoor capabilities. Mapping can now be applied to any major area such as airports, shopping malls, museums, smart cities and pretty much anything that you can geocode.

In our next article, we’ll start developing our custom application and jump straight into UX+Dev Summit: Developing An In-Door Map.

Share this post

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart