xiaoyan159/vtm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

gwt: use canvas defined in html

Browse Source 
- handle resize in js
- app option for tileSize in MapConfig js object
This commit is contained in:
Hannes Janetzek
2014-03-22 00:26:11 +01:00
parent 4115bdf4c0
commit e6eab7f773
11 changed files with 281 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
vtm-web-app/war/index.html Normal file
View File

@@ -0,0 +1,75 @@
<!doctype html>
<html>
<head>
<title>vtm-gdx</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- pixel and dpi are way too simple concepts for web devs, lets have css-pixels!
definition is limited only by your imagination! -->
<!-- http://www.html5rocks.com/de/mobile/touch/ -->
<!-- http://www.quirksmode.org/mobile/viewports.html -->
<!-- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html -->
<!-- devicePixelRatio: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ -->
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
var mapconfig = {
tilesource : "oscimap4",
tileurl : "http://opensciencemap.org/tiles/vtm",
zoom : 2,
latitude : 0.0,
longitude : 0.0,
tileSize : 400
}
//background : "naturalearth"
</script>
</head>
<body oncontextmenu="return false;">
<div id="credits">
<a href="https://github.com/hjanetzek/vtm">Source</a> | map data © <a
href="http://www.openstreemap.org">OpenStreetMap</a> contributors | <a
href="http://www.opensciencemap.org">OpenScienceMap</a>
</div>
<div id="canvas-area"
style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;">
<canvas id="map-canvas"></canvas>
</div>
<script type="text/Javascript">
function canvasResize() {
div = document.getElementById('canvas-area')
canvas = document.getElementById('map-canvas')
var w = div.scrollWidth;
var h = div.scrollHeight;
//console.log(div.clientHeight + " " + div.clientWidth)
canvas.width = w;
canvas.height = h;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
}
canvasResize();
window.addEventListener('resize', canvasResize, false);
</script>
<script type="text/javascript" src="VtmWebApp/js/_tessellate.js"></script>
<script type="text/javascript" src="VtmWebApp/js/tessellate.js"></script>
<script type="text/javascript" src="VtmWebApp/VtmWebApp.nocache.js"></script>
<div id="search">
<table>
<tr>
<td id="nameFieldContainer">
<td id="sendButtonContainer">
</tr>
<tr>
<td colspan="2" id="listContainer">
</tr>
</table>
</div>
</body>
</html>