Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://openlayers.org/dev/theme/default/style.css" rel="sytlesheet" type="text/css" />
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://openlayers.org/dev/OpenLayers.js" class="jsbin"></script>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id="map" style="border:1px solid black;width:500px;height:300px"></div> 
</body>
</html>
 
(function($) {
  
   map = new OpenLayers.Map( 'map' );
    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0",{layers: 'basic'} );
    map.addLayer(layer);
    map.zoomToMaxExtent();
  
  popup = new OpenLayers.Popup("chicken",
                   new OpenLayers.LonLat(5,40),
                   new OpenLayers.Size(100,60),
                               "<span style='font-size:11px'>DRAGE ME:<BR>Single click, fine. Double click, HELL</span>",
                   true);
​
map.addPopup(popup);
  
  $('.olPopup').draggable();
  
  
  
  
})(jQuery)
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers