libs/js/jquery-geo-1.0a4/docs/examples/logo.html

   1 <!DOCTYPE html>
   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]-->
   6 <head>
   7   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   8   <title>jQuery Geo logo</title>
   9
  10   <meta name="description" content="Drawing the jQuery Geo logo">
  11   <meta name="author" content="Ryan Westphal">
  12
  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">
  16     #map
  17     {
  18       position: fixed;
  19       left: 0px;
  20       top: 0px;
  21       right: 0px;
  22       bottom: 0px;
  23     }
  24     .ie7 #map, .ie6 #map
  25     {
  26       width: 100%;
  27       right: auto;
  28       bottom: auto;
  29       min-height: 600px;
  30     }
  31   </style>
  32 </head>
  33 <body>
  34   <div class="content">
  35     <div id="map">
  36     </div>
  37     <div class="info">
  38       <a href="../" class="docLink">&lt; docs</a>
  39       <h1>
  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>
  42     </div>
  43   </div>
  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>
  46   <script>
  47     $(function () {
  48       var map = $("#map").geomap({
  49             center: [-75, 40],
  50             zoom: 5,
  51             mode: "drawPoint",
  52             shape: function (e, geo) {
  53               addLogo(geo);
  54             }
  55           });
  56
  57       var width = $(document).width();
  58
  59       addLogo({ pixels: [16, 16], coordinates: map.geomap("toMap", [32, 16]) });
  60
  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]
  69             ]),
  70             logoOuterPoints = [],
  71             logoInnerCoords = map.geomap("toMap", [
  72               [geoPixels[0] - 8, geoPixels[1]],
  73               [geoPixels[0] - 6, geoPixels[1] + 6],
  74               [geoPixels[0], geoPixels[1] + 8]
  75             ]),
  76             logoInnerPoints = [],
  77             logoCornerCoord = geo.coordinates,
  78             logoLines = {
  79               type: "GeometryCollection",
  80               geometries: []
  81             },
  82             logoPoints = {
  83               type: "GeometryCollection",
  84               geometries: []
  85             };
  86
  87         $.merge(logoLines.geometries, [{
  88           type: "LineString",
  89           coordinates: logoOuterCoords
  90         }]);
  91
  92         $.merge(logoLines.geometries, [{
  93           type: "LineString",
  94           coordinates: logoInnerCoords
  95         }]);
  96
  97         $.each(logoOuterCoords, function (i) {
  98           logoOuterPoints[i] = {
  99             type: "Point",
 100             coordinates: this
 101           };
 102         });
 103
 104         $.merge(logoPoints.geometries, logoOuterPoints);
 105
 106         $.each(logoInnerCoords, function (i) {
 107           logoInnerPoints[i] = {
 108             type: "Point",
 109             coordinates: this
 110           };
 111         });
 112
 113         $.merge(logoPoints.geometries, logoInnerPoints);
 114
 115         $.merge(logoPoints.geometries, [{
 116           type: "Point",
 117           coordinates: logoCornerCoord
 118         }]);
 119
 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 });
 122       }
 123     });
 124   </script>
 125 </body>
 126 </html>