Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 11th, 2012  |  syntax: JavaScript  |  size: 3.21 KB  |  hits: 22  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <title>OpenLayers Demo</title>
  5.     <style type="text/css">
  6.       html, body, #basicMap {
  7.           width: 100%;
  8.           height: 100%;
  9.           margin: 0;
  10.       }
  11.     </style>
  12.    
  13.                 <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
  14.                 <link type="text/css" href="jquery/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
  15.    
  16.     <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  17.                 <script type="text/javascript" src="jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  18.                 <script type="text/javascript" src="markers.js"></script>
  19.                 <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  20.  
  21.    
  22.     <script>
  23.                
  24.       function init() {
  25.                                
  26.  
  27.                                
  28.                                 var lon_lat = null;
  29.                                
  30.         map = new OpenLayers.Map("basicMap");
  31.         var mapnik         = new OpenLayers.Layer.OSM();
  32.                 var markers        = new OpenLayers.Layer.Markers( "Markers" );
  33.         var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
  34.         var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
  35.         var position       = new OpenLayers.LonLat(26.94,57.59).transform( fromProjection, toProjection);
  36.         var zoom           = 13;
  37.  
  38.         map.addLayer(mapnik);
  39.                 map.addLayer(markers);
  40.         map.setCenter(position, zoom );
  41.                                
  42.                                 var size = new OpenLayers.Size(35,35);
  43.                                 var offset = new OpenLayers.Pixel(-(size.w/2)+7, -size.h + 2);
  44.                                 var icon = new OpenLayers.Icon('panoramic180.png',size,offset);
  45.                                
  46.                                
  47.                 $(marker_defs).each(function(){
  48.                                 if(this != null && this.geo_x != "" && this.geo_x != undefined){
  49.                                 lon_lat = new OpenLayers.LonLat(this.geo_x, this.geo_y).transform(
  50.                                 new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
  51.  
  52.                                 var marker;
  53.                                
  54.                        
  55.                                 marker = new OpenLayers.Marker(lon_lat, icon.clone());
  56.                                 console.log("TE IR ->"+marker.lonlat);
  57.        
  58.                                 marker.def = this;
  59.                                
  60.                                 marker.events.register('mouseover', marker, function(evt) {
  61.                                        
  62.                                          popup = new OpenLayers.Popup.FramedCloud("chicken",
  63.                      marker.lonlat,
  64.                      new OpenLayers.Size(200, 200),
  65.                      this.def.info,
  66.                      null, true);
  67.                                
  68.                                         if (this.popup == null) {
  69.                                         map.addPopup(this.popup);
  70.                                         this.popup.show();
  71.                                         } else {
  72.                                         this.popup.toggle();
  73.                                         OpenLayers.Event.stop(evt);
  74.                                         }
  75.                                 });
  76.                                 marker.events.register('mousedown', marker, function(evt) {
  77.                                  aprofile(this.def.link);
  78.                                  OpenLayers.Event.stop(evt);
  79.                         });
  80.  
  81.  
  82.                                 markers.addMarker(marker);
  83.  
  84.  
  85.          
  86.       }
  87.     })
  88.                
  89.     if ($(marker_defs).length == 1){
  90.                                 map.setCenter(lon_lat, 9);     
  91.     }
  92.  
  93.                                 $("#OpenLayers_Control_Attribution_7").remove();
  94.                                
  95.       }
  96.                        
  97.                        
  98. function aprofile(lnk) {
  99.        
  100.        
  101.         $.fancybox({
  102.                 'width'                         : 700,
  103.                 'height'                        : 700,
  104.                 'href'                                  : lnk,
  105.                 'type'                                  : 'iframe',
  106.                 'autoScale'             : true
  107.  
  108.         });
  109.        
  110. }
  111.                        
  112.     </script>
  113.   </head>
  114.   <body onload="init();">
  115.     <div id="basicMap" style="width:50%; height:500px"></div>
  116.   </body>
  117. </html>
create a new version of this paste RAW Paste Data