Commit 03a2dcbe authored by Michael Ochmann's avatar Michael Ochmann
Browse files

added leaflet map

parent fa13c3e3
......@@ -17,7 +17,10 @@
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="icon.svg">
sodipodi:docname="icon.svg"
inkscape:export-filename="/var/www/apps/location-dependend-systems/doc/icon.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4">
<linearGradient
......@@ -50,9 +53,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.4949747466999994"
inkscape:cx="227.8948232301838"
inkscape:cy="124.0945296224167"
inkscape:zoom="0.494974746699999"
inkscape:cx="52.17128026483465"
inkscape:cy="-40.53717753561568"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
......@@ -79,19 +82,35 @@
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-540.3621835783706)">
<path
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4383);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:7.0866141319;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 0,540.3621826171875 512,540.3621826171875 512,1052.362182617187 0,1052.362182617187 Z"
id="rect4136" />
id="rect4136"
width="512"
height="512"
x="0"
y="540.3621826171875" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#b4b4b4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 349.046875,685.166015625 320.18359375,718.2734375 273.466796875,690.46484375 250.005859375,781.248046875 171.826171875,741.67578125 114.837890625,816.900390625 90.166015625,952.587890625 109.84375,956.166015625 133.66015625,825.173828125 177.6875,767.05859375 263.150390625,810.318359375 286.158203125,721.294921875 324.29296875,743.994140625 364.12109375,698.30859375 349.046875,685.166015625 Z"
style="fill:none;fill-rule:evenodd;stroke:#acacac;stroke-width:30;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 394.2528449306999,918.8364157235299 345.1317358823527,889.79941310591 296.560307285296,804.7138122808094 217.4340962840647,838.8907859824178 153.2745415850997,788.8682649935798"
id="path4191"
inkscape:connector-curvature="0" />
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:7.0866141319;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 348.4765625 42.029296875 C 324.8299891480941 42.029296875 305.6621093750001 61.199129773094 305.662109375 84.845703125 C 305.662109375 108.4922764769059 348.4765624999999 166.314453125 348.4765625 166.314453125 C 348.4765625 166.314453125 391.2929687500001 108.4922764769059 391.29296875 84.845703125 C 391.29296875 61.199129773094 372.1231358519059 42.029296875 348.4765625 42.029296875 z M 348.4765625 61.654296875 C 361.2851227732861 61.654296875 371.6699218750001 72.0371428517135 371.669921875 84.845703125 C 371.6699218749999 97.65426339828639 361.2851227732863 108.037109375 348.4765625 108.037109375 C 335.6680022267137 108.037109375 325.2851562500002 97.65426339828639 325.28515625 84.845703125 C 325.28515625 72.0371428517135 335.6680022267139 61.654296875 348.4765625 61.654296875 z M 285.7734375 339.546875 L 272.255859375 341.423828125 L 272.255859375 392.267578125 C 271.126960819633 394.9464558128558 269.0664492387573 396.71484375 266.4921875 396.71484375 C 262.8312044296265 396.71484375 261.611328125 395.4950774536136 261.611328125 390.23828125 L 261.611328125 358.322265625 L 248.09375 358.322265625 L 248.09375 362.828125 C 246.4979368667603 358.416171043396 242.3672861557007 357.8515625000001 239.26953125 357.8515625 C 226.2214121017456 357.8515625 221.3417968750001 372.5906627349852 221.341796875 384.04296875 C 221.341796875 400.3765855255126 229.97613381958 405.8203124999999 237.861328125 405.8203125 C 244.5261947402954 405.8203125 248.0013576736449 401.5016763458253 249.97265625 397.18359375 C 251.2868553009033 402.5342613143921 254.5715828704834 405.8203124999999 261.142578125 405.8203125 C 264.2455905600079 405.8203125 268.7504549646837 405.0300838387445 272.255859375 400.919921875 L 272.255859375 405.2578125 L 285.7734375 405.2578125 L 285.7734375 384.32421875 C 286.712151107788 381.226463844299 288.6825242080687 378.69140625 292.53125 378.69140625 C 296.5677185134887 378.69140625 297.3203125000001 381.5079679183962 297.3203125 385.919921875 C 297.3203125 388.1728345336917 297.1308593749999 391.3632926025391 297.130859375 392.865234375 C 297.130859375 399.8117150726318 301.1674300613403 405.8203124999999 310.6484375 405.8203125 C 314.3567849002486 405.8203125 318.0606797779366 404.8647998066967 320.841796875 400.80078125 L 320.841796875 405.2578125 L 334.359375 405.2578125 L 334.359375 369.5859375 C 336.330673576355 367.4268962020875 338.1147602844239 365.8320312500001 339.9921875 365.83203125 C 343.5592992095947 365.83203125 341.4927183532714 371.7441406249999 347.125 371.744140625 C 350.9737257919311 371.744140625 352.5703124999999 368.9293007125858 352.5703125 366.20703125 C 352.5703125 362.2644340972903 349.1916149139404 357.8515625000001 344.498046875 357.8515625 C 340.55544972229 357.8515625 337.0816444625855 360.8551273727414 334.359375 364.140625 L 334.359375 358.322265625 L 320.841796875 358.322265625 L 320.841796875 388.626953125 C 319.6424087121829 394.1330859574581 318.7681489517692 396.71484375 314.404296875 396.71484375 C 310.7433138046264 396.71484375 309.8046874999999 394.9311324768064 309.8046875 392.302734375 C 309.8046875 390.6130498809814 310.1796875 385.731428283691 310.1796875 383.478515625 C 310.1796875 374.2791222686767 303.7962114334107 371.181640625 296.755859375 371.181640625 C 295.9110171279908 371.181640625 295.0674984970092 371.1815192642213 294.22265625 371.275390625 L 310.1796875 358.322265625 L 300.88671875 358.322265625 L 285.7734375 372.58984375 L 285.7734375 339.546875 z M 175.951171875 343.490234375 L 162.43359375 345.3671875 L 162.43359375 358.322265625 L 159.4296875 358.322265625 L 159.4296875 362.076171875 L 162.43359375 362.076171875 L 162.43359375 391.26953125 C 162.43359375 399.9995678024294 165.8136717147827 405.8203124999998 175.482421875 405.8203125 C 178.8766947171642 405.8203125 183.9458915203581 404.871769416021 187.55078125 399.666015625 L 187.55078125 405.2578125 L 201.068359375 405.2578125 L 201.068359375 369.5859375 C 203.039657951355 367.4268962020875 204.8237446594239 365.8320312500001 206.701171875 365.83203125 C 210.2682835845947 365.83203125 208.2036558532714 371.7441406249999 213.8359375 371.744140625 C 217.6846632919311 371.744140625 219.279296875 368.9293007125858 219.279296875 366.20703125 C 219.279296875 362.2644340972903 215.9005992889404 357.8515625000001 211.20703125 357.8515625 C 207.2644340972901 357.8515625 203.7906288375856 360.8551273727414 201.068359375 364.140625 L 201.068359375 358.322265625 L 187.55078125 358.322265625 L 187.55078125 388.455078125 L 187.498046875 388.455078125 C 187.1225614318848 393.1486461639405 184.4930143203735 396.71484375 180.83203125 396.71484375 C 177.1710481796265 396.71484375 175.951171875 395.4950774536136 175.951171875 390.23828125 L 175.951171875 362.076171875 L 181.677734375 362.076171875 L 181.677734375 358.322265625 L 175.951171875 358.322265625 L 175.951171875 343.490234375 z M 243.494140625 363.671875 C 246.5918955307007 363.671875 247.8121359176637 366.3013994064331 248.09375 367.333984375 L 248.09375 388.455078125 C 248.09375 393.8996170501711 244.7144569625854 396.7148437499999 241.9921875 396.71484375 C 239.6454034805297 396.71484375 235.046875 396.5269988555909 235.046875 383.197265625 C 235.046875 375.0304572372432 237.3925021743773 363.6718750000001 243.494140625 363.671875 z "
transform="translate(0,540.3621835783706)"
id="path4140" />
d="M 162.7623408433433,605.8708113476253 C 126.0466344674092,605.8708113476253 96.28375844766134,635.6349497307923 96.28375844766134,672.3506561067268 96.28375844766134,709.066362482661 162.7623408433433,798.8457825538672 162.7623408433433,798.8457825538672 162.7623408433433,798.8457825538672 229.242185602445,709.066362482661 229.242185602445,672.3506561067268 229.242185602445,635.6349497307923 199.4780472192779,605.8708113476253 162.7623408433433,605.8708113476253 Z M 162.7623408433433,636.3404772031675 C 182.6500146764118,636.3404772031675 198.7725197469024,652.4629822736577 198.7725197469025,672.3506561067268 198.7725197469024,692.2383299397953 182.6500146764121,708.359572646866 162.7623408433433,708.359572646866 142.8746670102748,708.359572646866 126.7534243032042,692.2383299397953 126.7534243032042,672.3506561067268 126.7534243032042,652.4629822736577 142.8746670102752,636.3404772031675 162.7623408433433,636.3404772031675 Z"
id="path4140"
inkscape:connector-curvature="0" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:35.6782264709px;line-height:125%;font-family:osifont;-inkscape-font-specification:'osifont, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="97.600182"
y="968.75745"
id="text4373"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4375"
x="97.600182"
y="968.75745"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:160.5520172119px;font-family:'Lobster Two';-inkscape-font-specification:'Lobster Two Bold';fill:#ffffff;fill-opacity:1">trakr.</tspan></text>
</g>
</svg>
src/images/appIcon.png

17.9 KB | W: | H:

src/images/appIcon.png

20.6 KB | W: | H:

src/images/appIcon.png
src/images/appIcon.png
src/images/appIcon.png
src/images/appIcon.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -5,6 +5,12 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<link rel="apple-touch-icon" href="images/appIcon.png">
<title>HeightTracker</title>
<link rel=stylesheet type=text/css href=app.css>
......
import UIViewController from "./UIViewController.js";
import MapController from "./MapController.js";
import $ from "../smallQ.js";
import Std from "../Std.js";
import Settings from "../Settings.js";
import GeoPoint from "../GeoPoint.js";
const States = {
HEIGHTMAP : 0,
MAP : 1
};
class HeightMapViewController extends UIViewController {
constructor(view, model) {
super(view, model);
this.state = States.MAP;
this.canvas = null;
this.drag = false;
this.lastX = 0;
this.translated = 0;
this.isCapturing = false;
this.addSubview(new MapController("#osm", this.model));
}
addPoint(geoPoint) {
......@@ -55,7 +63,15 @@ class HeightMapViewController extends UIViewController {
clearInterval(HeightMapViewController.MAINLOOP);
this.renderCall();
});
if (!this.isCapturing && this.model.points.length === 0)
$("#hmButton").click(element => {
this.state = States.HEIGHTMAP;
this.renderCall();
});
$("#mButton").click(element => {
this.state = States.MAP;
this.renderCall();
});
if (!this.isCapturing && this.model.points.length === 0 || this.state === States.MAP)
return;
this.canvas = $("#heightmap").get();
......@@ -198,14 +214,27 @@ class HeightMapViewController extends UIViewController {
<button class="big" id="startCapturing">Start</button>
</section>
`;
else
else {
let hmActive = this.state === States.HEIGHTMAP ? " class='active'" : "";
let mActive = this.state === States.MAP ? " class='active'" : "";
content = `
<ul class=buttonGroup>
<li class="active">Heightmap</li>
<li>Map</li>
<li${hmActive} id="hmButton">Heightmap</li>
<li${mActive} id="mButton">Map</li>
</ul>
<canvas id="heightmap"></canvas>
`;
switch (this.state) {
case States.HEIGHTMAP:
content += `
<canvas id="heightmap"></canvas>
`;
break;
case States.MAP:
content += `
<div id="osm"></div>
`;
}
}
return `
${content}
......
import UIViewController from "./UIViewController.js";
import $ from "../smallQ.js";
class MapController extends UIViewController {
viewDidLoad() {
if ($("#osm").size() <= 0)
return;
$("#osm").css("height", $("#osm").get().parentNode.offsetHeight - 18 - (40 + 26) + "px");
let lastPoint = this.model.points[(this.model.points.length - 1)];
let map = L.map("osm").setView([lastPoint.latitude, lastPoint.longitude], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoibWlrbzAwNyIsImEiOiJjampuMGRwN2wxdDNjM3ZuendsZzZod2FtIn0.0kPe41l0WPOHuV0Cr82ZKw'
}).addTo(map);
}
}
export default MapController;
\ No newline at end of file
......@@ -105,7 +105,9 @@ class smallQ {
return this;
}
size() {
return this.elements.length;
}
static $(selector) {
return new smallQ(selector);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment