forked from jacarma/SmartPopup
-
Notifications
You must be signed in to change notification settings - Fork 0
/
smart-popup.html
125 lines (110 loc) · 6.12 KB
/
smart-popup.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="SmartPopup-Id.js"></script>
</head>
<script>
// initialize map when page ready
var map;
var sm = new OpenLayers.Projection("EPSG:900913");
var init = function () {
var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
templateId: "sprintersTemplate",
styleMap: new OpenLayers.StyleMap({
externalGraphic: "http://openlayers.org/dev/examples/img/mobile-loc.png",
graphicOpacity: 1.0,
graphicWith: 16,
graphicHeight: 26,
graphicYOffset: -26
})
});
var sprinters = getFeatures();
sprintersLayer.addFeatures(sprinters);
// create map
map = new OpenLayers.Map({
div: "map",
theme: null,
projection: sm,
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34, 20037508.34, 20037508.34
),
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.SmartPopup()
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
}),
sprintersLayer
],
center: new OpenLayers.LonLat(0, 0),
zoom: 1
});
function getFeatures() {
var features = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [1332700, 7906300]},
"properties": {"Name": "Igor Tihonov", "Country":"Sweden", "City":"Gothenburg"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [790300, 6573900]},
"properties": {"Name": "Marc Jansen", "Country":"Germany", "City":"Bonn"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [568600, 6817300]},
"properties": {"Name": "Bart van den Eijnden", "Country":"Netherlands", "City":"Utrecht"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [-7909900, 5215100]},
"properties": {"Name": "Christopher Schmidt", "Country":"United States of America", "City":"Boston"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [-937400, 5093200]},
"properties": {"Name": "Jorge Gustavo Rocha", "Country":"Portugal", "City":"Braga"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [-355300, 7547800]},
"properties": {"Name": "Jennie Fletcher ", "Country":"Scotland", "City":"Edinburgh"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [657068.53608487, 5712321.2472725]},
"properties": {"Name": "Bruno Binet ", "Country":"France", "City":"Chambéry"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [667250.8958124, 5668048.6072737]},
"properties": {"Name": "Eric Lemoine", "Country":"France", "City":"Theys"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [653518.03606319, 5721118.5122914]},
"properties": {"Name": "Antoine Abt", "Country":"France", "City":"La Motte Servolex"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [657985.78042416, 5711862.6251028]},
"properties": {"Name": "Pierre Giraud", "Country":"France", "City":"Chambéry"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [742941.93818208, 5861818.9477535]},
"properties": {"Name": "Stéphane Brunner", "Country":"Switzerland", "City":"Paudex"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [736082.61064069, 5908165.4649505]},
"properties": {"Name": "Frédéric Junod", "Country":"Switzerland", "City":"Montagny-près-Yverdon"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [771595.97057525, 5912284.7041793]},
"properties": {"Name": "Cédric Moullet", "Country":"Switzerland", "City":"Payerne"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [744205.23922364, 5861277.319748]},
"properties": {"Name": "Benoit Quartier", "Country":"Switzerland", "City":"Lutry"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [1717430.147101, 5954568.7127565]},
"properties": {"Name": "Andreas Hocevar", "Country":"Austria", "City":"Graz"}},
{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [-12362007.067301,5729082.2365672]},
"properties": {"Name": "Tim Schaub", "Country":"United States of America", "City":"Bozeman"}}
]
};
var reader = new OpenLayers.Format.GeoJSON();
return reader.read(features);
}
};
</script>
<body onload="init()">
<div id="map" class="smallmap"></div>
<div id="sprintersTemplate" style="visibility:hidden; display:none">
Name: %Name%<br/>
Country: %Country%<br/>
City: %City%<br/>
</div>
</body>
</html>