Merge pull request #313 from Abyss777/device_images

Draft of device images

20 files changed, 911 insertions, 69 deletions

diff --git a/web/app/Application.js b/web/app/Application.js
index fc6ff5e7..702a75a9 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -69,7 +69,8 @@ Ext.define('Traccar.Application', {
         'ReportSummary',
         'ReportTypes',
         'ReportEventTypes',
-        'Statistics'
+        'Statistics',
+        'DeviceImages'
     ],
 
     controllers: [
@@ -126,7 +127,6 @@ Ext.define('Traccar.Application', {
     },
 
     showError: function (response) {
-        var data;
         if (Ext.isString(response)) {
             Ext.Msg.alert(Strings.errorTitle, response);
         } else if (response.responseText) {
diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
new file mode 100644
index 00000000..fac16a57
--- /dev/null
+++ b/web/app/DeviceImages.js
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.DeviceImages', {
+    singleton: true,
+
+    getImageSvg: function (color, zoom, angle, category) {
+        var i, device, svg, width, height, rotateTransform, scaleTransform, fill;
+
+        if (category) {
+            device = Ext.getStore('DeviceImages').findRecord('key', category, 0, false, false, true);
+        }
+        if (!device) {
+            device = Ext.getStore('DeviceImages').findRecord('key', 'default', 0, false, false, true);
+        }
+        svg = Ext.clone(device.get('svg'));
+
+        width = parseFloat(svg.documentElement.getAttribute('width'));
+        height = parseFloat(svg.documentElement.getAttribute('height'));
+
+        fill = device.get('fillId');
+        if (!Ext.isArray(fill)) {
+            fill = [fill];
+        }
+        for (i = 0; i < fill.length; i++) {
+            svg.getElementById(fill[i]).style.fill = color;
+        }
+
+        rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')';
+        svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform);
+
+        if (zoom) {
+            width *= Traccar.Style.mapScaleSelected;
+            height *= Traccar.Style.mapScaleSelected;
+            scaleTransform = 'scale(' + Traccar.Style.mapScaleSelected + ') ';
+        } else {
+            width *= Traccar.Style.mapScaleNormal;
+            height *= Traccar.Style.mapScaleNormal;
+            scaleTransform = 'scale(' + Traccar.Style.mapScaleNormal + ') ';
+        }
+
+        if (device.get('scaleId') !== device.get('rotateId')) {
+            svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform);
+        } else {
+            svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform + ' ' + rotateTransform);
+        }
+
+        svg.documentElement.setAttribute('width', width);
+        svg.documentElement.setAttribute('height', height);
+        svg.documentElement.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+
+        return svg;
+    },
+
+    getImageIcon: function (color, zoom, angle, category) {
+        var image, svg, width, height;
+
+        svg = this.getImageSvg(color, zoom, angle, category);
+        width = parseFloat(svg.documentElement.getAttribute('width'));
+        height = parseFloat(svg.documentElement.getAttribute('height'));
+
+        image =  new ol.style.Icon({
+            imgSize: [width, height],
+            src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement))
+        });
+        image.fill = color;
+        image.zoom = zoom;
+        image.angle = angle;
+        image.category = category;
+
+        return image;
+    }
+});
diff --git a/web/app/Style.js b/web/app/Style.js
index 8db8667e..4960aefa 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -51,21 +51,18 @@ Ext.define('Traccar.Style', {
     ],
     mapRouteWidth: 5,
 
-    mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)',
-    mapArrowStrokeWidth: 2,
-
     mapTextColor: 'rgba(50, 50, 50, 1.0)',
     mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)',
     mapTextStrokeWidth: 2,
-    mapTextOffset: 10,
+    mapTextOffset: 2,
     mapTextFont: 'bold 12px sans-serif',
 
     mapColorOnline: 'rgba(77, 250, 144, 1.0)',
     mapColorUnknown: 'rgba(250, 190, 77, 1.0)',
-    mapColorOffline: 'rgba(255, 84, 104, 1.0)',
+    mapColorOffline: 'rgba(255, 162, 173, 1.0)',
 
-    mapRadiusNormal: 9,
-    mapRadiusSelected: 14,
+    mapScaleNormal: 1,
+    mapScaleSelected: 1.5,
 
     mapMaxZoom: 19,
     mapDelay: 500,
diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js
new file mode 100644
index 00000000..efe8606a
--- /dev/null
+++ b/web/app/store/DeviceImages.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+Ext.define('Traccar.store.DeviceImages', {
+    extend: 'Ext.data.Store',
+    fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId'],
+
+    data: [{
+        key: 'arrow',
+        name: Strings.categoryArrow,
+        svg: document.getElementById('arrowSvg').contentDocument,
+        fillId: 'arrow',
+        rotateId: 'arrow',
+        scaleId: 'arrow'
+    }, {
+        key: 'default',
+        name: Strings.categoryDefault,
+        svg: document.getElementById('defaultSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'car',
+        name: Strings.categoryCar,
+        svg: document.getElementById('carSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'bus',
+        name: Strings.categoryBus,
+        svg: document.getElementById('busSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'truck',
+        name: Strings.categoryTruck,
+        svg: document.getElementById('truckSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'ship',
+        name: Strings.categoryShip,
+        svg: document.getElementById('shipSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'plane',
+        name: Strings.categoryPlane,
+        svg: document.getElementById('planeSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'motorcycle',
+        name: Strings.categoryMotorcycle,
+        svg: document.getElementById('motorcycleSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'bicycle',
+        name: Strings.categoryBicycle,
+        svg: document.getElementById('bicycleSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }, {
+        key: 'person',
+        name: Strings.categoryPerson,
+        svg: document.getElementById('personSvg').contentDocument,
+        fillId: 'path4724',
+        rotateId: 'path4724',
+        scaleId: 'layer1'
+    }]
+});
diff --git a/web/app/view/DeviceDialog.js b/web/app/view/DeviceDialog.js
index 68740b24..d3f964ed 100644
--- a/web/app/view/DeviceDialog.js
+++ b/web/app/view/DeviceDialog.js
@@ -57,6 +57,22 @@ Ext.define('Traccar.view.DeviceDialog', {
             xtype: 'textfield',
             name: 'contact',
             fieldLabel: Strings.deviceContact
+        }, {
+            xtype: 'combobox',
+            name: 'category',
+            fieldLabel: Strings.deviceCategory,
+            store: 'DeviceImages',
+            queryMode: 'local',
+            displayField: 'name',
+            valueField: 'key',
+            listConfig: {
+                getInnerTpl: function () {
+                    return '<table><tr valign="middle" ><td><div align="center" style="width:40px;height:40px;" >' +
+                    '{[new XMLSerializer().serializeToString(Traccar.DeviceImages.getImageSvg(' +
+                    'Traccar.Style.mapColorOnline, false, 0, values.key))]}</div></td>' +
+                    '<td>- {name}</td></tr></table>';
+                }
+            }
         }]
     }
 });
diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js
index aa8e7886..a31ceb77 100644
--- a/web/app/view/DevicesController.js
+++ b/web/app/view/DevicesController.js
@@ -147,6 +147,7 @@ Ext.define('Traccar.view.DevicesController', {
 
     selectDevice: function (device, center) {
         this.getView().getSelectionModel().select([device], false, true);
+        this.updateButtons(this.getView().getSelectionModel());
         this.getView().getView().focusRow(device);
     },
 
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 32ea6b05..c981fabc 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -22,7 +22,8 @@ Ext.define('Traccar.view.MapController', {
     requires: [
         'Traccar.model.Position',
         'Traccar.model.Device',
-        'Traccar.GeofenceConverter'
+        'Traccar.GeofenceConverter',
+        'Traccar.DeviceImages'
     ],
 
     config: {
@@ -70,7 +71,7 @@ Ext.define('Traccar.view.MapController', {
         this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile());
     },
 
-    showReports: function() {
+    showReports: function () {
         Traccar.app.showReports(true);
     },
 
@@ -85,18 +86,15 @@ Ext.define('Traccar.view.MapController', {
         }
     },
 
-    changeMarkerColor: function (style, color) {
-        return new ol.style.Style({
-            image: new ol.style.Arrow({
-                radius: style.getImage().getRadius(),
-                fill: new ol.style.Fill({
-                    color: color
-                }),
-                stroke: style.getImage().getStroke(),
-                rotation: style.getImage().getRotation()
-            }),
+    changeMarkerColor: function (style, color, category) {
+        var newStyle = new ol.style.Style({
+            image: Traccar.DeviceImages.getImageIcon(color,
+                    style.getImage().zoom,
+                    style.getImage().angle,
+                    category),
             text: style.getText()
         });
+        return newStyle;
     },
 
     updateDevice: function (store, data) {
@@ -113,7 +111,7 @@ Ext.define('Traccar.view.MapController', {
             if (deviceId in this.latestMarkers) {
                 marker = this.latestMarkers[deviceId];
                 marker.setStyle(
-                    this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device)));
+                    this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device), device.get('category')));
             }
         }
     },
@@ -154,18 +152,20 @@ Ext.define('Traccar.view.MapController', {
         if (deviceId in this.latestMarkers) {
             marker = this.latestMarkers[deviceId];
             marker.setGeometry(geometry);
+            marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course')));
         } else {
             marker = new ol.Feature(geometry);
             marker.set('record', device);
-            this.latestMarkers[deviceId] = marker;
-            this.getView().getLatestSource().addFeature(marker);
 
-            style = this.getLatestMarker(this.getDeviceColor(device));
+            style = this.getLatestMarker(this.getDeviceColor(device),
+                    position.get('course'),
+                    device.get('category'));
             style.getText().setText(device.get('name'));
             marker.setStyle(style);
-        }
+            this.latestMarkers[deviceId] = marker;
+            this.getView().getLatestSource().addFeature(marker);
 
-        marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
+        }
 
         if (marker === this.selectedMarker && this.followSelected()) {
             this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
@@ -231,8 +231,7 @@ Ext.define('Traccar.view.MapController', {
                 this.reportMarkers[position.get('id')] = marker;
                 this.getView().getReportSource().addFeature(marker);
 
-                style = this.getReportMarker(position.get('deviceId'));
-                style.getImage().setRotation(position.get('course') * Math.PI / 180);
+                style = this.getReportMarker(position.get('deviceId'), position.get('course'));
                 /*style.getText().setText(
                     Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
 
@@ -278,18 +277,10 @@ Ext.define('Traccar.view.MapController', {
         });
     },
 
-    getMarkerStyle: function (radius, color) {
+    getMarkerStyle: function (zoom, color, angle, category) {
+        var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category);
         return new ol.style.Style({
-            image: new ol.style.Arrow({
-                radius: radius,
-                fill: new ol.style.Fill({
-                    color: color
-                }),
-                stroke: new ol.style.Stroke({
-                    color: Traccar.Style.mapArrowStrokeColor,
-                    width: Traccar.Style.mapArrowStrokeWidth
-                })
-            }),
+            image: image,
             text: new ol.style.Text({
                 textBaseline: 'bottom',
                 fill: new ol.style.Fill({
@@ -299,47 +290,58 @@ Ext.define('Traccar.view.MapController', {
                     color: Traccar.Style.mapTextStrokeColor,
                     width: Traccar.Style.mapTextStrokeWidth
                 }),
-                offsetY: -radius / 2 - Traccar.Style.mapTextOffset,
+                offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset,
                 font : Traccar.Style.mapTextFont
             })
         });
     },
 
-    getLatestMarker: function (color) {
-        return this.getMarkerStyle(
-            Traccar.Style.mapRadiusNormal, color);
+    getLatestMarker: function (color, angle, category) {
+        return this.getMarkerStyle(false, color, angle, category);
     },
 
-    getReportMarker: function (deviceId) {
+    getReportMarker: function (deviceId, angle) {
         var index = 0;
         if (deviceId !== undefined) {
             index = deviceId % Traccar.Style.mapRouteColor.length;
         }
-        return this.getMarkerStyle(
-            Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]);
+        return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle, 'arrow');
     },
 
-    resizeMarker: function (style, radius) {
+    resizeMarker: function (style, zoom) {
+        var image, text;
+        image = Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+                zoom,
+                style.getImage().angle,
+                style.getImage().category);
+        text = style.getText();
+        text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
         return new ol.style.Style({
-            image: new ol.style.Arrow({
-                radius: radius,
-                fill: style.getImage().getFill(),
-                stroke: style.getImage().getStroke(),
-                rotation: style.getImage().getRotation()
-            }),
+            image: image,
+            text: text
+        });
+    },
+
+    rotateMarker: function (style, angle) {
+        var newStyle = new ol.style.Style({
+            image: Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+                    style.getImage().zoom,
+                    angle,
+                    style.getImage().category),
             text: style.getText()
         });
+        return newStyle;
     },
 
     selectMarker: function (marker, center) {
         if (this.selectedMarker) {
             this.selectedMarker.setStyle(
-                this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal));
+                this.resizeMarker(this.selectedMarker.getStyle(), false));
         }
 
         if (marker) {
             marker.setStyle(
-                this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected));
+                this.resizeMarker(marker.getStyle(), true));
             if (center) {
                 this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
             }
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 224a2a86..a8c5f4eb 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -41,7 +41,7 @@ Ext.define('Traccar.view.ReportController', {
         }
     },
 
-    hideReports: function() {
+    hideReports: function () {
         Traccar.app.showReports(false);
     },
 
diff --git a/web/images/arrow.svg b/web/images/arrow.svg
new file mode 100644
index 00000000..a85201d8
--- /dev/null
+++ b/web/images/arrow.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><polygon id="arrow" points="13,4 19,22 13,19 7,22" style="fill:#008000;stroke:#000000;stroke-width:1px;" transform="" /></svg>
diff --git a/web/images/bicycle.svg b/web/images/bicycle.svg
new file mode 100644
index 00000000..86132ffc
--- /dev/null
+++ b/web/images/bicycle.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="bicycle.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="-2.9160663"
+     inkscape:cy="26.96638"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4140"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 17.279576,21.785713 -2.19029,0 q -0.279018,0 -0.404576,-0.24414 -0.118583,-0.244141 0.04883,-0.467355 l 1.311384,-1.750837 q -0.453404,-0.216239 -0.955636,-0.216239 -0.920759,0 -1.576451,0.655692 -0.655692,0.655692 -0.655692,1.576451 0,0.920759 0.655692,1.576451 0.655692,0.655692 1.576451,0.655692 0.802176,0 1.416015,-0.502232 0.61384,-0.509208 0.774275,-1.283483 z m -1.297433,-0.892857 1.297433,0 Q 17.154018,20.299943 16.756418,19.86049 l -0.774275,1.032366 z m 3.348214,0 2.008929,-2.678571 -3.348214,0 -0.69057,0.920759 q 0.732422,0.718471 0.878907,1.757812 l 1.150948,0 z m 7.156808,2.02288 q 0.655692,-0.655692 0.655692,-1.576451 0,-0.920759 -0.655692,-1.576451 -0.655692,-0.655692 -1.576451,-0.655692 -0.418526,0 -0.844029,0.167411 l 1.213728,1.813616 q 0.104632,0.160435 0.06976,0.341797 -0.03488,0.181361 -0.188338,0.279018 -0.104631,0.07673 -0.251116,0.07673 -0.24414,0 -0.369698,-0.202287 L 23.327293,19.76981 q -0.648716,0.662668 -0.648716,1.569476 0,0.920759 0.655692,1.576451 0.655691,0.655692 1.57645,0.655692 0.920759,0 1.576451,-0.655692 z m 0.62779,-3.780692 q 0.920759,0.913783 0.920759,2.204241 0,1.290457 -0.920759,2.211216 -0.913783,0.913784 -2.204241,0.913784 -1.290457,0 -2.211216,-0.913784 -0.913784,-0.920759 -0.913784,-2.211216 0,-0.676618 0.272043,-1.276507 0.279018,-0.606864 0.767299,-1.046317 l -0.453404,-0.683594 -2.462333,3.271485 q -0.125558,0.181361 -0.355747,0.181361 l -1.374163,0 q -0.160436,1.143974 -1.039342,1.911273 -0.878906,0.767299 -2.050781,0.767299 -1.290458,0 -2.211217,-0.913784 -0.913783,-0.920759 -0.913783,-2.211216 0,-1.290458 0.913783,-2.204241 0.920759,-0.920759 2.211217,-0.920759 0.795201,0 1.499721,0.383649 l 0.955636,-1.276506 -1.5625,0 q -0.181362,0 -0.313895,-0.132534 -0.132534,-0.132533 -0.132534,-0.313895 0,-0.181361 0.132534,-0.313895 0.132533,-0.132533 0.313895,-0.132533 l 2.678571,0 0,0.892857 3.03432,0 -0.592913,-0.892857 -1.548549,0 q -0.181362,0 -0.313896,-0.132534 -0.132533,-0.132533 -0.132533,-0.313895 0,-0.181362 0.132533,-0.313895 0.132534,-0.132534 0.313896,-0.132534 l 1.785714,0 q 0.23019,0 0.369699,0.195313 l 1.862444,2.790179 q 0.634765,-0.30692 1.339285,-0.30692 1.290458,0 2.204241,0.920759 z" />
+  </g>
+</svg>
diff --git a/web/images/bus.svg b/web/images/bus.svg
new file mode 100644
index 00000000..6f1b7a90
--- /dev/null
+++ b/web/images/bus.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="bus.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-29.149417"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4477"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 17.056362,22.866908 q 0.265067,-0.265067 0.265067,-0.634766 0,-0.369699 -0.265067,-0.62779 -0.258092,-0.265067 -0.62779,-0.265067 -0.369699,0 -0.634766,0.265067 -0.258091,0.258091 -0.258091,0.62779 0,0.369699 0.258091,0.634766 0.265067,0.258091 0.634766,0.258091 0.369698,0 0.62779,-0.258091 z m 7.142857,0 q 0.265067,-0.265067 0.265067,-0.634766 0,-0.369699 -0.265067,-0.62779 -0.258091,-0.265067 -0.62779,-0.265067 -0.369699,0 -0.634766,0.265067 -0.258091,0.258091 -0.258091,0.62779 0,0.369699 0.258091,0.634766 0.265067,0.258091 0.634766,0.258091 0.369699,0 0.62779,-0.258091 z m -0.0558,-3.397043 -0.502233,-2.678571 q -0.03488,-0.160435 -0.160435,-0.258092 -0.118582,-0.104631 -0.279018,-0.104631 l -6.40346,0 q -0.160435,0 -0.285993,0.104631 -0.118582,0.09766 -0.15346,0.258092 l -0.502232,2.678571 q -0.03488,0.209264 0.09766,0.369699 0.132534,0.160435 0.341797,0.160435 l 7.407924,0 q 0.209264,0 0.341797,-0.160435 0.132534,-0.160435 0.09766,-0.369699 z m -1.674108,-4.031808 q 0.09766,-0.09766 0.09766,-0.237165 0,-0.139509 -0.09766,-0.237165 -0.09766,-0.09766 -0.237165,-0.09766 l -4.464285,0 q -0.139509,0 -0.237166,0.09766 -0.09766,0.09766 -0.09766,0.237165 0,0.139509 0.09766,0.237165 0.09766,0.09766 0.237166,0.09766 l 4.464285,0 q 0.139509,0 0.237165,-0.09766 z m 2.887835,4.820034 0,4.206194 -0.892857,0 0,0.892857 q 0,0.369699 -0.265067,0.62779 -0.258091,0.265067 -0.62779,0.265067 -0.369699,0 -0.634766,-0.265067 -0.258091,-0.258091 -0.258091,-0.62779 l 0,-0.892857 -5.357143,0 0,0.892857 q 0,0.369699 -0.265067,0.62779 -0.258092,0.265067 -0.62779,0.265067 -0.369699,0 -0.634766,-0.265067 -0.258091,-0.258091 -0.258091,-0.62779 l 0,-0.892857 -0.892857,0 0,-4.206194 q 0,-0.78125 0.174386,-1.555525 l 0.718471,-3.166853 q 0.06278,-0.544084 0.676618,-0.955636 0.620815,-0.411551 1.604353,-0.620814 0.99051,-0.209264 2.183311,-0.209264 1.192802,0 2.17634,0.209264 0.990513,0.209263 1.604352,0.620814 0.620815,0.411552 0.683594,0.955636 l 0.732422,3.166853 q 0.160435,0.711496 0.160435,1.555525 z" />
+  </g>
+</svg>
diff --git a/web/images/car.svg b/web/images/car.svg
new file mode 100644
index 00000000..d712374f
--- /dev/null
+++ b/web/images/car.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="car.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-29.149417"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4409"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 15.877511,21.904297 q 0.327846,-0.327846 0.327846,-0.788225 0,-0.46038 -0.327846,-0.788226 Q 15.549665,20 15.089285,20 q -0.460379,0 -0.788225,0.327846 -0.327846,0.327846 -0.327846,0.788226 0,0.460379 0.327846,0.788225 0.327846,0.327846 0.788225,0.327846 0.46038,0 0.788226,-0.327846 z m 0.578962,-3.020368 7.087053,0 -0.620814,-2.490235 q -0.01395,-0.0558 -0.09766,-0.118582 -0.0837,-0.06976 -0.146484,-0.06976 l -5.357143,0 q -0.06278,0 -0.146484,0.06976 -0.08371,0.06278 -0.09766,0.118582 l -0.620815,2.490235 z m 9.242466,3.020368 q 0.327846,-0.327846 0.327846,-0.788225 0,-0.46038 -0.327846,-0.788226 Q 25.371093,20 24.910714,20 q -0.46038,0 -0.788226,0.327846 -0.327846,0.327846 -0.327846,0.788226 0,0.460379 0.327846,0.788225 0.327846,0.327846 0.788226,0.327846 0.460379,0 0.788225,-0.327846 z m 1.443918,-1.457868 0,2.678571 q 0,0.09766 -0.06278,0.160436 -0.06278,0.06278 -0.160436,0.06278 l -0.669642,0 0,0.892857 q 0,0.558035 -0.390625,0.94866 -0.390625,0.390625 -0.948661,0.390625 -0.558036,0 -0.948661,-0.390625 -0.390625,-0.390625 -0.390625,-0.94866 l 0,-0.892857 -7.142857,0 0,0.892857 q 0,0.558035 -0.390625,0.94866 -0.390625,0.390625 -0.948661,0.390625 -0.558035,0 -0.94866,-0.390625 Q 13.75,24.799107 13.75,24.241072 l 0,-0.892857 -0.669643,0 q -0.09766,0 -0.160436,-0.06278 -0.06278,-0.06278 -0.06278,-0.160436 l 0,-2.678571 q 0,-0.648717 0.453404,-1.102121 0.46038,-0.460379 1.109096,-0.460379 l 0.195313,0 0.732422,-2.922712 q 0.160435,-0.655692 0.725446,-1.095145 0.565011,-0.446429 1.248605,-0.446429 l 5.357143,0 q 0.683594,0 1.248605,0.446429 0.565011,0.439453 0.725446,1.095145 l 0.732422,2.922712 0.195313,0 q 0.648716,0 1.10212,0.460379 0.46038,0.453404 0.46038,1.102121 z" />
+  </g>
+</svg>
diff --git a/web/images/default.svg b/web/images/default.svg
new file mode 100644
index 00000000..983e487c
--- /dev/null
+++ b/web/images/default.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="default.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-7.4058825"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.81362325;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4250"
+       cx="20"
+       cy="20"
+       r="5.2625632" />
+  </g>
+</svg>
diff --git a/web/images/motorcycle.svg b/web/images/motorcycle.svg
new file mode 100644
index 00000000..5e46b4d3
--- /dev/null
+++ b/web/images/motorcycle.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="motorcycle.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-7.4058825"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4140"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 28.014333,20.976253 q 0.08371,0.718471 -0.15346,1.388114 -0.237165,0.662667 -0.690569,1.136997 -0.453404,0.474331 -1.109096,0.739398 -0.648716,0.265067 -1.367187,0.216238 -1.123047,-0.07673 -1.953125,-0.87193 -0.823103,-0.795201 -0.93471,-1.911273 -0.08371,-0.774274 0.188337,-1.464843 0.279018,-0.697545 0.830078,-1.192802 l -0.495257,-0.746373 q -0.669643,0.558036 -1.053292,1.353237 -0.38365,0.795201 -0.38365,1.702009 0,0.188337 -0.132533,0.327846 -0.125558,0.132533 -0.313895,0.132533 l -1.785714,0 -0.481306,0 q -0.160436,1.143974 -1.039342,1.911273 -0.878906,0.767299 -2.050781,0.767299 -1.290458,0 -2.211217,-0.913784 -0.913783,-0.920759 -0.913783,-2.211216 0,-1.290458 0.913783,-2.204241 0.920759,-0.920759 2.211217,-0.920759 0.530134,0 1.060268,0.188337 l 0.167411,-0.313895 q -0.85798,-0.767299 -2.120536,-0.767299 l -0.446429,0 q -0.181361,0 -0.313895,-0.132534 -0.132533,-0.132533 -0.132533,-0.313895 0,-0.181361 0.132533,-0.313895 0.132534,-0.132533 0.313895,-0.132533 l 0.892857,0 q 0.544085,0 1.01144,0.09766 0.467355,0.09068 0.809152,0.265067 0.348772,0.174386 0.502232,0.279018 0.15346,0.09766 0.355748,0.251116 l 3.571428,0 0.802177,0 -0.592913,-0.892857 -1.548549,0 q -0.209264,0 -0.341797,-0.15346 -0.132534,-0.160435 -0.09766,-0.369699 0.0279,-0.160435 0.160435,-0.265067 0.132533,-0.104632 0.299944,-0.104632 l 1.764788,0 q 0.23019,0 0.369699,0.195313 l 0.488281,0.732422 0.795201,-0.795201 q 0.132533,-0.132534 0.32087,-0.132534 l 0.70452,0 q 0.181362,0 0.313895,0.132534 0.132534,0.132533 0.132534,0.313895 l 0,0.892857 q 0,0.181362 -0.132534,0.313895 -0.132533,0.132534 -0.313895,0.132534 l -1.248605,0 0.802177,1.199777 q 0.913783,-0.439454 1.918248,-0.251117 0.997488,0.181362 1.702009,0.941686 0.70452,0.753348 0.823102,1.764788 z m -12.925502,2.594866 q 0.802176,0 1.416016,-0.502232 0.613839,-0.509208 0.774274,-1.283483 l -2.19029,0 q -0.244141,0 -0.38365,-0.216238 -0.125558,-0.223215 -0.007,-0.439453 l 1.025391,-1.932199 q -0.327846,-0.09068 -0.634766,-0.09068 -0.920759,0 -1.576451,0.655692 -0.655692,0.655692 -0.655692,1.576451 0,0.920759 0.655692,1.576451 0.655692,0.655692 1.576451,0.655692 z m 8.244978,-0.655692 q 0.655692,0.655692 1.576451,0.655692 0.920758,0 1.57645,-0.655692 0.655692,-0.655692 0.655692,-1.576451 0,-0.920759 -0.655692,-1.576451 -0.655692,-0.655692 -1.57645,-0.655692 -0.418527,0 -0.844029,0.167411 l 1.213727,1.813616 q 0.104632,0.160435 0.06976,0.341797 -0.03488,0.181361 -0.188337,0.279018 -0.104632,0.07673 -0.251116,0.07673 -0.244141,0 -0.369699,-0.202287 L 23.326833,19.7695 q -0.648716,0.662668 -0.648716,1.569476 0,0.920759 0.655692,1.576451 z" />
+  </g>
+</svg>
diff --git a/web/images/person.svg b/web/images/person.svg
new file mode 100644
index 00000000..71546ecb
--- /dev/null
+++ b/web/images/person.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="person.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.839192"
+     inkscape:cx="-2.9160663"
+     inkscape:cy="21.915617"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4140"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 24.464286,23.508649 q 0,0.760323 -0.439454,1.304408 -0.432477,0.544085 -1.046317,0.544085 l -5.957031,0 q -0.613839,0 -1.053292,-0.544085 -0.432478,-0.544085 -0.432478,-1.304408 0,-0.592913 0.0558,-1.116072 0.06278,-0.530134 0.223214,-1.060268 0.160435,-0.537109 0.404576,-0.913783 0.251116,-0.38365 0.655692,-0.620815 0.411551,-0.24414 0.941685,-0.24414 0.913784,0.892857 2.183315,0.892857 1.269531,0 2.183315,-0.892857 0.530134,0 0.934709,0.24414 0.411552,0.237165 0.655692,0.620815 0.251116,0.376674 0.411552,0.913783 0.160435,0.530134 0.216239,1.060268 0.06278,0.523159 0.06278,1.116072 z m -2.57394,-8.077567 q 0.788225,0.78125 0.788225,1.890346 0,1.109096 -0.788225,1.897321 -0.78125,0.78125 -1.890346,0.78125 -1.109096,0 -1.897322,-0.78125 -0.78125,-0.788225 -0.78125,-1.897321 0,-1.109096 0.78125,-1.890346 Q 18.890904,14.642856 20,14.642856 q 1.109096,0 1.890346,0.788226 z" />
+  </g>
+</svg>
diff --git a/web/images/plane.svg b/web/images/plane.svg
new file mode 100644
index 00000000..5c81e9b4
--- /dev/null
+++ b/web/images/plane.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="plane.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-7.4058825"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4140"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 24.710579,15.289739 q 0.30692,0.362723 0.08371,1.032366 -0.223214,0.669642 -0.753348,1.199776 l -1.123047,1.123047 1.116072,4.854911 q 0.03488,0.132533 -0.08371,0.23019 l -0.892857,0.669643 q -0.04883,0.04185 -0.132533,0.04185 -0.0279,0 -0.04883,-0.007 -0.104632,-0.02093 -0.146485,-0.111607 l -1.946149,-3.543527 -1.806641,1.80664 0.369699,1.353237 q 0.03488,0.118583 -0.0558,0.216239 l -0.669643,0.669643 q -0.06278,0.06278 -0.160435,0.06278 l -0.01395,0 Q 18.342,24.873977 18.279221,24.797247 L 16.960858,23.03946 15.203046,21.7211 q -0.07673,-0.04883 -0.09068,-0.160435 -0.007,-0.09068 0.06278,-0.174386 l 0.669643,-0.676619 q 0.06278,-0.06278 0.160435,-0.06278 0.04185,0 0.0558,0.007 l 1.353237,0.369698 1.806641,-1.80664 -3.543527,-1.94615 q -0.09766,-0.0558 -0.118583,-0.16741 -0.01395,-0.111608 0.06278,-0.188337 L 16.51443,16.02216 q 0.09766,-0.09068 0.209263,-0.0558 l 4.638672,1.109096 1.116071,-1.116072 q 0.530134,-0.530134 1.199777,-0.753348 0.669643,-0.223214 1.032366,0.08371 z" />
+  </g>
+</svg>
diff --git a/web/images/ship.svg b/web/images/ship.svg
new file mode 100644
index 00000000..c82dc6c7
--- /dev/null
+++ b/web/images/ship.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ship.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="14.337652"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4511"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 25.489676,24.596818 q 0.132533,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.892857,0.892858 -0.62779,0.62779 -0.578962,-0.578962 -0.578962,0.578962 q -0.125558,0.132533 -0.313895,0.132533 -0.188337,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 l -0.578963,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 L 16.875,25.538504 16.296038,26.117466 q -0.132534,0.132533 -0.313896,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.892857,-0.892857 0.62779,-0.627791 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.578962 0.578963,-0.578962 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313896,0.132533 L 23.125,25.17578 23.703962,24.596818 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 z M 14.510323,24.331751 q -0.132533,0.132534 -0.313895,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.892857,-0.892857 0.62779,-0.62779 0.578962,0.571987 0.578962,-0.571987 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.571987 0.446429,-0.446429 0,-2.043806 -1.464844,-2.19029 q -0.118582,-0.181361 -0.04883,-0.390625 0.06976,-0.216239 0.279018,-0.285993 l 1.234654,-0.404576 0,-2.085659 0.892857,0 0,-0.892857 1.785714,0 0,-0.892857 1.785715,0 0,0.892857 1.785714,0 0,0.892857 0.892857,0 0,2.085659 1.234654,0.404576 q 0.209264,0.06975 0.279018,0.285993 0.06976,0.209264 -0.04883,0.390625 l -1.464844,2.19029 0,2.043806 0.132534,-0.125558 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.571987 0.578962,-0.571987 q 0.132533,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.892857,0.892857 -0.62779,0.62779 -0.578962,-0.578962 -0.578962,0.578962 q -0.125558,0.132534 -0.313895,0.132534 -0.188337,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 l -0.578963,-0.578962 -0.578962,0.578962 q -0.132533,0.132534 -0.313895,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 L 16.875,23.752789 16.296038,24.331751 q -0.132534,0.132534 -0.313896,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 z m 2.811105,-7.90318 0,0.892857 L 20,16.428571 l 2.678571,0.892857 0,-0.892857 -0.892857,0 0,-0.892858 -3.571429,0 0,0.892858 -0.892857,0 z" />
+  </g>
+</svg>
diff --git a/web/images/truck.svg b/web/images/truck.svg
new file mode 100644
index 00000000..0f82a3e8
--- /dev/null
+++ b/web/images/truck.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40 40"
+   id="svg4145"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="truck.svg">
+  <defs
+     id="defs4147" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="-7.4058825"
+     inkscape:cy="17.209557"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="981"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4150">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+       id="path4724"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssscccs" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4443"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 17.726005,23.75279 q 0.265067,-0.265067 0.265067,-0.627791 0,-0.362723 -0.265067,-0.62779 -0.265067,-0.265067 -0.627791,-0.265067 -0.362723,0 -0.62779,0.265067 -0.265067,0.265067 -0.265067,0.62779 0,0.362724 0.265067,0.627791 0.265067,0.265067 0.62779,0.265067 0.362724,0 0.627791,-0.265067 z m -2.413505,-4.199219 2.678572,0 0,-1.785714 -1.102121,0 q -0.09068,0 -0.15346,0.06278 l -1.360212,1.360212 q -0.06278,0.06278 -0.06278,0.153459 l 0,0.209264 z m 8.663505,4.199219 q 0.265067,-0.265067 0.265067,-0.627791 0,-0.362723 -0.265067,-0.62779 -0.265067,-0.265067 -0.627791,-0.265067 -0.362723,0 -0.62779,0.265067 -0.265067,0.265067 -0.265067,0.62779 0,0.362724 0.265067,0.627791 0.265067,0.265067 0.62779,0.265067 0.362724,0 0.627791,-0.265067 z m 2.050781,-8.217076 0,7.142857 q 0,0.104632 -0.0279,0.188337 -0.0279,0.07673 -0.09766,0.125558 -0.06278,0.04883 -0.111607,0.0837 -0.04883,0.0279 -0.167411,0.04185 -0.111607,0.007 -0.15346,0.01395 -0.04185,0 -0.181361,0 -0.132534,-0.007 -0.15346,-0.007 0,0.739398 -0.523159,1.262556 -0.523158,0.523159 -1.262556,0.523159 -0.739397,0 -1.262555,-0.523159 Q 21.5625,23.864397 21.5625,23.124999 l -2.678571,0 q 0,0.739398 -0.523159,1.262556 -0.523158,0.523159 -1.262556,0.523159 -0.739397,0 -1.262555,-0.523159 Q 15.3125,23.864397 15.3125,23.124999 l -0.446428,0 q -0.02093,0 -0.160436,0.007 -0.132533,0 -0.174386,0 -0.04185,-0.007 -0.160435,-0.01395 -0.111607,-0.01395 -0.160435,-0.04185 -0.04883,-0.03488 -0.118583,-0.0837 -0.06278,-0.04883 -0.09068,-0.125558 -0.0279,-0.0837 -0.0279,-0.188337 0,-0.181362 0.132534,-0.313895 0.132533,-0.132534 0.313895,-0.132534 l 0,-2.232143 q 0,-0.0558 -0.007,-0.24414 0,-0.188337 0,-0.265067 0.007,-0.07673 0.02093,-0.237165 0.01395,-0.167411 0.04185,-0.258092 0.03488,-0.09766 0.09766,-0.216239 0.06975,-0.118582 0.160435,-0.209263 l 1.381138,-1.381138 q 0.132534,-0.132534 0.348773,-0.223215 0.223214,-0.09068 0.411551,-0.09068 l 1.116072,0 0,-1.339285 q 0,-0.181362 0.132533,-0.313895 0.132534,-0.132534 0.313895,-0.132534 l 7.142857,0 q 0.181362,0 0.313895,0.132534 0.132534,0.132533 0.132534,0.313895 z" />
+  </g>
+</svg>
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 580c2a96..ee6bef81 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -60,6 +60,7 @@
     "devicePhone": "Phone",
     "deviceModel": "Model",
     "deviceContact": "Contact",
+    "deviceCategory": "Category",
     "deviceLastUpdate": "Last Update",
     "deviceCommand": "Command",
     "deviceFollow": "Follow",
@@ -185,5 +186,15 @@
     "statisticsActiveDevices": "Active Devices",
     "statisticsRequests": "Requests",
     "statisticsMessagesReceived": "Messages Received",
-    "statisticsMessagesStored": "Messages Stored"
+    "statisticsMessagesStored": "Messages Stored",
+    "categoryArrow": "Arrow",
+    "categoryDefault": "Default",
+    "categoryCar": "Car",
+    "categoryBus": "Bus",
+    "categoryTruck": "Truck",
+    "categoryShip": "Ship",
+    "categoryPlane": "Plane",
+    "categoryMotorcycle": "Motorcycle",
+    "categoryBicycle": "Bicycle",
+    "categoryPerson": "Person"
 }
\ No newline at end of file
diff --git a/web/load.js b/web/load.js
index f4987acd..0d13b2c6 100644
--- a/web/load.js
+++ b/web/load.js
@@ -1,24 +1,34 @@
 (function () {
+    var debugMode, touchMode, locale, localeParameter, extjsVersion, fontAwesomeVersion, olVersion;
 
     function addStyleFile(file) {
         var link = document.createElement('link');
         link.setAttribute('rel', 'stylesheet');
         link.setAttribute('type', 'text/css');
         link.setAttribute('href', file);
-        document.head.appendChild(link)
+        document.head.appendChild(link);
     }
 
     function addScriptFile(file) {
         var script = document.createElement('script');
         script.setAttribute('src', file);
-        script.async = false
+        script.async = false;
         document.head.appendChild(script);
     }
 
-    var debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug';
-    var touchMode = 'ontouchstart' in window || navigator.maxTouchPoints;
+    function addSvgFile(file, id) {
+        var svg = document.createElement('object');
+        svg.setAttribute('id', id);
+        svg.setAttribute('data', file);
+        svg.setAttribute('type', 'image/svg+xml');
+        svg.setAttribute('style', 'visibility:hidden');
+        document.body.appendChild(svg);
+    }
+
+    debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug';
+    touchMode = 'ontouchstart' in window || navigator.maxTouchPoints;
 
-    var locale = {};
+    locale = {};
     window.Locale = locale;
 
     locale.languages = {
@@ -65,7 +75,7 @@
         'zh': { name: '中文', code: 'zh_CN' }
     };
 
-    var localeParameter = window.location.search.match(/locale=([^&#]+)/);
+    localeParameter = window.location.search.match(/locale=([^&#]+)/);
     locale.language = localeParameter && localeParameter[1];
     if (locale.language === undefined) {
         locale.language = window.navigator.userLanguage || window.navigator.language;
@@ -76,7 +86,7 @@
         locale.language = 'en'; // default
     }
 
-    window.addEventListener("load", function (event) {
+    window.addEventListener('load', function (event) {
 
         if (debugMode) {
             Ext.Loader.setConfig({
@@ -99,9 +109,9 @@
 
     });
 
-    var extjsVersion = '6.0.1';
-    var fontAwesomeVersion = '4.6.3';
-    var olVersion = '3.18.2';
+    extjsVersion = '6.0.1';
+    fontAwesomeVersion = '4.6.3';
+    olVersion = '3.18.2';
 
     if (debugMode) {
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js');
@@ -119,6 +129,16 @@
     addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js');
 
     addStyleFile('app.css');
-    addScriptFile('arrow.js');
+
+    addSvgFile('images/default.svg', 'defaultSvg');
+    addSvgFile('images/arrow.svg', 'arrowSvg');
+    addSvgFile('images/car.svg', 'carSvg');
+    addSvgFile('images/bus.svg', 'busSvg');
+    addSvgFile('images/truck.svg', 'truckSvg');
+    addSvgFile('images/ship.svg', 'shipSvg');
+    addSvgFile('images/plane.svg', 'planeSvg');
+    addSvgFile('images/motorcycle.svg', 'motorcycleSvg');
+    addSvgFile('images/bicycle.svg', 'bicycleSvg');
+    addSvgFile('images/person.svg', 'personSvg');
 
 })();