python/4. Create 3D-HTML-Website with QGIS.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 3D-Website with QGIS\n",
    "After this tutorial you are able to create 3D-HTML-Websites with QGIS like this one: http://simonhuwiler.ch/doData\n",
    "\n",
    "This tutorial has two parts:\n",
    "* 1. Exporting a single plane\n",
    "* 2. Open the exported plane in QGIS and create a 3D-Website\n",
    "\n",
    "What you need:\n",
    "* Have QGIS installed (a made this with the old version 2.18 because the new QGIS Version 3 has still some problems)\n",
    "* Have the following Plugins installed\n",
    " * `OpenLayers Plugin` for the ground map\n",
    " * `Qgis2threejs` for creating the 3D-Map\n",
    " \n",
    "To install them, open QGIS, select `Plugins` -> `Manage and Install Plugins` and search for the plugins"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Import libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import geopandas\n",
    "from shapely.geometry import Point, Polygon, LineString\n",
    "import fiona\n",
    "import datetime\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Import Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import Points\n",
    "df_points = pd.read_csv('../data_generated/20180521_sampled.csv')\n",
    "#df_points = pd.read_csv('../data_generated/20180521.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Select single plane"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "df_single_plane = df_points[df_points.icao24 == '4b1881']"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create Geometry and save it as a shapefile"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create Geometry\n",
    "geometry = [Point(xy) for xy in zip(df_single_plane.longitude, df_single_plane.latitude)]\n",
    "geo_df = geopandas.GeoDataFrame(df_single_plane, crs={'init': 'epsg:4326'}, geometry=geometry)\n",
    "\n",
    "#Drop bools and others\n",
    "export = geo_df.drop(['alert', 'spi', 'onground'], axis=1)\n",
    "\n",
    "#export to shapefile\n",
    "export.to_file(\"../qgis/plane_4b1881.shp\")\n",
    "\n",
    "#If you prefer geoJSON:\n",
    "#export.to_file(\"../qgis/plane_4b1881.geojson\", driver='GeoJSON')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Start QGIS!\n",
    "First of all, create a new project\n",
    "## Import the single plane\n",
    "* Go to your export folder (`../qgis`)\n",
    "* Select `/plane_4b1881.shp` and drag it into QGIS\n",
    "* You should see now a series of points\n",
    "\n",
    "## Set base map\n",
    "Now we create the base map:\n",
    "* Click on `web` in the menu\n",
    "* `OpenLayers Plugin`\n",
    "* Select a map. I often use `Google Maps -> Google Hybrid` (you need an API-Key) or `OpenStreetMap -> OpenStreetMap`\n",
    "* Your base map is ontop of your data. To fix that, drag the map layer in the layers panel and put it beneath `plane_4b1881`. If you dont see the layers panel, go to `view -> Panels -> Layers Panel`\n",
    "\n",
    "## Create the 3D-Website\n",
    "* Click on `web` in the menu\n",
    "* `Qgis2threejs`\n",
    "* and again `Qgis2threejs`\n",
    "* Check `points -> plane_4b1881`\n",
    "* Set `Z coordinate` / `Mode` to `altitude`\n",
    "* Select the output folder and `run`\n",
    "* It is possible, that your browser prevent loading some scripts on your local machine. Then you have to copy it to a webserver"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}