2012-10-21 20:50:44 +02:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2012-10-23 20:15:59 +02:00
|
|
|
<title>Tilelist-viewer</title>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
<style type="text/css">
|
2012-10-22 23:07:49 +02:00
|
|
|
html, body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family:sans-serif;
|
|
|
|
|
}
|
|
|
|
|
#container{
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color:#fff;
|
|
|
|
|
overflow:hidden;
|
|
|
|
|
margin:0 10px;
|
|
|
|
|
padding-right:250px; /* The width of the rail */
|
|
|
|
|
}
|
|
|
|
|
#menu {
|
|
|
|
|
text-align:center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color:#fff;
|
|
|
|
|
width:240px;
|
|
|
|
|
float:left;
|
|
|
|
|
margin-right:-250px;
|
|
|
|
|
font-family:sans-serif;
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
overflow:auto;
|
|
|
|
|
}
|
|
|
|
|
#basicMap {
|
|
|
|
|
background-color:#fff;
|
|
|
|
|
width:100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin-right:-250px;
|
|
|
|
|
float:left;
|
|
|
|
|
font-family:sans-serif;
|
|
|
|
|
font-size: 0.7em;
|
|
|
|
|
}
|
|
|
|
|
#form {
|
|
|
|
|
background-color:#eee;
|
|
|
|
|
}
|
2012-10-23 20:15:59 +02:00
|
|
|
</style>
|
|
|
|
|
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
function importXML(xmlfile){
|
|
|
|
|
var xmlloaded = false;
|
|
|
|
|
try
|
|
|
|
|
{
|
|
|
|
|
var xmlhttp = new XMLHttpRequest();
|
|
|
|
|
xmlhttp.open("GET", xmlfile, false);
|
|
|
|
|
}
|
|
|
|
|
catch (Exception)
|
|
|
|
|
{
|
|
|
|
|
var ie = (typeof window.ActiveXObject != 'undefined');
|
|
|
|
|
if (ie)
|
|
|
|
|
{
|
|
|
|
|
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
|
|
|
|
xmlDoc.async = false;
|
|
|
|
|
while(xmlDoc.readyState != 4) {};
|
|
|
|
|
xmlDoc.load(xmlfile);
|
|
|
|
|
xmlloaded = true;
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
xmlDoc = document.implementation.createDocument("", "", null);
|
|
|
|
|
xmlDoc.onload = readXML;
|
|
|
|
|
xmlDoc.load(xmlfile);
|
|
|
|
|
xmlloaded = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!xmlloaded)
|
|
|
|
|
{
|
|
|
|
|
xmlhttp.setRequestHeader('Content-Type', 'text/xml')
|
|
|
|
|
xmlhttp.setRequestHeader("User-Agent",navigator.userAgent);
|
|
|
|
|
xmlhttp.send("");
|
|
|
|
|
xmlDoc = xmlhttp.responseXML;
|
|
|
|
|
xmlloaded = true;
|
|
|
|
|
}
|
|
|
|
|
return xmlDoc
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
2012-10-23 20:15:59 +02:00
|
|
|
var xmlDoc = importXML('tiles-tree.xml');
|
2012-10-21 20:50:44 +02:00
|
|
|
var selectcont;
|
|
|
|
|
var selectcount;
|
|
|
|
|
var selectcregi;
|
|
|
|
|
var vectorLayer;
|
|
|
|
|
var feature;
|
2012-10-23 20:15:59 +02:00
|
|
|
var tileList;
|
|
|
|
|
tileList=[]
|
2012-10-21 20:50:44 +02:00
|
|
|
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
|
|
|
|
|
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
|
|
|
|
|
|
|
|
|
|
function setContinents(){
|
2012-10-23 20:15:59 +02:00
|
|
|
// Fill drop-down with continents names
|
2012-10-21 20:50:44 +02:00
|
|
|
var el = document.createElement("option");
|
2012-10-23 20:15:59 +02:00
|
|
|
el.textContent = '';
|
|
|
|
|
el.value = '';
|
|
|
|
|
selectcont.appendChild(el);
|
2012-10-21 20:50:44 +02:00
|
|
|
var conts=xmlDoc.getElementsByTagName("continent")
|
|
|
|
|
for(var i = 0; i < conts.length; i++) {
|
2012-10-23 20:15:59 +02:00
|
|
|
opt = conts[i].getAttribute("name");
|
|
|
|
|
el = document.createElement("option");
|
|
|
|
|
el.textContent = opt;
|
|
|
|
|
el.value = opt;
|
|
|
|
|
selectcont.appendChild(el);
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function setCountries(cont){
|
2012-10-23 20:15:59 +02:00
|
|
|
// Fill drop-down with countries names
|
2012-10-21 20:50:44 +02:00
|
|
|
selectcount.options.length = 0;
|
|
|
|
|
selectregi.options.length = 0;
|
|
|
|
|
|
|
|
|
|
var el = document.createElement("option");
|
2012-10-23 20:15:59 +02:00
|
|
|
el.textContent = '';
|
|
|
|
|
el.value = '';
|
|
|
|
|
selectcount.appendChild(el);
|
2012-10-21 20:50:44 +02:00
|
|
|
|
|
|
|
|
var conts=xmlDoc.getElementsByTagName("continent");
|
|
|
|
|
for(var i = 0; i < conts.length; i++) {
|
2012-10-23 20:15:59 +02:00
|
|
|
if (conts[i].getAttribute("name") == cont){
|
2012-10-21 20:50:44 +02:00
|
|
|
counts=conts[i].getElementsByTagName("country");
|
|
|
|
|
for(var j = 0; j < counts.length; j++) {
|
2012-10-23 20:15:59 +02:00
|
|
|
opt = counts[j].getAttribute("name");
|
|
|
|
|
el = document.createElement("option");
|
|
|
|
|
el.textContent = opt;
|
|
|
|
|
el.value = opt;
|
|
|
|
|
selectcount.appendChild(el);
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function setRegions(count){
|
2012-10-23 20:15:59 +02:00
|
|
|
// Fill drop-down with regions names
|
2012-10-21 20:50:44 +02:00
|
|
|
selectregi.options.length = 0;
|
|
|
|
|
|
|
|
|
|
var el = document.createElement("option");
|
2012-10-23 20:15:59 +02:00
|
|
|
el.textContent = '';
|
|
|
|
|
el.value = '';
|
|
|
|
|
selectregi.appendChild(el);
|
|
|
|
|
|
2012-10-21 20:50:44 +02:00
|
|
|
var counts=xmlDoc.getElementsByTagName("country");
|
|
|
|
|
for(var j = 0; j < counts.length; j++) {
|
|
|
|
|
if (counts[j].getAttribute("name") == count){
|
|
|
|
|
regis=counts[j].getElementsByTagName("region");
|
|
|
|
|
for(var k = 0; k < regis.length; k++) {
|
2012-10-23 20:15:59 +02:00
|
|
|
var opt = regis[k].getAttribute("name");
|
|
|
|
|
var el = document.createElement("option");
|
|
|
|
|
el.textContent = opt;
|
|
|
|
|
el.value = opt;
|
|
|
|
|
selectregi.appendChild(el);
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function show(){
|
2012-10-23 20:15:59 +02:00
|
|
|
// show tiles from selected region
|
2012-10-21 20:50:44 +02:00
|
|
|
continent=selectcont.value;
|
|
|
|
|
country=selectcount.value;
|
|
|
|
|
region=selectregi.value;
|
|
|
|
|
if (continent != '' && country!= '' && region != '') {
|
2012-10-23 20:15:59 +02:00
|
|
|
getTilelist(continent,country,region);
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
else if (continent != '' && country!= '' && region == '') {
|
2012-10-23 20:15:59 +02:00
|
|
|
getTilelist(continent,country, '');
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
2012-10-23 20:15:59 +02:00
|
|
|
document.getElementById('tiles').innerHTML =tileList.join(';');
|
2012-10-21 20:50:44 +02:00
|
|
|
var x;
|
|
|
|
|
var y;
|
|
|
|
|
var lonlat;
|
2012-10-23 20:15:59 +02:00
|
|
|
|
|
|
|
|
vectorLayer.removeAllFeatures(); // duplicate are handled in the list, but not for features
|
|
|
|
|
|
|
|
|
|
for(var i = 0; i < tileList.length; i++) {
|
|
|
|
|
x = parseFloat(tileList[i].split(' ')[0]);
|
|
|
|
|
y = parseFloat(tileList[i].split(' ')[1]);
|
|
|
|
|
drawSquare(x,y)
|
2012-10-21 20:50:44 +02:00
|
|
|
if (i==0) {var center = new OpenLayers.LonLat(x,y).transform( fromProjection, toProjection);}
|
|
|
|
|
}
|
|
|
|
|
map.setCenter(center, map.getZoom() );
|
2012-10-23 20:15:59 +02:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function clearList() {
|
|
|
|
|
vectorLayer.removeAllFeatures();
|
|
|
|
|
document.getElementById('tiles').innerHTML ='';
|
|
|
|
|
tileList.length=0;
|
|
|
|
|
}
|
|
|
|
|
function addTile(x,y) {
|
|
|
|
|
drawSquare(x,y);
|
|
|
|
|
tileList.push(x+' '+y)
|
|
|
|
|
tileList.sort(function(a,b){return a.split(' ')[0]-b.split(' ')[0]})
|
|
|
|
|
document.getElementById('tiles').innerHTML =tileList.join(';');
|
|
|
|
|
}
|
|
|
|
|
function removeTile(x,y,i) {
|
|
|
|
|
vectorLayer.removeFeatures([vectorLayer.features[i]]);
|
|
|
|
|
n=tileList.indexOf(x+' '+y)
|
|
|
|
|
tileList.splice(n,1)
|
|
|
|
|
tileList.sort(function(a,b){return a.split(' ')[0]-b.split(' ')[0]})
|
|
|
|
|
document.getElementById('tiles').innerHTML =tileList.join(';');
|
|
|
|
|
}
|
|
|
|
|
function edit(x,y) {
|
|
|
|
|
IS_IN=0;
|
|
|
|
|
var point = new OpenLayers.Geometry.Point(x,y);
|
|
|
|
|
point.transform(fromProjection,toProjection)
|
|
|
|
|
for (var i = 0; i < vectorLayer.features.length; i++) {
|
|
|
|
|
var geom=vectorLayer.features[i].geometry;
|
|
|
|
|
|
|
|
|
|
if ( geom.containsPoint(point) ) {
|
|
|
|
|
IS_IN=1;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (IS_IN) {
|
|
|
|
|
removeTile(Math.floor(x),Math.floor(y),i);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
addTile(Math.floor(x),Math.floor(y));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function drawSquare(x,y) {
|
|
|
|
|
geom = new OpenLayers.Geometry.LinearRing();
|
2012-10-21 20:50:44 +02:00
|
|
|
|
2012-10-23 20:15:59 +02:00
|
|
|
geom.addComponent(new OpenLayers.Geometry.Point(x,y))
|
|
|
|
|
geom.addComponent(new OpenLayers.Geometry.Point(x,y+1))
|
|
|
|
|
geom.addComponent(new OpenLayers.Geometry.Point(x+1,y+1))
|
|
|
|
|
geom.addComponent(new OpenLayers.Geometry.Point(x+1,y))
|
|
|
|
|
geom.addComponent(new OpenLayers.Geometry.Point(x,y))
|
|
|
|
|
feature = new OpenLayers.Feature.Vector(geom.transform(fromProjection,toProjection));
|
|
|
|
|
vectorLayer.addFeatures([feature]);
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
2012-10-23 20:15:59 +02:00
|
|
|
function handleMapClick(e) {
|
|
|
|
|
var lonlat = map.getLonLatFromViewPortPx(e.xy);
|
|
|
|
|
lonlat.transform( toProjection, fromProjection);
|
|
|
|
|
edit(lonlat.lon,lonlat.lat)
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-21 20:50:44 +02:00
|
|
|
function getTilelist(continent,country,region){
|
2012-10-23 20:15:59 +02:00
|
|
|
// get tile list from XML, and concat with current tilelist.
|
2012-10-21 20:50:44 +02:00
|
|
|
var conts=xmlDoc.getElementsByTagName("continent");
|
|
|
|
|
for(var i = 0; i < conts.length; i++) {
|
|
|
|
|
if (conts[i].getAttribute("name") == continent){
|
|
|
|
|
var counts=conts[i].getElementsByTagName("country");
|
|
|
|
|
for(var j = 0; j < counts.length; j++) {
|
|
|
|
|
if (counts[j].getAttribute("name") == country){
|
|
|
|
|
if (region == '') {
|
2012-10-23 20:15:59 +02:00
|
|
|
var t= counts[j].getElementsByTagName("tiles")[0];
|
|
|
|
|
t.normalize(); //normalize because long texts can be split in adjacent nodes.
|
|
|
|
|
tileList=tileList.concat(t.childNodes[0].nodeValue.split(';'));
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
regis=counts[j].getElementsByTagName("region");
|
|
|
|
|
for(var k = 0; k < regis.length; k++) {
|
|
|
|
|
if (regis[k].getAttribute("name") == region){
|
2012-10-23 20:15:59 +02:00
|
|
|
tileList=tileList.concat(regis[k].getElementsByTagName("tiles")[0].childNodes[0].nodeValue.split(';'));
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2012-10-23 20:15:59 +02:00
|
|
|
// remove duplicates
|
|
|
|
|
tileList = tileList.filter(function(elem, pos) {
|
|
|
|
|
return tileList.indexOf(elem) == pos;
|
|
|
|
|
})
|
|
|
|
|
// sort
|
|
|
|
|
tileList.sort(function(a,b){return a.split(' ')[0]-b.split(' ')[0]})
|
|
|
|
|
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
|
|
|
|
selectcont = document.getElementById("continents");
|
|
|
|
|
selectcount = document.getElementById("countries");
|
|
|
|
|
selectregi = document.getElementById("regions");
|
|
|
|
|
setContinents();
|
|
|
|
|
map_init();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function map_init() {
|
2012-10-23 20:15:59 +02:00
|
|
|
var options = {
|
|
|
|
|
controls: [
|
|
|
|
|
new OpenLayers.Control.Navigation(),
|
|
|
|
|
new OpenLayers.Control.PanZoomBar(),
|
|
|
|
|
new OpenLayers.Control.Attribution(),
|
|
|
|
|
new OpenLayers.Control.Graticule({
|
|
|
|
|
labelled: true,
|
|
|
|
|
labelformat: 'd',
|
|
|
|
|
targetSize: 200
|
|
|
|
|
})
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
map = new OpenLayers.Map("basicMap", options);
|
|
|
|
|
var mapnik = new OpenLayers.Layer.OSM();
|
|
|
|
|
var position = new OpenLayers.LonLat(5,46).transform( fromProjection, toProjection);
|
|
|
|
|
var zoom = 3;
|
|
|
|
|
|
|
|
|
|
map.addLayer(mapnik);
|
|
|
|
|
|
|
|
|
|
vectorLayer = new OpenLayers.Layer.Vector( "vectors");
|
|
|
|
|
map.addLayers([vectorLayer])
|
|
|
|
|
|
|
|
|
|
map.events.register('click', map, handleMapClick);
|
|
|
|
|
|
|
|
|
|
map.setCenter(position, zoom );
|
2012-10-21 20:50:44 +02:00
|
|
|
}
|
2012-10-23 20:15:59 +02:00
|
|
|
</script>
|
2012-10-21 20:50:44 +02:00
|
|
|
</head>
|
2012-10-22 23:07:49 +02:00
|
|
|
<body onload="init();">
|
|
|
|
|
<div id="container">
|
|
|
|
|
<div id="basicMap"></div>
|
2012-10-21 20:50:44 +02:00
|
|
|
<div id="menu">
|
2012-10-22 23:07:49 +02:00
|
|
|
<div id="form">
|
|
|
|
|
<hr>
|
|
|
|
|
Choose a region below:</br>
|
|
|
|
|
<form>
|
|
|
|
|
<select id="continents" onchange="setCountries(this.value);"></select></br>
|
|
|
|
|
<select id="countries" onchange="setRegions(this.value);"></select></br>
|
|
|
|
|
<select id="regions"></select></br>
|
2012-10-23 20:15:59 +02:00
|
|
|
<input type="button" value="Show" onclick="show();">
|
|
|
|
|
<input type="button" value="Clear" onclick="clearList();">
|
2012-10-22 23:07:49 +02:00
|
|
|
</form>
|
|
|
|
|
<hr>
|
2012-10-25 23:55:48 +02:00
|
|
|
Simple click on map (without drag) to add to or remove from the tile list
|
2012-10-22 23:07:49 +02:00
|
|
|
<hr>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tiles"></div>
|
2012-10-21 20:50:44 +02:00
|
|
|
</div>
|
2012-10-22 23:07:49 +02:00
|
|
|
</div>
|
|
|
|
|
</body>
|
2012-10-21 20:50:44 +02:00
|
|
|
</html>
|
