gwt: use canvas defined in html
- handle resize in js - app option for tileSize in MapConfig js object
This commit is contained in:
Hannes Janetzek
@@ -1,162 +0,0 @@
|
||||
<!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 also have css-pixels! -->
|
||||
<!-- 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">
|
||||
|
||||
<style>
|
||||
.header {
|
||||
background-color: #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 0 0 0;
|
||||
font-family: Arial, "MS Trebuchet", sans-serif;
|
||||
}
|
||||
|
||||
#gdx-canvas {
|
||||
cursor: default;
|
||||
outline: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#credits {
|
||||
position: absolute;
|
||||
bottom: 0.2em;
|
||||
right: 0.2em;
|
||||
z-index: 20000;
|
||||
color: white;
|
||||
background-color: #000;
|
||||
opacity: 0.5;
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
#credits a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
#search {
|
||||
z-index: 20000;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
visibility: hidden;
|
||||
}
|
||||
#listContainer{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#nameFieldContainer, .gwt-TextBox {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* Turn on a 16x16 scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* Turn on single button up on top, and down on bottom */
|
||||
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Turn off the down area up on top, and up area on bottom */
|
||||
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Place The scroll down button at the bottom */
|
||||
::-webkit-scrollbar-button:end:increment {
|
||||
/*background-image: url(images/scroll_cntrl_dwn.png);*/
|
||||
}
|
||||
|
||||
/* Place The scroll up button at the up */
|
||||
::-webkit-scrollbar-button:start:decrement {
|
||||
/*background-image: url(images/scroll_cntrl_up.png);*/
|
||||
}
|
||||
|
||||
/* Top area above thumb and below up button */
|
||||
::-webkit-scrollbar-track-piece:vertical:start {
|
||||
/*background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png);
|
||||
background-repeat: no-repeat, repeat-y;*/
|
||||
}
|
||||
|
||||
/* Bottom area below thumb and down button */
|
||||
::-webkit-scrollbar-track-piece:vertical:end {
|
||||
/*background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png);
|
||||
background-repeat: no-repeat, repeat-y;
|
||||
background-position: bottom left, 0 0;*/
|
||||
}
|
||||
|
||||
/* The thumb itself */
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
height: 56px;
|
||||
width: 12px;
|
||||
/* -webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch;*/
|
||||
background-color: #DDDDDD;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var mapconfig = {
|
||||
tilesource : "oscimap4",
|
||||
tileurl : "http://opensciencemap.org/tiles/vtm",
|
||||
zoom : 2,
|
||||
latitude : 0.0,
|
||||
longitude : 0.0
|
||||
}
|
||||
//background : "naturalearth"
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
- <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="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="search">
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td id="nameFieldContainer">
|
||||
<td id="sendButtonContainer">
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" id="listContainer">
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user