melch/wundertile
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First Component

Browse Source
This commit is contained in:
Alfred Melch 2019-04-28 20:03:32 +02:00
parent 73780d9530
commit b82dc913a6
9 changed files with 327 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
app/static/bundle.js
View File

File diff suppressed because one or more lines are too long

28
app/static/style.css
View File

@ -1,3 +1,29 @@
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header, footer {
background-color: aqua;
padding: 14px 10px;
}
main {
background-color: red;
width: 80%;
margin: 0 auto;
}
#map {
height: 60vh;
}
}
.flex {
display: flex;
}
.flex > *[main] {
flex: 1;
}

31
app/templates/base.html
View File

@ -12,21 +12,28 @@
</head>
<body>
<header>
<a href="{{ url_for('index') }}">Home</a>
{% if g.user %}
| <span>Hello {{ g.user.name }}</span>
| <a href="{{ url_for('auth.logout') }}">Logout</a>
{% else %}
| <a href="{{ url_for('auth.login') }}">Sign in</a>
| <a href="{{ url_for('auth.register') }}">Register</a>
{% endif %}
<header class="flex">
<div main>
<a href="{{ url_for('index') }}"><img main alt="Wundertile logo"></a>
</div>
<div>
{% if g.user %}
<span>Hello {{ g.user.name }}</span>
| <a href="{{ url_for('auth.logout') }}">Logout</a>
{% else %}
<a href="{{ url_for('auth.login') }}">Sign in</a>
| <a href="{{ url_for('auth.register') }}">Register</a>
{% endif %}
</div>
</header>
<main>
{% block body %}{% endblock %}
</main>
<hr>
{% block body %}{% endblock %}
<footer>
Made by Alfred Melch
</footer>
<hr>
<h2>Messages</h2>

12
app/templates/index.html
View File

@ -2,10 +2,18 @@
{% block body %}
<h1>Wundertile - This is home page</h1>
<h1>Wundertile - A collaborative TileLayer</h1>
<p>Hello Friend, this Website Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti adipisci est quo libero odit modi iste corporis debitis tenetur sunt similique alias consequuntur, cupiditate suscipit impedit maiores, recusandae fugiat. Obcaecati?</p>
<a href="{{ url_for('tiles.upload') }}">Upload</a><br>
<div id="map"></div>
<h2>Current tile</h2>
<div id="currentTile"></div>
<h2>About</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto sed vero, doloribus, dolor laborum cumque ab quo odio dolorem voluptas asperiores debitis reiciendis? Sint aut, iusto sapiente eaque ipsa dolorum.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error veniam consectetur accusamus distinctio fugit, omnis voluptas. Iure voluptatum omnis unde quas voluptates suscipit neque libero a recusandae quisquam, dolorum voluptate?</p>
<script src="{{ url_for('static', filename='bundle.js') }}"></script>
{% endblock %}

3
web/index.js
View File

@ -1,3 +1,4 @@
import './map.js'
import './src/map.js'
console.log('Hello World')
console.log('lala')

1
web/package.json
View File

@ -5,6 +5,7 @@
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack --mode development --watch",
"lint": "eslint '**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1"
},

12
web/src/currentTile.js Normal file
View File

@ -0,0 +1,12 @@
import { coordsToPath } from './util.js'
const root = document.getElementById('currentTile')
export const render = (coords) => {
root.innerHTML = `
<div class="flex">
<img src="/tiles${coordsToPath(coords)}">
</div>
Hello World! ${JSON.stringify(coords)}
`
}

7
web/map.js → web/src/map.js
View File

@ -1,6 +1,8 @@
import { map as LMap, tileLayer } from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { render } from './currentTile'
export const map = LMap('map')
map.setView([0, 0], 1)
@ -25,4 +27,7 @@ const getTileCoords = (lat, lon, zoom) => {
}
// demo: how to get tile coords on click
map.on('click', (e) => { console.log(getTileCoords(e.latlng.lat, e.latlng.lng, map.getZoom())) })
map.on('click', (e) => {
let coords = getTileCoords(e.latlng.lat, e.latlng.lng, map.getZoom())
render(coords)
})

1
web/src/util.js Normal file
View File

@ -0,0 +1 @@
export const coordsToPath = coords => `/${coords.z}/${coords.x}/${coords.y}`