Visualizzazione risultati 1 fino 8 di 8

Discussione: Mappa

  1. 25-09-2022, 16.20.23 #1
    fiduciali
    fiduciali non è connesso Neofita
    Data registrazione
    05-07-2017
    Messaggi
    23

    Predefinito Mappa

    Buonasera, in rete ho trovato questo codice che vorrei aggiungere ed ampliare sulla mia pagina.
    entrambi da soli funzionano correttamente ma quando li metto nella stessa pagina (adattando l'uno all'altro) la pagina è completamente bianca e non mostra nessun errore.

    il codice della mia pagina (depurato del php che preleva le informazioni necessarie dal database) è:
    Codice PHP:
    .......

    <script>

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    center: new google.maps.LatLng(<?php echo $latitudine; ?>, <?php echo $longitudine; ?>),
    zoom: 15
    });

    var infoWindow = new google.maps.InfoWindow;

    ........

    var pathCoords_red = [

    ........

    {lat:<?php echo $latitudine_1; ?>, lng:<?php echo $longitudine_1; ?>},
    {lat:<?php echo $latitudine_2; ?>, lng:<?php echo $longitudine_2; ?>},

    ........

    ];

    var path_red = new google.maps.Polyline({
    path: pathCoords_red,
    geodesic: true,
    strokeColor: 'red',
    strokeOpacity: 1.0,
    strokeWeight: 2
    });
    path_red.setMap(map);

    ........

    // Change this depending on the name of your PHP or XML file
    downloadUrl('ge_lista_punti.php', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {
    var id = markerElem.getAttribute('id');
    var name = markerElem.getAttribute('name');
    var type = markerElem.getAttribute('type');
    var x = markerElem.getAttribute('x');
    var y = markerElem.getAttribute('y');
    var z = markerElem.getAttribute('z');
    var latit = markerElem.getAttribute('lat');
    var long = markerElem.getAttribute('lng');
    var quota = markerElem.getAttribute('quota');
    var point = new google.maps.LatLng(
    parseFloat(markerElem.getAttribute('lat')),
    parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);


    var text = document.createElement('text');
    text.textContent = 'X: ' + x;
    infowincontent.appendChild(document.createElement('hr'));
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = 'Y: ' + y;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = 'Z: ' + z;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('hr'));

    var text = document.createElement('text');
    var latit = Math.round(latit*Math.pow(10,5))/Math.pow(10,5);
    text.textContent = 'Lat: ' + latit;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));
    var text = document.createElement('text');
    var long = Math.round(long*Math.pow(10,5))/Math.pow(10,5);
    text.textContent = 'Long: ' + long;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));
    var text = document.createElement('text');
    text.textContent = 'Quota: ' + quota;
    infowincontent.appendChild(text);

    var customLabel = {
    PF: {
    //label: 'PF'
    },
    P: {
    //label: name
    }
    };

    //var icon = customLabel[type] || {};


    var mioLogo = new google.maps.MarkerImage('/img/green-dot.png',
    new google.maps.Size(32,32),
    new google.maps.Point(0,0)
    );

    var marker = new google.maps.Marker({
    map: map,
    position: point,
    //label: icon.label,

    icon: mioLogo

    });
    marker.addListener('click', function() {
    infoWindow.setContent(infowincontent);
    infoWindow.open(map, marker);
    });
    });
    });
    }


    function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

    request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
    };


    request.open('GET', url, true);
    request.send(null);
    }

    function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>

    ........
    mentre il codice che vorrei adattare e inserire è questo:
    Codice PHP:
    <!DOCTYPE html>
    <    html>
    <    head>
    <    meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <    meta charset="UTF-8">
    <    title>Catasto</title>
    <    script type="text/javascript" src="https://maps.google.com/maps/api/js?key=""&libraries=drawing"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4-src.min.js"></script>
    <style type="text/css">
    #map, html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    }
    </style>
    <script type="text/javascript">
    proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");
    proj4.defs("EPSG:6706", "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs");

    var map;
    var centro_italia= new google.maps.LatLng(42.30,12.80);

    var catOptions = {
    getTileUrl: function(coord, zoom) {
    return "https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX="+bbox(coord.x,coord.y,zoom)+"&CRS=EPSG:6706&WIDTH=256&HEIGHT=256&LAYERS=province,CP.CadastralZoning,acque,CP.CadastralParcel,fabbricati,codice_plla,simbolo_graffa&STYLES=default&FORMAT=image/png&DPI=96&MAP_RESOLUTION=96&FORMAT_OPTIONS=dpi:96&TRANSPARENT=TRUE"
    },
    tileSize: new google.maps.Size(256, 256),
    name: "Catasto",
    opacity: 0.7
    };
    var catMapType = new google.maps.ImageMapType(catOptions);

    function initialize () {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: centro_italia,

    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: false,
    zoomControl: true
    });
    map.overlayMapTypes.insertAt(0, catMapType);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    function bbox(x,y,z) {
    bl_lng=tile2long(x,z);
    tr_lng=tile2long((x+1),z);
    bl_lat=tile2lat(y+1,z);
    tr_lat=tile2lat((y),z);
    bl=proj4("WGS84","EPSG:6706",[bl_lng,bl_lat]);
    tr=proj4("WGS84","EPSG:6706",[tr_lng,tr_lat]);
    return bl[1]+","+bl[0]+","+tr[1]+","+tr[0];
    }
    function tile2long(x,z) {
    return (x/Math.pow(2,z)*360-180);
    }
    function tile2lat(y,z) {
    var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
    return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
    }
    </script>
    </head>
    <body>
    <div id="map"></div>
    </body>
    </html>
    Al codice della mia pagina vorrei aggiungere nello sfondo in trasparenza la mappa WMS del Catasto offerta dall'Agenzia delle Entrate.
  2. 25-09-2022, 20.42.43 #2
    L'avatar di alemoppo
    alemoppo
    alemoppo non è connesso Staff AV
    Invia un messaggio via MSN a alemoppo
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,708

    Predefinito

    Hai controllato se dalla console del browser (solitamente F12), appare qualche errore?

    Ciao!
  3. 25-09-2022, 23.43.49 #3
    fiduciali
    fiduciali non è connesso Neofita
    Data registrazione
    05-07-2017
    Messaggi
    23

    Predefinito

    Buonasera, grazie per la risposta.

    Smanettando dalla console sono riuscito a togliere la pagina completamente bianca e far mostrare la mappa di google con i punti, la mappa catastale wms ancora non compare e dalla console questo:
    https://fiduciali.altervista.org/errore.png


    Mentre così è come ho adattato io il codice (non ho molta conoscenza e sicuramente avrò fatto errori).

    Codice PHP:

    .......

    <script>

    [B]
    function bbox(x,y,z) {
    bl_lng=tile2long(x,z);
    tr_lng=tile2long((x+1),z);
    bl_lat=tile2lat(y+1,z);
    tr_lat=tile2lat((y),z);
    bl=proj4("WGS84","EPSG:6706",[bl_lng,bl_lat]);
    tr=proj4("WGS84","EPSG:6706",[tr_lng,tr_lat]);
    return bl[1]+","+bl[0]+","+tr[1]+","+tr[0];
    }
    function tile2long(x,z) {
    return (x/Math.pow(2,z)*360-180);
    }
    function tile2lat(y,z) {
    var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
    return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
    }

    var catOptions = {
    getTileUrl: function(coord, zoom) {
    return "https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX="+bbox(coord.x,coord.y,zoom)+"&CRS=EPSG:6706&WIDTH=256&HEIGHT=256&LAYERS=province,CP.CadastralZoning,acque,CP.CadastralParcel,fabbricati,codice_plla,simbolo_graffa&STYLES=default&FORMAT=image/png&DPI=96&MAP_RESOLUTION=96&FORMAT_OPTIONS=dpi:96&TRANSPARENT=TRUE"
    },
    tileSize: new google.maps.Size(256, 256),
    name: "Catasto",
    opacity: 0.7
    };
    var catMapType = new google.maps.ImageMapType(catOptions);
    [/B]

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    center: new google.maps.LatLng(<?php echo $latitudine; ?>, <?php echo $longitudine; ?>),
    zoom: 15
    });

    [B]
    map.overlayMapTypes.insertAt(0, catMapType);
    [/B]

    var infoWindow = new google.maps.InfoWindow;

    ........

    var pathCoords_red = [

    ........

    {lat:<?php echo $latitudine_1; ?>, lng:<?php echo $longitudine_1; ?>},
    {lat:<?php echo $latitudine_2; ?>, lng:<?php echo $longitudine_2; ?>},

    ........

    ];

    var path_red = new google.maps.Polyline({
    path: pathCoords_red,
    geodesic: true,
    strokeColor: 'red',
    strokeOpacity: 1.0,
    strokeWeight: 2
    });
    path_red.setMap(map);

    ........

    // Change this depending on the name of your PHP or XML file
    downloadUrl('ge_lista_punti.php', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {
    var id = markerElem.getAttribute('id');
    var name = markerElem.getAttribute('name');
    var type = markerElem.getAttribute('type');
    var x = markerElem.getAttribute('x');
    var y = markerElem.getAttribute('y');
    var z = markerElem.getAttribute('z');
    var latit = markerElem.getAttribute('lat');
    var long = markerElem.getAttribute('lng');
    var quota = markerElem.getAttribute('quota');
    var point = new google.maps.LatLng(
    parseFloat(markerElem.getAttribute('lat')),
    parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);


    var text = document.createElement('text');
    text.textContent = 'X: ' + x;
    infowincontent.appendChild(document.createElement('hr'));
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = 'Y: ' + y;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = 'Z: ' + z;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('hr'));

    var text = document.createElement('text');
    var latit = Math.round(latit*Math.pow(10,5))/Math.pow(10,5);
    text.textContent = 'Lat: ' + latit;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));
    var text = document.createElement('text');
    var long = Math.round(long*Math.pow(10,5))/Math.pow(10,5);
    text.textContent = 'Long: ' + long;
    infowincontent.appendChild(text);
    infowincontent.appendChild(document.createElement('br'));
    var text = document.createElement('text');
    text.textContent = 'Quota: ' + quota;
    infowincontent.appendChild(text);

    var customLabel = {
    PF: {
    //label: 'PF'
    },
    P: {
    //label: name
    }
    };

    //var icon = customLabel[type] || {};


    var mioLogo = new google.maps.MarkerImage('/img/green-dot.png',
    new google.maps.Size(32,32),
    new google.maps.Point(0,0)
    );

    var marker = new google.maps.Marker({
    map: map,
    position: point,
    //label: icon.label,

    icon: mioLogo

    });
    marker.addListener('click', function() {
    infoWindow.setContent(infowincontent);
    infoWindow.open(map, marker);
    });
    });
    });
    }


    function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

    request.onreadystatechange = function() {
    if (request.readyState == 4) {
    request.onreadystatechange = doNothing;
    callback(request, request.status);
    }
    };


    request.open('GET', url, true);
    request.send(null);
    }

    function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>

    ........
  4. 26-09-2022, 00.12.17 #4
    GraphOGLRisorse
    GraphOGLRisorse è connesso ora AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,258

    Predefinito

    Salve,
    l'immagine riportata non è visible. Dal comportamento mi sembra che lei abbia l'antifurto banda attivo. In tal caso, crei nella root una cartella con nome _altervista_ht, se non è già presente, e sposti in essa l'immagine che vuole mostrare. In alternativa, può usare un servizio esterno gratuito.

    Cordiali sauti.
  5. 26-09-2022, 14.22.01 #5
    fiduciali
    fiduciali non è connesso Neofita
    Data registrazione
    05-07-2017
    Messaggi
    23

    Predefinito

    http://fiduciali.altervista.org/_alt..._ht/errore.png

    Provi ora, nemmeno a me cliccando il link la fà vedere, però copiando è incollando il link nella ricerca si.
  6. 26-09-2022, 16.47.31 #6
    GraphOGLRisorse
    GraphOGLRisorse è connesso ora AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,258

    Predefinito

    Nel secondo link la vedo l'immagine senza problemi.

    Dall'immagine risulta che il problema sia l'utilizzo dell'API senza una chiave (API key). Non ho idea ora se in passato si poteva usare la mappa anche senza l'API key, ma attualmente esistono delle restrizioni che generalmente non consentono l'uso incorporato senza la chiave, come riportato nella documentazione sulle API di Google Map.

    Nel codice non mi pare che risulti l'uso di una chaiave.

    Cordiali saluti.
  7. 26-09-2022, 16.56.54 #7
    frasidipace
    frasidipace non è connesso AlterGuru 2500
    Data registrazione
    07-05-2010
    Messaggi
    2,633

    Predefinito

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Nel secondo link la vedo l'immagine senza problemi.

    Non ho idea ora se in passato si poteva usare la mappa anche senza l'API key, ma attualmente esistono delle restrizioni che generalmente non consentono l'uso incorporato senza la chiave, come riportato nella documentazione sulle API di Google Map.
    Salve,
    sì, in passato era possibile utilizzare le mappe di Google senza chiave API. Da qualche anno occorre acquistare la chiave API con un credito di 200 dollari mensili, come indicato qui.
    L'alternativa può essere Open Stream Maps che offre mappe gratuite.

    Saluti
  8. 26-09-2022, 20.32.46 #8
    fiduciali
    fiduciali non è connesso Neofita
    Data registrazione
    05-07-2017
    Messaggi
    23

    Predefinito

    Si, non ho API Key ed è vero che la visualizzazione è limitata (l'immagine è più scura e compare la scritta che ricorda di pagare).
    Però entrambi i codici singolarmente funzionano (senza API).
    Con molta probabilità sono io che li innesto in modo sbagliato, ma non riesco a capire cosa non và.
« Discussione precedente | Prossima discussione »

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •  

Regole del forum