ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved TileUTFGrid example

Browse Source
This commit is contained in:
Petr Sloup
2014-12-06 15:07:52 +01:00
parent ac144d934f
commit ca77a20b57
2 changed files with 37 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/tileutfgrid.html
+18 -7
View File
@@ -8,6 +8,14 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style type="text/css">
#country-name {
color: black;
font-size: 12pt;
font-weight: bold;
text-shadow: white 0.1em 0.1em 0.2em;
}
</style>
<title>TileUTFGrid example</title> <title>TileUTFGrid example</title>
</head> </head>
<body> <body>
@@ -30,26 +38,29 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span8"> <div class="span12">
<h4 id="title">TileUTFGrid example</h4> <h4 id="title">TileUTFGrid example</h4>
<p id="shortdesc">This example shows how to read data from a TileUTFGrid layer.</p> <p id="shortdesc">This example shows how to read data from a TileUTFGrid layer.</p>
<p>Point to a country to see its name and flag.</p>
<div id="docs"> <div id="docs">
<p>Tiles made with <a href="http://tilemill.com/">TileMill</a>. Hosting on MapBox.com or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.</p> <p>Tiles made with <a href="http://tilemill.com/">TileMill</a>. Hosting on MapBox.com or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.</p>
<p>See the <a href="tileutfgrid.js" target="_blank">tileutfgrid.js source</a> to see how this is done.</p> <p>See the <a href="tileutfgrid.js" target="_blank">tileutfgrid.js source</a> to see how this is done.</p>
</div> </div>
<div id="tags">utfgrid, tileutfgrid, tilejson</div> <div id="tags">utfgrid, tileutfgrid, tilejson</div>
</div> </div>
<div class="span4">
<div id="info" class="alert alert-success">
<img id="flag" src="" />
<div id="admin_name">&nbsp;</div>
</div>
</div>
</div> </div>
</div> </div>
<div style="display: none;">
<!-- Overlay with the country info -->
<div id="country-info">
<div id="country-name">&nbsp;</div>
<img id="country-flag" src="" />
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script> <script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=tileutfgrid" type="text/javascript"></script> <script src="loader.js?id=tileutfgrid" type="text/javascript"></script>
examples/tileutfgrid.js
+19 -7
View File
@@ -1,4 +1,5 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.Overlay');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.source.TileJSON'); goog.require('ol.source.TileJSON');
@@ -29,8 +30,17 @@ var map = new ol.Map({
view: view view: view
}); });
var flag = document.getElementById('flag'); var infoElement = document.getElementById('country-info');
var adminName = document.getElementById('admin_name'); var flagElement = document.getElementById('country-flag');
var nameElement = document.getElementById('country-name');
var infoOverlay = new ol.Overlay({
element: infoElement,
offset: [15, 15],
stopEvent: false
});
map.addOverlay(infoOverlay);
map.on('pointermove', function(evt) { map.on('pointermove', function(evt) {
var viewResolution = /** @type {number} */ (view.getResolution()); var viewResolution = /** @type {number} */ (view.getResolution());
gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution, gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution,
@@ -39,10 +49,12 @@ map.on('pointermove', function(evt) {
// load the mustache.js library separately and call // load the mustache.js library separately and call
// info.innerHTML = Mustache.render(gridSource.getTemplate(), data); // info.innerHTML = Mustache.render(gridSource.getTemplate(), data);
mapElement.style.cursor = data ? 'pointer' : ''; mapElement.style.cursor = data ? 'pointer' : '';
/* jshint -W069 */ if (data) {
flag.src = data ? 'data:image/png;base64,' + data['flag_png'] : ''; /* jshint -W069 */
flag.style.visibility = data ? 'visible' : 'hidden'; flagElement.src = 'data:image/png;base64,' + data['flag_png'];
adminName.innerHTML = data ? data['admin'] : '&nbsp;'; nameElement.innerHTML = data['admin'];
/* jshint +W069 */ /* jshint +W069 */
}
infoOverlay.setPosition(data ? evt.coordinate : undefined);
}); });
}); });