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

First Component

Browse Source
master
Alfred Melch 6 years ago
parent 73780d9530
commit b82dc913a6
9 changed files with 327 additions and 23 deletions
Show Stats Download Patch File Download Diff File

255
app/static/bundle.js
View File

File diff suppressed because one or more lines are too long

26
app/static/style.css
Unescape Escape 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;
}

21
app/templates/base.html
Unescape Escape View File

@ -12,21 +12,28 @@
</head>
<body>
<header>
<a href="{{ url_for('index') }}">Home</a>
<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>
<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.login') }}">Sign in</a>
| <a href="{{ url_for('auth.register') }}">Register</a>
{% endif %}
</div>
</header>
<hr>
<main>
{% block body %}{% endblock %}
</main>
<footer>
Made by Alfred Melch
</footer>
<hr>
<h2>Messages</h2>

12
app/templates/index.html
Unescape Escape 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
Unescape Escape View File

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

1
web/package.json
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape View File

@ -0,0 +1 @@
export const coordsToPath = coords => `/${coords.z}/${coords.x}/${coords.y}`
Write Preview
Loading…
Cancel
Save