forked from RedfishGroup/LeafletElementOverlay
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (146 loc) · 6.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html>
<head>
<script src="https://npmcdn.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="elementOverlay.js"></script>
<script src="worldFile.js"></script>
<script src="progressionLayer.js"></script>
<script src="staticLayer.js"></script>
<script ></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css" />
<style>
#map {
width: 100%;
height: 100%;
border: 2px solid blue;
float: left;
}
#fooo {
border-radius: 10px;
border: 5px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#fooo2 {
background-color: yellow;
border-radius: 10px;
border: 5px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
console.log('ready')
var map = window.map = init_map("map")
map.setView([36, -106], 8);
//
//normal image overlay
var bounds = new L.LatLngBounds( new L.LatLng(35.5,-108.5), new L.LatLng(35,-108.1))
var layer = L.elementOverlay('https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/layers.png', bounds).addTo(map)
//
//div overlay
var bounds2 = new L.LatLngBounds( new L.LatLng(35.5,-107.5), new L.LatLng(35,-107))
var div = document.createElement("div")
div.id = "fooo"
div.style.background = "rgba(255,255,255,0.5)"
div.innerHTML = "<h3>This is a div element</h3> in an element overlay"
var layer2 = L.elementOverlay( div, bounds2).addTo(map)
//
// add static layer
addStaticLayer()
//
//canvas overlay
var bounds2 = new L.LatLngBounds( new L.LatLng(35.5,-108), new L.LatLng(35,-107.6))
var canvas = document.createElement("canvas")
canvas.width=canvas.height=300
var ctx = canvas.getContext('2d')
ctx.fillStyle = "#000"
ctx.fillRect(0,0,300,300)
canvas.id = "foocan"
var layer3 = L.elementOverlay( canvas, bounds2).addTo(map)
//add some animation to prove its a canvas
setInterval( function(){
var can = document.getElementById('foocan')
var ctx = can.getContext('2d')
ctx.fillStyle = "rgba(0,0,0,0.1)"
ctx.fillRect(0,0, can.width, can.height)
ctx.fillStyle="#0f0"
ctx.fillRect( Math.floor(Math.random()*can.width), Math.floor(Math.random()*can.height), Math.floor(Math.random()*80), Math.floor(Math.random()*80))
}, 200)
loadUpworldFile()
loadUpProgression()
return;
});
function loadUpworldFile(){
var paramTest = new L.WorldFile({imageUrl:"data/splat.png",params:{a:0.0039,b:0,c:-106,d:0,e:0.0019,f:35}, opacity:0.4})
paramTest.addTo(map)
//load from url
var urlTest = new L.WorldFile({imageUrl:"data/NM-N6S-F5PS.png", textUrl:"data/NM-N6S-F5PS.pgw", opacity:0.4})
urlTest.addTo(map)
//
// preloaded image
var img = new Image()
img.onload = function() {
console.log('preload test running')
var w = 8/this.width
var h = -6/this.height
preload = new L.WorldFile({imageUrl:this,params:{a:0.002,b:0.001,c:-106, d:0,e:-0.0010,f:36.6}, opacity:0.7})
preload.addTo(map)
}
img.src="data/dog.jpg"
//
// test changing the image every so often
setInterval( function(){
var imgurl = "data/splat.png"
if( Math.random()>0.5){
imgurl = "data/NM-N6S-F5PS.png"
}
paramTest.refreshWorldFile( {imageUrl:imgurl,params:{a:0.0039,b:0,c:-106, d:0.0001,e:0.0019,f:35 + Math.random()/10}, opacity:0.4} )
},1000)
//
// test div with world file
var div = document.createElement("div")
div.id = "fooo2"
div.innerHTML = "<h1>Div Element with worldfile</h1>"
var divLayer2 = new L.WorldFile({image:div,params:{a:0.002,b:0.003,c:-107, d:0.001,e:-0.0010,f:35.8}, opacity:0.7})
divLayer2.addTo(map)
}
function loadUpProgression() {
console.log('progression')
prgTest = new L.ProgresionLayer({imageUrl:"data/NM-N6S-F5PS.png",textUrl:"data/NM-N6S-F5PS.pgw"})
prgTest.addTo(map)
var prgTime = 0
setInterval( function(){
if(prgTest.stats){
prgTime = (prgTime + 10000)%prgTest.stats.max
prgTest.redrawCanvas(prgTime)
}
},100)
}
function addStaticLayer() {
var div = document.createElement('div')
div.innerHTML = "<h1>Static Div</h1>"
//div overlay
var layer2 = new L.StaticLayer(div).addTo(map)
//for debugging
window.statLay = layer2
}
function init_map(map_div) {
var map = new L.Map(map_div);
var tiles = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',{//'http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
})
map.setView([0,0], 5).addLayer(tiles);
return map;
}
</script>
</head>
<body>
<div id="container">
<div id="map"></div>
</div>
</body>
</html>