[Talk-it] Openlayers in val di ledro dove siamo arrivati
mattruffoni at libero.it
mattruffoni at libero.it
Sat Dec 6 16:50:44 GMT 2008
Ad oggi sono riuscito a pubblicare questo
http://www.icvallediledro.it/OpenStreetLedro/OpenStreetLedro.htm
"brutalmente scopiazzato" da http://cortesi.com/sapere_libera_tutti/
avrei bisogno di ottenere però una carta che parta da così
http://www.openstreetmap.org/?lat=45.8865&lon=10.7371&zoom=13&layers=B000FTF
e riesca ad arrivare a questo ingrandimento
http://www.openstreetmap.org/?lat=45.89595&lon=10.717655&zoom=18&layers=B000FTF
(credo di aver capito che si tratta di zoom dal 13 al 18)
sulla quale posizionare i punti rilevati dai miei alunni.
mi sembra di capire che devo agire su parametri quali maxResolution ma non ne vengo a capo
il "mio" (grazie a Simone a Cortesi) .html è questo sotto. Dove devo agire?
Grazie matteo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="2style.css" type="text/css" />
<link rel="stylesheet" href="framedCloud.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#map {
width: 100%;
height: 90%;
border: 1px solid black;
}
.olPopup p { margin:0px; font-size: .9em;}
.olPopup h2 { font-size:1.2em; }
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 9;
var lat = 45;
var zoom = 8;
var map, layer;
function init(){
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34)
};
map = new OpenLayers.Map('map', options);
var mapnik = new OpenLayers.Layer.TMS(
"OpenStreetMap (Mapnik)",
"http://tile.openstreetmap.org/",
{
type: 'png', getURL: osm_getTileURL,
displayOutsideMaxExtent: true,
attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
}
);
map.addLayer(mapnik);
map.addLayer(new OpenLayers.Layer.GML("KML", "valdiledro1.kml",
{
format: OpenLayers.Format.KML,
projection: map.displayProjection,
formatOptions: {
extractStyles: true,
extractAttributes: true
}
}));
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
map.zoomToExtent(new OpenLayers.Bounds(6.45,36.3,18.85,47.2).transform(map.displayProjection, map.projection));
}
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(220,220),
"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function osm_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return OpenLayers.Util.getImagesLocation() + "404.png";
} else {
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
</script>
<title>Openstreetledro!</title>
</head>
<body onload="init()">
<h1 id="title">Openstreetledro!</h1>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
More information about the Talk-it
mailing list