49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
goog.require('ol.Map');
|
|
goog.require('ol.View');
|
|
goog.require('ol.layer.Tile');
|
|
goog.require('ol.source.TileJSON');
|
|
goog.require('ol.source.TileUTFGrid');
|
|
|
|
var mapLayer = new ol.layer.Tile({
|
|
source: new ol.source.TileJSON({
|
|
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json'
|
|
})
|
|
});
|
|
|
|
var gridSource = new ol.source.TileUTFGrid({
|
|
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
|
|
preemptive: true
|
|
});
|
|
|
|
var gridLayer = new ol.layer.Tile({source: gridSource});
|
|
|
|
var view = new ol.View({
|
|
center: [0, 0],
|
|
zoom: 1
|
|
});
|
|
|
|
var mapElement = document.getElementById('map');
|
|
var map = new ol.Map({
|
|
layers: [mapLayer, gridLayer],
|
|
target: mapElement,
|
|
view: view
|
|
});
|
|
|
|
var flag = document.getElementById('flag');
|
|
var adminName = document.getElementById('admin_name');
|
|
map.on('pointermove', function(evt) {
|
|
var viewResolution = /** @type {number} */ (view.getResolution());
|
|
gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution,
|
|
function(data) {
|
|
// If you want to use the template from the TileJSON,
|
|
// load the mustache.js library separately and call
|
|
// info.innerHTML = Mustache.render(gridSource.getTemplate(), data);
|
|
mapElement.style.cursor = data ? 'pointer' : '';
|
|
/* jshint -W069 */
|
|
flag.src = data ? 'data:image/png;base64,' + data['flag_png'] : '';
|
|
flag.style.visibility = data ? 'visible' : 'hidden';
|
|
adminName.innerHTML = data ? data['admin'] : ' ';
|
|
/* jshint +W069 */
|
|
});
|
|
});
|