Visualizing an indoor routing service

With our wonderful API created, it's time now to visualize this indoor route returned as GeoJSON on a map. We will now dive into the Django template components to create the HTML, JS, and CSS for our front-facing web page that displays a simple slippy web map using Openlayers 3.4.0. and Bootstrap CSS.

Our new web map will display the GeoJSON on the map with a nice style alongside a menu bar where we will include later functionality.

Getting ready

We need to build a few new folders and files to store new static and template content for our Django web application. Let's begin doing this by creating the /web_analysis/templates folder followed by the /web_analysis/static folder.

Inside our /static/ folder, we will place the nondynamic content of the JavaScript and CSS files. The /templates/ folder will store the HTML template files used to create our web pages.

Next up, let's tell Django /web_analysis/settings.py about the location of our new templates folder...