IT:OpenLayers Foto

From OpenStreetMap Wiki
Jump to navigation Jump to search

Visualizzare le proprie foto sulla mappa

Questo esempio mostra come visualizzare sulla mappa le proprie foto in un modo simile a Panoramio, con la differenza che le foto risiedono sul nostro sito o in locale sul nostro computer.

L' esempio impiega Geosetter per costruire il file .kml contenente le coordinate dei markers da visualizzare sulla mappa nelle posizioni delle foto. Altro esempio: comune di Storo

Il file HTML

Il codice del file HTML è simile agli esempi precedenti, con il layer dove verranno visualizzate i markers delle foto definito da; 

 var foto = new OpenLayers.Layer.GML("KML", "foto.klm", 
               {
                format: OpenLayers.Format.KML, projection: map.displayProjection,
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }
               });

Sono inoltre presenti le funzioni che consentono di visualizzare le foto cliccando sull' icona .

Copiare il codice in un file di testo e salvare come HTML con il nome, ad esempio, di foto.html.

Esempi: OpenStreetLedro e Foto Valle del Santerno 

<html>
<head>
<title>layer OSM </title>
 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
 
// Posizione iniziale della mappa
    var lat=44.186;
    var lon=11.554;
    var zoom=14;
 
 
    function init() {
 
        map = new OpenLayers.Map ("map", {
            controls:[ 
			new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanZoomBar(),
                       new OpenLayers.Control.ScaleLine(),
                       new OpenLayers.Control.Permalink('permalink'),
                       new OpenLayers.Control.MousePosition(),                    
                       new OpenLayers.Control.Attribution()
				      ],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
			var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");	
			var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
 
				// Layer KLM per le foto
			   var foto = new OpenLayers.Layer.GML("KML", "foto.kml", 
               {
                format: OpenLayers.Format.KML, projection: map.displayProjection,
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  maxDepth: 2
                }
               });
			
		map.addLayers([ mapnik,cyclemap, foto ] );
 
		map.addControl(new OpenLayers.Control.LayerSwitcher());
 
        var lonLat = new OpenLayers.LonLat( lon ,lat )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
  // Seleziona le foto
			 
			 select = new OpenLayers.Control.SelectFeature(foto);
            
            foto.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect });
  
            map.addControl(select);
            select.activate(); 
			
 function onPopupClose(evt) {
            select.unselectAll();
        }
        
		function onFeatureSelect(event) {
            var feature = event.feature;
            var selectedFeature = feature;
            var popup = new OpenLayers.Popup.FramedCloud("chicken", 
                feature.geometry.getBounds().getCenterLonLat(),
                new OpenLayers.Size(100,100),
                "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
                null, true, onPopupClose
            );
            feature.popup = popup;
            map.addPopup(popup);
        }
        
		function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }
 
		map.setCenter (lonLat, zoom); 
 }
 
 
</script>
</head>
 
<body onload="init();">
 <span style="font-family: Arial; font-weight: bold;">OSM Mapnik, Osmarender, CycleMap e layer foto</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

Il file KML

E' un file kml compilato da GeoSetter come più avanti spiegato, dove sono specificate le coordinate delle icone che contrassegnano le foto sulla mappa ed il nome e l' url del file icona, oltre che la sua scala.

L' esempio utilizza inoltre immagini a dimensioni ridotte da visualizzare sulla mappa (small1, small2,small3) ed il link alla foto a piena definizione (full1, full2, full3).

Le prime sono contenute nella directory "images" e le seconde nella directory "foto".

Per testare l' esempio si possono creare le due directory nella cartella dove é collocato il file foto.html e inserirvi foto a piacere, rinominate come sopra.

Per l' icona si può utilizzare un qualisiasi file grafico salvato come "icona.png".

Copiare il testo seguente in un file e salvarlo come "foto.kml" 

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<Style id="GeoSetterStyle">
<IconStyle>
<scale>0.5</scale>
<Icon><href>icona.png</href></Icon>
</IconStyle>
</Style>
<Folder><name>Immagini</name>
<Placemark>
<styleUrl>#GeoSetterStyle</styleUrl>
<name>Foto 1</name>
<Snippet></Snippet>
<description>
<![CDATA[<img src="images/small1.jpg" width="480" height="360">
<br><a href="foto/full1.jpg" target="_blank">Link To Original</a>
]]>
</description>
<Point><coordinates>11.56055556,44.19000000,466.50000000</coordinates></Point>
</Placemark>
<Placemark>
<styleUrl>#GeoSetterStyle</styleUrl>
<name>Foto 2</name>
<Snippet></Snippet>
<description>
<![CDATA[<img src="small2.jpg" width="480" height="360">
<br><a href="foto/full2.jpg" target="_blank">Link To Original</a>
]]>
</description>
<Point><coordinates>11.55305556,44.18583333,541.00000000</coordinates></Point>
</Placemark>
<Placemark>
<styleUrl>#GeoSetterStyle</styleUrl>
<name>Foto 3</name>
<Snippet></Snippet>
<description>
<![CDATA[<img src="images/small3.jpg" width="480" height="360">
<br><a href="foto/full3.jpg" target="_blank">Link To Original</a>
]]>
</description>
<Point><coordinates>11.54833333,44.18250000,578.50000000</coordinates></Point>
</Placemark>
</Folder>
</Document>
</kml>

GeoSetter

GeoSetter è uno dei programmi con il quale si può preparare in modo automatico il file "foto.kml" oltre che georeferenziare le foto se non lo sono.

E' un freeware pe Windows e consente di generare un file .kmz per visualizzare le foto su Google Earth con l' apposita opzione.

Il file .kmz, decompresso con un qualunque zip, contiene una cartella "images" ed un file denominato "temp.kml" che rinomineremo "foto.kml".

Aprendo il file con un editore di testo, sarà possibile rinominare l'icona richiamata da "geosetter.png" a icona.png come nell' esempio, in alternativa basta rinominare la nostra icona "geosetter.png".

Per avere, come nell' esempio, il link alla foto a piena definizione, basterà selezionare l' opzione "Link To Originals" presente nella finestra di dialogo ed assegnare come web address il nome "foto".

E" anche possibile visualizzare una immagine ridotta della foto sulla mappa al posto dell"icona, selezionando come Marker Setting l' opzione "Mini Image", in questo caso GeoSetter collocherà le icone in una directori chiamata appunto "icons".

Vedi anche

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=IT:OpenLayers_Foto&oldid=933242"