-
Notifications
You must be signed in to change notification settings - Fork 74
/
logo.html
126 lines (113 loc) · 3.94 KB
/
logo.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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Geo logo</title>
<meta name="description" content="Drawing the jQuery Geo logo">
<meta name="author" content="Ryan Westphal">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#map
{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
.ie7 #map, .ie6 #map
{
width: 100%;
right: auto;
bottom: auto;
min-height: 600px;
}
</style>
</head>
<body>
<div class="content">
<div id="map">
</div>
<div class="info">
<a href="../" class="docLink">< docs</a>
<h1>
jQuery Geo logos!</h1>
<p>This demo uses jQuery Geo to draw its own logo at the top left of the map. Single-click the map to make more logos! The shapes created for the logo are based on the pixelSize of the current scale so your map's current zoom determines the Earth-size of the logo. When you zoom in, the points of the individual logos will spread out.</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../jquery.geo-test.min.js"></script>
<script>
$(function () {
var map = $("#map").geomap({
center: [-75, 40],
zoom: 5,
mode: "drawPoint",
shape: function (e, geo) {
addLogo(geo);
}
});
var width = $(document).width();
addLogo({ pixels: [16, 16], coordinates: map.geomap("toMap", [32, 16]) });
function addLogo(geo) {
var geoPixels = map.geomap("toPixel", geo.coordinates),
logoOuterCoords = map.geomap("toMap", [
[geoPixels[0] - 16, geoPixels[1]],
[geoPixels[0] - 15, geoPixels[1] + 6],
[geoPixels[0] - 11, geoPixels[1] + 11],
[geoPixels[0] - 6, geoPixels[1] + 15],
[geoPixels[0], geoPixels[1] + 16]
]),
logoOuterPoints = [],
logoInnerCoords = map.geomap("toMap", [
[geoPixels[0] - 8, geoPixels[1]],
[geoPixels[0] - 6, geoPixels[1] + 6],
[geoPixels[0], geoPixels[1] + 8]
]),
logoInnerPoints = [],
logoCornerCoord = geo.coordinates,
logoLines = {
type: "GeometryCollection",
geometries: []
},
logoPoints = {
type: "GeometryCollection",
geometries: []
};
$.merge(logoLines.geometries, [{
type: "LineString",
coordinates: logoOuterCoords
}]);
$.merge(logoLines.geometries, [{
type: "LineString",
coordinates: logoInnerCoords
}]);
$.each(logoOuterCoords, function (i) {
logoOuterPoints[i] = {
type: "Point",
coordinates: this
};
});
$.merge(logoPoints.geometries, logoOuterPoints);
$.each(logoInnerCoords, function (i) {
logoInnerPoints[i] = {
type: "Point",
coordinates: this
};
});
$.merge(logoPoints.geometries, logoInnerPoints);
$.merge(logoPoints.geometries, [{
type: "Point",
coordinates: logoCornerCoord
}]);
map.geomap("append", logoLines, { strokeWidth: "2px", fill: "#faa", fillOpacity: 1 });
map.geomap("append", logoPoints, { strokeWidth: "1px", width: "3px", height: "3px", fill: "#faa", fillOpacity: 1 });
}
});
</script>
</body>
</html>