-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
116 lines (94 loc) · 3.05 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<title>Example map</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" integrity="sha384-JguaQYjdUVs0XHRhkpHTNjd6j8IjEzgj5+1xeGYHCXQEaufKsYdtn9fgHVeVTLJu"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" integrity="sha384-odo87pn1N9OSsaqUCAOYH8ICyVxDZ4wtbGpSYO1oyg6LxyOjDuTeXTrVLuxUtFzv"
crossorigin="anonymous">
<!-- testing using local file:// uri -->
<script src="map-leaflet.js"></script>
<script src="map-areas-leaflet.js"></script>
<script>
var MyMousePosition = L.Control.extend({
options: {
position: 'bottomright',
marker: null
},
onAdd: function (map) {
this._container = L.DomUtil.create('div', 'leaflet-control-mouseposition');
L.DomEvent.disableClickPropagation(this._container);
map.on('mousemove', this._onMouseMove, this);
return this._container;
},
onRemove: function (map) {
map.off('mousemove', this._onMouseMove);
},
_onMouseMove: function (e) {
// server coordinates
var x = Math.floor(e.latlng.lat);
var y = Math.floor(e.latlng.lng);
var regions = Ryzom.XY.findIngameRegion(e.latlng.lat, e.latlng.lng);
var html = 'x:' + x + ', y:' + y + ' (' + regions.join(',') + ')';
var p = this._map.project(e.latlng, 10);
html += "<br>Image @(zoom=10): x:" + Math.floor(p.x) + ', y:' + Math.floor(p.y);
if (this.options.marker) {
this.options.marker.setLatLng(e.latlng);
}
var areas = Ryzom.XY.findIngameAreas(x, y);
html += '<br>' + areas.reduce(function(a, v, i) {
return a + (i > 0 ? "<br>" : "") + "(" + v.order + ") " + v.key;
}, '');
this._container.innerHTML = html;
}
});
$(function () {
var fh = [17162, -32906];
var mm = L.marker(fh, { clickabke: false });
var map = Ryzom.map('map', {rzMode: 'server'});
mm.addTo(map);
map.addControl(new MyMousePosition({marker: mm}));
var marker = L.marker(fh, {
icon: Ryzom.icon('npc', 'FF9', 24),
title: 'Hello!'
}).addTo(map);
marker.bindPopup("Hello!");
map.setView(fh, 8);
function createPolygons(areas) {
for (var prop in areas) {
if (areas.hasOwnProperty(prop)) {
var points = areas[prop].points;
var poly = [];
for(var i = 0; i< points.length; i+=2) {
poly.push([points[i], points[i+1]]);
}
L.polygon(poly, {color: "red"}).addTo(map);
if (areas[prop].areas) {
createPolygons(areas[prop].areas);
}
}
}
}
// not all polys map to defined ingame regions
createPolygons(Ryzom.XY.ingame_areas);
});
</script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
}
.leaflet-control-mouseposition {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>