Sono state riscritte nuove versioni delle API, chiamate "PG Maps API 2". Se si desidera vedere la documentazione relativa alle versioni precedenti, fare clic qui.
Per vedere come migrare alle "PG Maps API 2" seguire il link Migrate to PG Maps API 2.
Altrimenti per aggiungere una Mappa dinamica nel vostro sito web, seguite questa documentazione. Potete creare una mappa semplice o implementare su di essa funzionalità più complesse.
Le novità:
Mostra...
Per visualizzare una mappa semplice tutto ciò di cui avrete bisogno è creare una pagina HTML che includa il file PGMaps.js e che contenga un semplice div. Fatto questo, in Javascript si crei un oggetto PGMappy da passare al div:
<html>
<head>
<title>PG Maps API - Example Simple</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
function body_onload() {
var map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Se non vengono specificati dei parametri iniziali all'oggetto PGMappy, verranno utilizzati i valori di default per la dimensione e per il centro che sarà Roma.
Simple Map New:
<html>
<head>
<title>PG Maps API - Example Simple New</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
function body_onload() {
var map1 = new PGMappy({nameContainer: 'mapcontainer',
imgType: PGMAP_IMG_TYPE_LIGHT});
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Radar:
Può essere aggiunto alla mappa un livello radar - i parametri disponibili sono:
- width - larghezza in pixels
- height - altezza in pixels
- top - posizione in pixels relativa al punto superiore della mappa principale (ha la priorità sui pulsanti)
- bottom - posizione in pixels relativa al punto più basso della mappa principale
- left - posizione in pixels relativa alla sinistra della mappa principale (ha priorità su right)
- right - posizione in pixels relativa alla destra della mappa principale
<html>
<head>
<title>PG Maps API - Radar</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer', z:4});
map1.addRadar({right:30, top:30, width:150, height:100});
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Centering:
La mappa può essere centrata su un punto specifico passando le coordinate di longitudine e latitudine quando viene creato l'oggetto PGMappy. Il metodo "setCenter" può essere anche chiamato successivamente con le coordinate di un punto per centrare la mappa.
<html>
<head>
<title>PG Maps API - Example Centering</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.08005,
lat:45.80798});
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.setCenter(9.19378,45.46347)">Milano</a>
<div id="mapcontainer"></div>
</body>
</html>
Drag & Zoom modes:
E' possibile scegliere tra i due modi di navigazione della mappa "Drag" e "Zoom" chiamando il metodo "setActionType" con un valore "PGMAP_ACTION_DRAG" per il modo drag (default) o "PGMAP_ACTION_ZOOM" per il modo zoom. Nel modo Drag, la mappa può essere trascinata in qualsiasi direzione usando il mouse; nel modo Zoom il mouse può essere usato per disegnare un rettangolo di zoom per ingrandire una zona specifica:
<html>
<head>
<title>PG Maps API - Example Drag & Zoom modes</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.08005,
lat:45.80798});
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.setActionType(PGMAP_ACTION_DRAG);">drag</a> |
<a href="javascript:map1.setActionType(PGMAP_ACTION_ZOOM);">zoom</a>
<div id="mapcontainer"></div>
</body>
</html>
Suggerimento: Per annullare lo zoom mentre è premuto il bottone sinistro del mouse e si sta tracciando il rettangolo di zoom, premere il tasto ESC.
Zoom:
Puoi zommare ad un livello specifico usando il metodo "setZoom" (valori 0-11) o zoomando In o Out usando i metodi "zoonIn" e "zoomOut":
<html>
<head>
<title>PG Maps API - Example Zoom</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.08005,
lat:45.80798});
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.setZoom(0);">Level 0</a> |
<a href="javascript:map1.setZoom(4);">Level 4</a> |
<a href="javascript:map1.setZoom(11);">Level 11</a> |
<a href="javascript:map1.zoomIn();">Zoom In</a> |
<a href="javascript:map1.zoomOut();">Zoom Out</a>
<div id="mapcontainer"></div>
</body>
</html>
Size:
Le dimensioni iniziali della mappa possono essere impostate quando si crea l'oggetto PGMappy, usando i parametri "mapWidth" e "mapHeight. La dimensione della mappa può essere cambiata in seguito utilizzando il metodo "setSize", specificando i valori di larghezza e altezza (in pixel).
<html>
<head>
<title>PG Maps API - Example Size</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.08005,
lat:45.80798,
mapWidth:500,
mapHeight:300});
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.setSize(800,600);">Size to 800x600</a> |
<a href="javascript:map1.setSize(500,300);">Size to 500x300</a>
<div id="mapcontainer"></div>
</body>
</html>
Map Type:
<html>
<head>
<title>PG Maps API - Example Map Type</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
var pgPoint = new PGPoint({lon:9.19173, lat:45.464102});
map1 = new PGMappy({nameContainer:'mapcontainer', z:0, pgPoint:pgPoint,
mapType:PGMAP_TYPE_ORTO});
map1.pointAdder(pgPoint);
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.setZoom(-3);">Level -3</a> |
<a href="javascript:map1.setZoom(0);">Level 0</a> |
<a href="javascript:map1.setZoom(4);">Level 4</a> |
<a href="javascript:map1.setZoom(11);">Level 11</a> |
<a href="javascript:map1.zoomIn();">Zoom In</a> |
<a href="javascript:map1.zoomOut();">Zoom Out</a>
<br />
<a href="javascript:map1.setMapType(PGMAP_TYPE_MAP);">Map</a> |
<a href="javascript:map1.setMapType(PGMAP_TYPE_ORTO);">Orto photo</a> |
<a href="javascript:map1.setMapType(PGMAP_TYPE_MIXED);">Mixed</a>
<div id="mapcontainer"></div>
</body>
</html>
Pan:
Puoi spostare la mappa usando il metodo "panMapBy" di un numero preciso di pixel in direzione "x" e/o "y":
<html>
<head>
<title>PG Maps API - Example Pan</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.panMapBy(0,-200);">North</a> |
<a href="javascript:map1.panMapBy(200,0);">East</a> |
<a href="javascript:map1.panMapBy(0,200);">South</a> |
<a href="javascript:map1.panMapBy(-200,0);">West</a>
<div id="mapcontainer"></div>
</body>
</html>
Compass:
La Bussola è un "layer" che può essere creato ed aggiunto alla mappa usando il metodo addLayer. Il metodo removeLayer invece può essere usato per rimuovere la bussola dalla mappa.
<html>
<head>
<title>PG Maps API - Example Compass</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1, comp;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:comp = new SEAT.Compass();map1.addLayer(comp);">Add Compass</a><br/>
<a href="javascript:map1.removeLayer(comp);">Remove Compass</a><br/>
<div id="mapcontainer"></div>
</body>
</html>
Simple Point:
Puoi visualizzare un punto semplice sulla mappa creando prima un oggetto PGPoint usando le coordinate di longitudine e latitudine e poi passando il punto all'oggetto PGMappy usando il metodo "pointAdder". Un valore opzionale "txt" può essere specificato nell'oggetto PGPoint e il testo sarà visualizzato nel punto:
<html>
<head>
<title>PG Maps API - Example Simple Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
var point1 = new PGPoint({lon:12.49553, lat:41.89504});
var point2 = new PGPoint({lon:12.48953, lat:41.89904, txt:'A'});
map1.pointAdder(point1);
map1.pointAdder(point2);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Custom Point:
<html>
<head>
<title>PG Maps API - Example Custom Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
var point1 = new PGPoint({ lon:12.49653,
lat:41.89304,
html:'<div style="width:55px; height:40px; background:#FBE600;
border:2px solid #000">Custom Point</div>'});
map1.pointAdder(point1);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Point Position:
Se vuoi cambiare la posizione del tuo punto da quello di default, puoi farlo specificando il numero di pixel di spostamento negli attributi "offsetX" e "offsetY" dell'oggetto PGPoint:
<html>
<head>
<title>PG Maps API - Example Point Position</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
function body_onload() {
var map1 = new PGMappy({nameContainer: 'mapcontainer'});
var point1 = new PGPoint({lon:12.49553, lat:41.89504});
var point2 = new PGPoint({lon:12.49553, lat:41.89504, txt:'Off', offsetX:50, offsetY:30});
map1.pointAdder(point1);
map1.pointAdder(point2);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Point Opener:
Usando l'attributo "opener" dell'oggetto PGMappy, il punto diventa cliccabile e se premuto si apre un popup con le vostre informazioni personalizzate. Ci sono due attributi che possono essere usati, il primo "name" viene usato per mostrare la prima linea evidenziata di informazioni mentre l'attributo "info" è un array di stringhe che mostra informazioni in sequenza:
<html>
<head>
<title>PG Maps API - Example Point Opener</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
var point1 = new PGPoint({ lon:12.49053,
lat:41.89004,
txt:'Q',
title:'Q SpA',
opened:{name: 'ACME Services Ltd',
info: ['Via Grande 34, 21000, Milano(MI)',
'tel: 02-33445566', 'fax: 02-3124567',
'email: acme@server.com']
}
});
map1.pointAdder(point1);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Custom Opener:
Puoi disegnare il tuo popup anche personalizzando l'HTML da inserire nell'attributo "html" dell'attributo "opened". Il parametro closeID puo essere utilizzato per specificare l'elemento che chiude il popup:
<html>
<head>
<title>PG Maps API - Example Custom Opener</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
var point1 = new PGPoint({ lon:12.49053,
lat:41.89004,
txt:'Q',
title:'Q SpA',
opened:{html:'<div style="width:200px; height:100px;
background:orange; border:2px solid #000;">Custom Opener
<div id="close" style="position:absolute;top:2px;right:2px;">X</div>
</div>',
closeID:'close'
}
});
map1.pointAdder(point1);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Opener Position:
Se vuoi cambiare la posizione del tuo popup html di default, puoi farlo specificando il numero di pixel di spostamento negli attributi "offsetX" e "offsetY" dell'oggetto PGPoint opened:
<html>
<head>
<title>PG Maps API - Example Opener Position</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
var point1 = new PGPoint({ lon:12.49053,
lat:41.89304,
txt:'Q',
title:'Q SpA',
opened:{html:'<div style="width:200px; height:100px;
background:orange; border:2px solid #000;">Custom Opener</div>',
offsetX:-100,
offsetY:-100
}
});
map1.pointAdder(point1);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Opener Dynamic:
L'HTML usato per creare un popup può essere specificato dinamicamente dall'utente al momento del clic. Questo viene fatto da una funzione specifica di callback nel parametro onOpen e opzionalmente un oggetto di parametri nel parametro onOpenParams. Quando viene cliccato il punto sulla mappa, la funzione di callback viene chiamata e se è stato assegnato un valore al parametro onOpenParams, questo valore in quanto unico, viene passato. Ora si può generare l'HTML per usare il popup e quando è pronto, basta chiamare il metodo openBig dell'oggetto punto passandoli il valore. Quando il popup viene chiuso, l'HTML generato dall'utente è rimosso fisicamente dal DOM in modo da essere rigenerato ogni volta che viene aperto il popup. Il vantaggio di questo metodo è duplice - c'è meno HTML nella pagina ed è dinamico, così può essere cambiato ogni volta che il popup viene aperto.
<html>
<head>
<title>PG Maps API - Example Opener Dynamic</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1, point1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
point1 = new PGPoint({ lon:12.49053,
lat:41.89304,
txt:'Q',
opened:{onOpen:myOpened,
onOpenParams:{url: 'http://www.aaa.it', city:'milano'}
}
});
map1.pointAdder(point1);
}
function myOpened(params) {
var html = '<div style="width:150px; height:150px; background:yellow;
border:2px solid #000;">' + params.city + '</div>';
point1.openBig(html);
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Geo Code Point:
Invece di specificare le coordinate di latitudine e longitudine per visualizzare un punto, puoi specificare l'indirizzo e le coordinate verranno calcolate automaticamente. Innanzitutto, è necessario creare un oggetto PGGeoCod valorizzando gli attributi con l'indirizzo desiderato. Uno degli attributi è chiamato "onComplete" e specifica la funzione da chiamare con il risultato della Geocodifica. Il primo parametro di questa chiamata di funzione contiene un oggetto PGAddress e questo viene usato per creare un oggetto PGPoint usando l'attributo "pgAddress". Questo oggetto PGPoint ora può essere usato, per visualizzare il punto sulla mappa.
<html>
<head>
<title>PG Maps API - Geo Code Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
var g = new PGGeoCod({provincia: null,
comune: 'roma',
indirizzo: 'via leonina',
civico: null,
onComplete: 'afterGeoCod'});
}
function afterGeoCod(pgAddress) {
if (pgAddress) {
var pgPoint = new PGPoint({ pgAddress:pgAddress,
txt: 'Geo'});
map1.pointAdder(pgPoint);
}
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Point Centering Map:
Puoi centrare una mappa partendo da un punto specifico PGPoint (invece di specificare le coordinate o usando l'oggetto PGGeoCode per Geocodificare un indirizzo) che poi viene passato come parametro quando viene create la mappa:
<html>
<head>
<title>PG Maps API - Example Point Centering Map</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
var g = new PGGeoCod({provincia: null,
comune: 'milano',
indirizzo: 'via grosio',
civico: '8',
onComplete: 'afterGeoCod'});
}
function afterGeoCod(pgAddress) {
if (pgAddress) {
var pgPoint = new PGPoint({ pgAddress:pgAddress,
txt: 'Work'});
map1 = new PGMappy({nameContainer: 'mapcontainer', z:1, pgPoint:pgPoint});
map1.pointAdder(pgPoint);
}
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Point Centering:
Puoi anche centrare la mappa usando un oggetto PGPoint dopo che la mappa è stata creata. Il metodo per farlo è "setCenterPoint" e accetta come parametro, un oggetto PGPoint. Nell'esempio sotto, un oggetto PGPoint viene creato usando la Geocodifica e la mappa verrà centrata in quel punto:
<html>
<head>
<title>PG Maps API - Example Point Centering</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer', z:1});
}
function centerPoint() {
var g = new PGGeoCod({provincia: null,
comune: 'milano',
indirizzo: 'via moscova',
civico: '50',
onComplete: 'afterGeoCod'});
}
function afterGeoCod(pgAddress) {
if (pgAddress) {
var pgPoint = new PGPoint({ pgAddress:pgAddress,
txt: 'Casa'});
map1.setCenterPoint(pgPoint);
map1.pointAdder(pgPoint);
}
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:centerPoint()">Milano, Via Moscova 50</a>
<div id="mapcontainer"></div>
</body>
</html>
Point Centering Many:
Usando il metodo setCenterAndZoom si può centrare la mappa e settare un livello di zoom per rendere visibili tutti i punti.
<html>
<head>
<title>PG Maps API - Example Point Centering Many</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
function body_onload() {
var map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.122285,
lat:45.498595});
var p1 = new PGPoint({lon:9.21800,lat:45.47600});
var p2 = new PGPoint({lon:9.14200,lat:45.47600});
var p3 = new PGPoint({lon:9.181,lat:45.442});
var p4 = new PGPoint({lon:9.181,lat:45.496});
map1.pointAdder(p1);
map1.pointAdder(p2);
map1.pointAdder(p3);
map1.pointAdder(p4);
map1.setCenterAndZoom();
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Point Drag:
Puoi attivare il drag di un PGPoint usando l'oggetto PGDragDrop. Gli eventi opzionali possono essere collegati al PGPoint che saranno chiamati durante il drag and drop. Vedere la pagina PGEvents per la lista degli eventi disponibili.
<html>
<head>
<title>PG Maps API - Example Point Drag</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer', z:4});
var point1 = new PGPoint({lon:12.49553, lat:41.89504});
map1.pointAdder(point1);
PGDragDrop.addDragDrop(point1);
PGEvent.addListener(point1, 'dragafter', function(data) {alert(data.lon+','+data.lat);});
}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
</body>
</html>
Polyline:
Una linea può essere tracciata sulla mappa con la creazione di oggetti PGPoint, usandoli per creare un oggetto PGLine e passandolo all'oggetto PGMappy. I parametri disponibili sono:
- id - Un identificatore stringa opzionale
- points - Un array di oggetti PGPoint
- rgb - Un oggetto JSON che specifica il colore della linea es. {r:0, g:255, b:0}
- lineWidth - Un numero che indica la larghezza della linea (in pixels)
- opacity - L'opacità della linea (un numero da 0 a 1)
<html>
<head>
<title>PG Maps API - Polyline</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1, pgPolyline1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer', z:3});
}
function addPolyline() {
var p1 = new PGPoint({lon:12.48853, lat:41.88804});
var p2 = new PGPoint({lon:12.48953, lat:41.89504});
var p3 = new PGPoint({lon:12.49553, lat:41.89904});
var p4 = new PGPoint({lon:12.49753, lat:41.88804});
var pgLine = new PGLine({id:'polyline1', points:[p1, p2, p3, p4],
rgb:{r:0, g:255, b:0}, lineWidth:20, opacity:0.8});
pgPolyline1 = map1.pgLineAdder(pgLine);
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:addPolyline();">Add Polyline</a><br/>
<a href="javascript:map1.removeLine('polyline1');">Remove Polyline</a><br/>
<div id="mapcontainer"></div>
</body>
</html>
Polygon:
Una figura puo' essere tracciata sulla mappa creando oggetti PGPoint, che verranno usati per creare un oggetto PGPolygon da passare all'oggetto PGMappy. I parametri disponibili sono:
- id - Un identificatore stringa opzionale
- points - Un array di oggetti PGPoint
- rgb - Un oggetto JSON che specifica il colore dello sfondo es. {r:0, g:255, b:0}
- opacity - L'opacità dello sfondo(un numero da 0 a 1)
- borderRgb - Un oggetto JSON che specifica il colore dello sfondo es. {r:0, g:0, b:0}
- borderWidth - Un numero che indica lo spessore del bordo (in pixels),
- borderOpacity - L'opacità del bordo (un numero da 0 a 1)
<html>
<head>
<title>PG Maps API - Polygon</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1, pgPolygon1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer', z:4});
}
function addPolygon() {
var p1 = new PGPoint({lon:12.49853, lat:41.88804});
var p2 = new PGPoint({lon:12.49953, lat:41.89504});
var p3 = new PGPoint({lon:12.50553, lat:41.90104});
var p4 = new PGPoint({lon:12.51753, lat:41.88804});
pgPolygon1 = new PGPolygon({id:'poly1',
points:[p1, p2, p3, p4],
rgb:{r:0, g:255, b:0},
opacity:0.5,
borderRgb:{r:0, g:0, b:0},
borderWidth:3,
borderOpacity:0.9});
map1.pgPolygonAdder(pgPolygon1);
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:addPolygon();">Add Polygon</a><br/>
<a href="javascript:pgPolygon1.remove();">Remove Polygon</a><br/>
<div id="mapcontainer"></div>
</body>
</html>
Lon Lat to Pixels:
Chiamando il metodo getPixelFromLonLat e fornendo i valori di lon e lat, verrà ritornata la posizione in pixel dei punti relativi all'angolo in alto a sinistra della mappa visibile.
<html>
<head>
<title>PG Maps API - Example Pixel from Lon Lat</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.08005,
lat:45.80798});
}
function addPoint(lon, lat) {
var px = map1.getPixelFromLonLat(lon, lat);
var pt = new PGPoint({lon:lon, lat:lat,
html:'<div style="background:yellow;">'+px.x+', '+px.y+'</div>'});
map1.pointAdder(pt);
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.removeAllPoints();">Remove ALL</a> |
<a href="javascript:addPoint(9.07571, 45.81101);">9.07571, 45.81101</a> |
<a href="javascript:addPoint(9.0786, 45.80494);">9.0786, 45.80494</a> |
<div id="mapcontainer"></div>
</body>
</html>
Pixels to Lon Lat:
Chiamando il metodo getLonLatFromPixel e fornendo la posizione in pixel (relativa all'angolo in alto a sinistra della mappa visibile) verrà ritornata la posizione di lon e lat.
<html>
<head>
<title>PG Maps API - Example Lon Lat From Pixel</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
lon:9.08005,
lat:45.80798
});
}
function addPoint(pxX, pxY) {
var px = map1.getLonLatFromPixel(pxX, pxY);
var pt = new PGPoint({lon:px.lon, lat:px.lat,
html:'<div style="background:yellow;">'+px.lon+', '+px.lat+'</div>'});
map1.pointAdder(pt);
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.removeAllPoints();">Remove ALL</a> |
<a href="javascript:addPoint(10,10);">20,20</a> |
<a href="javascript:addPoint(250,40);">250,40</a> |
<a href="javascript:addPoint(150,325);">150,325</a> |
<a href="javascript:addPoint(320,240);">320,240</a>
<div id="mapcontainer"></div>
</body>
</html>
Mouse Events:
I metodi personalizzati possono essere chiamati prima e dopo gli eventi "mouseup", "mousedown" e "mousemove". Per incorporarli nei metodi possono essere usati i seguenti inizializzatori: onMapMouseDownPre, onMapMouseDownPost, onMapMouseUpPre, onMapMouseUpPost, onMapMouseMovePre e onMapMouseMovePost.
<html>
<head>
<title>PG Maps API - Example Mouse Events</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer',
onMapMouseDownPre:function() {m('onMapMouseDownPre');},
onMapMouseDownPost:function() {m('onMapMouseDownPost');},
onMapMouseUpPre:function() {m('onMapMouseUpPre');},
onMapMouseUpPost:function() {m('onMapMouseUpPost');},
onMapMouseMovePre:function() {m('onMapMouseMovePre');},
onMapMouseMovePost:function() {m('onMapMouseMovePost');}
});
}
function m(a) {$('msg').innerHTML = $('msg').innerHTML+'\n'+a;}
</script>
</head>
<body onload="body_onload()">
<div id="mapcontainer"></div>
<textarea id="msg" rows="20"></textarea>
</body>
</html>
Reverse Geo Code:
Usate questa funzionalità per ottenere l'indirizzo della strada più vicina ad una coppia di coordinate specificate.
<html>
<head>
<title>PG Maps API - Geo Code Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
function body_onload() {
var g = new PGGeoRevCod({lon:9,
lat:45,
onComplete:'afterGeoRevCod'});
}
function afterGeoRevCod(pgAddressRev) {
if (pgAddressRev) {
var a = pgAddressRev.nc +',' +
pgAddressRev.toponimo +',' +
pgAddressRev.com +',' +
pgAddressRev.prov +',' +
pgAddressRev.lon +',' +
pgAddressRev.lat;
$('georev').innerHTML = a;
}
}
</script>
</head>
<body onload="body_onload()">
<div id="georev"></div>
</body>
</html>
Route:
Per aggiungere informazioni di un itinerario alla mappa, usare prima il metodo getRoute per prendere il percorso dall'oggetto JSON e poi aggiungerlo alla mappa usando il metodo addRoute. Un'itinerario semplice può essere calcolato usando solo il punto di inizio e quello di fine, un percorso più complesso può essere creato aggiungendo punti intermedi con il parametro pItn.
Si possono creare diversi tipi di routing passando le seguenti costanti nel parametro rt:
- PGROUTE_TYPE_CAR - percorso automobilistico.
- PGROUTE_TYPE_PED - percorso pedonale.
- PGROUTE_TYPE_CAR_BEST_DIST - percorso automobilistico più breve.
- PGROUTE_TYPE_CAR_NO_TOLL - percorso automobilistico senza pedaggi.
NOTA: A partire dalla versione 0.7.5 delle API la funzionalità del routing è cambiata come segue:
- Per creare un percorso multi punto, inserire i punti intermedi nel parametro pItn.
- Il metodo getRoute è ora usato nel metodo getMapRoute.
- il formato del JSON che contiene la parte testuale del percorso è stato cambiato.
<html>
<head>
<title>PG Maps API - Route</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1,p1,p2,p3,p4,routeParams1,r1,pCenter;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
function addRoutes() {
p1 = new PGPoint({lon:12.49353, lat:41.89504, txt:'P1'});
p2 = new PGPoint({lon:12.497615, lat:41.896445, txt:'P2'});
p3 = new PGPoint({lon:12.507045, lat:41.89355, txt:'P3'});
p4 = new PGPoint({lon:12.50615, lat:41.8893, txt:'P4'});
map1.pointAdder(p1);
map1.pointAdder(p2);
map1.pointAdder(p3);
map1.pointAdder(p4);
// Get the center point and zoom
pCenter = map1.getRouteCenter([p1,p2,p3,p4]);
routeParams1 = {id:'myroute1',
pStart:p1,
pEnd:p4,
pItn:[p2, p3],
rt:PGROUTE_TYPE_CAR,
rgb:{r:255, g:0, b:0},
lineWidth:15,
initLon:pCenter.lon,
initLat:pCenter.lat,
initZ:pCenter.z};
map1.getRoute(routeParams1, 'afterRoute1');
}
function afterRoute1(route) {
r1 = route;
var routeList = [{routeParams:routeParams1, route:r1}];
map1.addRoute(routeList);
}
function addRouteText() {
if (r1) {
var s='';
s += 'total time: ' + r1.tt + ' secs<br/>';
s += 'total dist: ' + r1.td + ' m<br/>';
$.each(r1.rplan, function(i,v){
s += '<br/>leg ' + (i+1) + '<br/>';
s += 'time: ' + v.tt + ' secs<br/>';
s += 'dist: ' + v.td + ' m<br/>';
$.each(v.rleg, function(i,v){
var d = '';
switch (v.dir) {
case 0:
d = "Continua in";
break;
case 1:
d = "Gira a sinistra";
break;
case 2:
d = "Gira a destra";
break;
case 3:
d = "Subito a sinistra";
break;
case 4:
d = "Subito a destra";
break;
case 5:
d = "Esci in";
break;
case 6:
d = "Immetiti";
break;
}
s+=(i+1)+'. '+d+v.dsc+'('+v.loc+') '+v.pdes+' mt.<br/>';
});
});
$('#rtxt').html(s);
}
}
</script>
</head>
<body onload="body_onload()">
<div style="width:150px;float:left;">
<a href="javascript:addRoutes();">add Routes</a><br/>
<a href="javascript:addRouteText();">Route Text</a><br/>
<a href="javascript:map1.removeRoute('myroute1');">remove Route</a><br/>
<a href="javascript:map1.zoomIn();">zoomIn</a><br/>
<a href="javascript:map1.zoomOut();">zoomOut</a>
</div>
<div id="mapcontainer" style="float:left;"></div>
<div id="rtxt" style="float:left;margin-left:20px;"></div>
</body>
</html>
Route Format (GPX/KML):
L'URL di un file GPX o KML può essere passato a questo metodo per tracciare un percorso personalizzato sulla mappa. Se il file contiene anche i Waypoints, essi saranno visualizzati. Attn. il nome del file deve essere encodata correttamente.
<html>
<head>
<title>PG Maps API - Route Format</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1,routeParams1,r1, way;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer', mapWidth:800, mapHeight:600});
}
function addRouteFormat(id, url) {
routeParams1 = {id:id,
url:url,
rgb:{r:0, g:255, b:0},
lineWidth:5};
map1.getRouteFormat(routeParams1, 'afterRoute1');
}
function afterRoute1(route) {
r1 = route;
var routeList = [{routeParams:routeParams1, route:r1}];
map1.addRouteFormat(routeList);
}
function addWayPoints() {
PGWayPoint.addWayPoints(map1, r1, {onComplete:onCompleteWayPoints});
}
function addWayPointsDyn() {
PGWayPoint.addWayPoints(map1, r1, {onOpen:onOpenWaypoint, onComplete:onCompleteWayPoints});
}
function onOpenWaypoint(wp) {
return '<div style="width:400px;height:200px;background:purple;color:white;">' +
'<div id="' + wp.closeID + '"
style="position:absolute;top:5px;right:5px;width:14px;height:14px;">
<img src="http://img.tuttocitta.it/nuovotcol/img/fumetti/icoChiudiFumetto.gif"
width="14" height="14"/></div>' +
(wp.name ? '<b>' + wp.name + '</b>' : '') +
(wp.dsc ? '<br/><br/>' + wp.dsc : '') +
(wp.cmt ? '<br/><br/>' + wp.cmt : '') +
'</div>';
}
function onCompleteWayPoints(w) {
way = w;
}
function removeRouteFormat(id) {
map1.removeRouteFormat(id);
}
function removeWayPoints() {
PGWayPoint.removeWayPoints(way);
}
</script>
</head>
<body onload="body_onload()">
<div style="width:150px;float:left;">
<a href="javascript:map1.zoomIn()">Zoom In</a> |
<a href="javascript:map1.zoomOut()">Zoom Out</a><br/>
<a href="javascript:addRouteFormat('myroute1',
'http://api.visual.paginegialle.it/tcolnew/mapsapi/examples/'
+ encodeURIComponent('FTommaselli.gpx'));">Add Route Format 1</a><br/>
<a href="javascript:addWayPoints();">Add Way Points</a><br/>
<a href="javascript:addWayPointsDyn();">Add Way Points Dyn</a><br/>
<a href="javascript:removeRouteFormat();">Remove Route Format 1</a><br/>
<a href="javascript:removeWayPoints();">Remove Way Points</a><br/>
</div>
<div id="mapcontainer" style="float:left;"></div>
</body>
</html>
Additional functionalità:
Funzionalità varie.
<html>
<head>
<title>PG Maps API - Example Additional Functionality</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
type="text/javascript"></script>
<script type="text/javascript">
var map1, point1;
function body_onload() {
map1 = new PGMappy({nameContainer: 'mapcontainer'});
point1 = new PGPoint({ lon:12.49053,
lat:41.89304,
txt:'Q',
opened:{onOpen:myOpened,
onOpenParams:{url: 'http://www.aaa.it', city:'milano'}
}
});
map1.pointAdder(point1);
map1.pointAdder(new PGPoint({lon:12.49353, lat:41.89504}));
}
function myOpened(params) {
return '<div style="width:150px; height:150px; background:yellow; border:2px
solid #000;">' + params.city + '</div>';
}
</script>
</head>
<body onload="body_onload()">
<a href="javascript:map1.removeAllPoints();">Remove All Points</a>
<br/>
<a href="javascript:alert(map1.getCenter().lon + ', ' +
map1.getCenter().lat);">Get Center</a>
<br/>
<a href="javascript:alert(map1.getMapType());">Get Map Type</a>
<br/>
<a href="javascript:map1.setMapType(PGMAP_TYPE_MAP);">Map</a> |
<a href="javascript:map1.setMapType(PGMAP_TYPE_ORTO);">Orto photo</a> |
<a href="javascript:map1.setMapType(PGMAP_TYPE_MIXED);">Mixed</a>
<br/>
<div id="mapcontainer"></div>
</body>
</html>