2 <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
3 <!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
4 <!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
5 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <title>jQuery Geo logo</title>
10 <meta name="description" content="Drawing the jQuery Geo logo">
11 <meta name="author" content="Ryan Westphal">
13 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14 <link rel="stylesheet" type="text/css" href="css/style.css" />
15 <style type="text/css">
38 <a href="../" class="docLink">< docs</a>
40 jQuery Geo logos!</h1>
41 <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>
44 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
45 <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
48 var map = $("#map").geomap({
52 shape: function (e, geo) {
57 var width = $(document).width();
59 addLogo({ pixels: [16, 16], coordinates: map.geomap("toMap", [32, 16]) });
61 function addLogo(geo) {
62 var geoPixels = map.geomap("toPixel", geo.coordinates),
63 logoOuterCoords = map.geomap("toMap", [
64 [geoPixels[0] - 16, geoPixels[1]],
65 [geoPixels[0] - 15, geoPixels[1] + 6],
66 [geoPixels[0] - 11, geoPixels[1] + 11],
67 [geoPixels[0] - 6, geoPixels[1] + 15],
68 [geoPixels[0], geoPixels[1] + 16]
71 logoInnerCoords = map.geomap("toMap", [
72 [geoPixels[0] - 8, geoPixels[1]],
73 [geoPixels[0] - 6, geoPixels[1] + 6],
74 [geoPixels[0], geoPixels[1] + 8]
77 logoCornerCoord = geo.coordinates,
79 type: "GeometryCollection",
83 type: "GeometryCollection",
87 $.merge(logoLines.geometries, [{
89 coordinates: logoOuterCoords
92 $.merge(logoLines.geometries, [{
94 coordinates: logoInnerCoords
97 $.each(logoOuterCoords, function (i) {
98 logoOuterPoints[i] = {
104 $.merge(logoPoints.geometries, logoOuterPoints);
106 $.each(logoInnerCoords, function (i) {
107 logoInnerPoints[i] = {
113 $.merge(logoPoints.geometries, logoInnerPoints);
115 $.merge(logoPoints.geometries, [{
117 coordinates: logoCornerCoord
120 map.geomap("append", logoLines, { strokeWidth: "2px", fill: "#faa", fillOpacity: 1 });
121 map.geomap("append", logoPoints, { strokeWidth: "1px", width: "3px", height: "3px", fill: "#faa", fillOpacity: 1 });