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 127 128 129 130 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map, layer, popup; var markers, feature, marker; function init(){ map = new OpenLayers.Map('map'); layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); map.addLayer(layer); layer = new OpenLayers.Layer.Google( "Google" ); map.addLayer(layer); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); } function changer() { popup.setBackgroundColor("red"); popup.setSize(new OpenLayers.Size(100,600)); // popup.moveTo(new OpenLayers.Pixel(120,120)); // popup.setOpacity(.5); popup.setBorder("2px solid"); popup.setContentHTML("High Chickens"); } function add() { popup = new OpenLayers.Popup("chicken", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), "example popup", true); popup.closeOnMove = true; map.addPopup(popup); } function addAnchor() { popup = new OpenLayers.Popup.Anchored("chicken", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), "example popup", true); map.addPopup(popup); } function addMarker() { markers = new OpenLayers.Layer.Markers("zibo"); map.addLayer(markers); feature = new OpenLayers.Feature(layer, new OpenLayers.LonLat(0,0)); marker = feature.createMarker(); markers.addMarker(marker); marker.events.register("mousedown", marker, mousedown); } function mousedown(evt) { if (popup == null) { popup = feature.createPopup(true); popup.setContentHTML("<div style='background-color:red; width:150;height:100'><a href='http://www.somethingconstructive.net' target='_blank'>click me</a></div>"); popup.setBackgroundColor("yellow"); popup.setOpacity(0.7); markers.map.addPopup(popup); } else { popup.toggle(); } OpenLayers.Event.stop(evt); } /** * @param {Event} evt */ function onPopupMouseDown(evt) { markers.map.removePopup(popup); popup.destroy(); popup = null; OpenLayers.Event.stop(evt); } function destroy() { popup.destroy(); } function remove() { markers.removeMarker(marker); } function removelayer() { layer.destroy(); // map.removeLayer(markers); } </script> </head> <body onload="init()"> <h1 id="title">Popup Mayhem</h1> <div id="tags"> </div> <p id="shortdesc"> All kinds of ways to create and interact with Popups. </p> <div id="map" class="smallmap"></div> <p>If you open an anchoredbubble and switch to google, it shouldn't crash. If it does, don't release OpenLayers.</p> <div style="background-color:purple" onclick="add()"> click to add Popup to map</div> <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div> <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div> <div style="background-color:red" onclick="remove()"> click to remove the popup from map</div> <div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div> <div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div> <div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div> <div id="docs"> Detailed description of this example needs to be written. </div> </body> </html> |