You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
4.0 KiB
HTML
103 lines
4.0 KiB
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title></title>
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
|
||
|
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
||
|
|
crossorigin=""/>
|
||
|
|
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
|
||
|
|
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
|
||
|
|
crossorigin=""></script>
|
||
|
|
<script src="./leaflet-hash/leaflet-hash.js" type="text/javascript"></script>
|
||
|
|
<style>
|
||
|
|
html, body, #mapid {
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
padding:0px;
|
||
|
|
margin:0px;
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
font-family: "Lucida Console", Monaco, monospace;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
p {
|
||
|
|
text-align:center;
|
||
|
|
vertical-align: middle;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="mapid"></div>
|
||
|
|
<script type="text/javascript" src="text.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var mymap = L.map('mapid', {
|
||
|
|
maxZoom: 2,
|
||
|
|
minZoom: 0,
|
||
|
|
zoom: 0,
|
||
|
|
crs: L.CRS.Simple,
|
||
|
|
center: new L.LatLng(-100,300),
|
||
|
|
|
||
|
|
}); //.setView([0, 0], 25);
|
||
|
|
|
||
|
|
// L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||
|
|
// attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||
|
|
// maxZoom: 100,
|
||
|
|
// id: 'mapbox.streets',
|
||
|
|
// accessToken: 'your.mapbox.access.token'
|
||
|
|
// }).addTo(mymap);
|
||
|
|
|
||
|
|
L.GridLayer.DebugCoords = L.GridLayer.extend({
|
||
|
|
createTile: function (coords) {
|
||
|
|
var tile = document.createElement('div');
|
||
|
|
var tileSize = this.getTileSize();
|
||
|
|
tile.setAttribute('width', '500px');
|
||
|
|
tile.setAttribute('height', tileSize.y);
|
||
|
|
|
||
|
|
// setTimeout(function () {
|
||
|
|
// done(null, tile); // Syntax is 'done(error, tile)'
|
||
|
|
// }, 500 + Math.random() * 1500);
|
||
|
|
|
||
|
|
|
||
|
|
function popWindow1() {
|
||
|
|
setTimeout(function() {
|
||
|
|
var myWindow = window.open("", "MyText", "height=230, width=390, left=100, top=100, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||
|
|
myWindow.document.write('<!DOCTYPE html><html><head><title>DOM Annihilator - example</title></head><style type="text/css">body{background-color: red;font-family: "Lucida Console", Monaco, monospace;color: black;}</style><body><img src="https://simplemaps.com/static/img/frog.png" style="width: 75px" /><p>The subject of this project is not the void exactly, but rather what there is round about or inside it. To start with, then, there isnt very much: nothingness, the impalpable, the virtually immaterial; extension, the external, what is external to us, what we move about in the midst of, our ambient milieu, the space around us.</p><input type="button" value="Close this window" onclick="self.close()"></body></html>')
|
||
|
|
// setTimeout(function() {
|
||
|
|
// myWindow.close();
|
||
|
|
// }, 3000);
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function popWindow2() {
|
||
|
|
setTimeout(function() {
|
||
|
|
var myWindow = window.open("", "MyText", "height=230, width=390, left=100, top=100, resizable=no, scrollbars=no, toolbar=no, menubar=no, directories=no, status=yes");
|
||
|
|
myWindow.document.write('<h1>ciao!</h1>')
|
||
|
|
setTimeout(function() {
|
||
|
|
myWindow.close();
|
||
|
|
}, 3000);
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (coords.x == 0 && coords.y == 0){
|
||
|
|
tile.innerHTML = '<p style="width:510px;">'+ text[coords.z] + '</p>' ;
|
||
|
|
}else{};
|
||
|
|
|
||
|
|
if (coords.z == 1 ){popWindow1();}else if (coords.z == 2 ){popWindow2();}else{}
|
||
|
|
|
||
|
|
return tile;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
L.gridLayer.debugCoords = function(opts) {
|
||
|
|
return new L.GridLayer.DebugCoords(opts);
|
||
|
|
};
|
||
|
|
|
||
|
|
mymap.addLayer( L.gridLayer.debugCoords() );
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|