Team:St Andrews/Team2
From 2012.igem.org
(Difference between revisions)
Line 14: | Line 14: | ||
<![endif]--> | <![endif]--> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</head> | </head> | ||
Line 117: | Line 68: | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | <div id="map" style="height: | + | |
+ | |||
+ | |||
+ | <div id="map" style="width: 600px; height: 400px"></div> | ||
+ | |||
+ | <script src="http://dl.dropbox.com/u/491730/iGEm/leaflet.js"></script> | ||
+ | <script> | ||
+ | var map = new L.Map('map'); | ||
+ | |||
+ | var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', | ||
+ | cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', | ||
+ | cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); | ||
+ | |||
+ | map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade); | ||
+ | |||
+ | |||
+ | var markerLocation = new L.LatLng(51.5, -0.09), | ||
+ | marker = new L.Marker(markerLocation); | ||
+ | |||
+ | map.addLayer(marker); | ||
+ | marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); | ||
+ | |||
+ | |||
+ | var circleLocation = new L.LatLng(51.508, -0.11), | ||
+ | circleOptions = {color: '#f03', opacity: 0.7}, | ||
+ | circle = new L.Circle(circleLocation, 500, circleOptions); | ||
+ | |||
+ | circle.bindPopup("I am a circle."); | ||
+ | map.addLayer(circle); | ||
+ | |||
+ | |||
+ | var p1 = new L.LatLng(51.509, -0.08), | ||
+ | p2 = new L.LatLng(51.503, -0.06), | ||
+ | p3 = new L.LatLng(51.51, -0.047), | ||
+ | polygonPoints = [p1, p2, p3], | ||
+ | polygon = new L.Polygon(polygonPoints); | ||
+ | |||
+ | polygon.bindPopup("I am a polygon."); | ||
+ | map.addLayer(polygon); | ||
+ | |||
+ | |||
+ | map.on('click', onMapClick); | ||
+ | |||
+ | var popup = new L.Popup(); | ||
+ | |||
+ | function onMapClick(e) { | ||
+ | var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')'; | ||
+ | |||
+ | popup.setLatLng(e.latlng); | ||
+ | popup.setContent("You clicked the map at " + latlngStr); | ||
+ | map.openPopup(popup); | ||
+ | } | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 12:23, 7 June 2012