Pictometry API full example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B5MAP EMBEDDED MAP</title>
<style type="text/css">
<!--
#map_canvas {
border: 1px solid red;
background-color: gray;
}
-->
</style>
<script src="http://b5m.gipuzkoa.eus/api/1.0/en/library/openlayers/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map, pictometry_layer;
var texto = "<strong>Zarauzko dama</strong><p>Marcos Hernando. 1996.</p><p>Material: acero inoxidable.</p>";
function mousedown( evt ) {
if ( popup ) {
popup.toggle();
}
OpenLayers.Event.stop(evt);
}
function draw_bubble( text , lon , lat ) {
// Tamaño del marker
var size = new OpenLayers.Size(20,34);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/RED.png',size,offset);
popup = new OpenLayers.Popup.FramedCloud("",
new OpenLayers.LonLat( lon , lat ),
null, //framecloud uses autosize
"<div style='font-size:12px;'>" + text + "</div>",
icon , false);
map.addPopup(popup);
var markers = new OpenLayers.Layer.Markers( "" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(lon,lat) , icon);
marker.events.register("mousedown", marker, mousedown);
markers.addMarker(marker);
}
function init ( map_canvas ) {
var ZOOM = 4;
var options = {
controls : [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar() ],
maxExtent : new OpenLayers.Bounds(0, 0, 4008, 2672),
maxResolution : 16,
numZoomLevels : 5,
units : 'pixels', // IMPORTANTE!
isBaseLayer : true
};
map=new OpenLayers.Map( map_canvas,options );
var url = "http://b5m.gipuzkoa.eus/pictometry/2007/ESGUIP07-093-LIB/ESGUIP07-093-WHS/ESGU10006011%20cluster/ESGU10009012/ESGU10009012NeighObliq7010N_070714/";
var pixX = 1013;
var pixY = 1804;
var pixels=new OpenLayers.LonLat(pixX,pixY);
pictometry_layer = new OpenLayers.Layer.TMS( "Pictometry Layer", url, {layername: '', serviceVersion: '', type:'jpg'} );
map.addLayers([pictometry_layer]); // Crea la capa TMS
map.setCenter(pixels,ZOOM);
draw_bubble( texto , pixX , pixY );
}
//]]>
</script>
</head>
<body id="embedded" topmargin='0' leftmargin='0' marginheight='0' marginwidth='0' onload="init( 'map_canvas' )">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body></html>
