-
Notifications
You must be signed in to change notification settings - Fork 89
/
Copy pathios.html
95 lines (87 loc) · 3.13 KB
/
ios.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
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>iOS WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.min.js"></script>
<script src="https://cdn.rawgit.com/manubb/Leaflet.PixiOverlay/557caec7/L.PixiOverlay.js"></script>
</head>
<body style="height: 100%; margin: 0;">
<div id="map" style="height: 100%; width: 100%;"></div>
<script>
(function() {
document.addEventListener("DOMContentLoaded", function() {
var map = L.map('map').setView([51.505, -0.09], 13);
var a = 1;
function pan() {
map.panBy([0, a * 200]);
a *= -1;
}
setInterval(pan, 700);
L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors',
minZoom: 2,
maxZoom: 18
}).addTo(map);
map.attributionControl.setPosition('bottomleft');
map.zoomControl.setPosition('bottomright');
var pixiOverlay = (function() {
var firstDraw = true;
var prevZoom;
var polygonLatLngs = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047],
[51.509, -0.08]
];
var projectedPolygon;
var circleCenter = [51.508, -0.11];
var projectedCenter;
var circleRadius = 85;
var triangle = new PIXI.Graphics();
var circle = new PIXI.Graphics();
var pixiContainer = new PIXI.Container();
pixiContainer.addChild(triangle, circle);
return L.pixiOverlay(function(utils) {
var zoom = utils.getMap().getZoom();
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var scale = utils.getScale();
if (firstDraw) {
projectedPolygon = polygonLatLngs.map(function(coords) {return project(coords);});
projectedCenter = project(circleCenter);
circleRadius = circleRadius / scale;
}
if (firstDraw || prevZoom !== zoom) {
triangle.clear();
triangle.lineStyle(3 / scale, 0x3388ff, 1);
triangle.beginFill(0x3388ff, 0.2);
projectedPolygon.forEach(function(coords, index) {
if (index == 0) triangle.moveTo(coords.x, coords.y);
else triangle.lineTo(coords.x, coords.y);
});
triangle.endFill();
circle.clear();
circle.lineStyle(3 / scale, 0xff0000, 1);
circle.beginFill(0xff0033, 0.5);
circle.drawCircle(projectedCenter.x, projectedCenter.y, circleRadius);
circle.endFill();
}
firstDraw = false;
prevZoom = zoom;
renderer.render(container);
}, pixiContainer, {
padding: 0.2,
forceCanvas: false
});
})();
pixiOverlay.addTo(map);
});
})();
</script>
</body>
</html>