mapbox.js vs ajax JSON

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

mapbox.js vs ajax JSON

akstern
Salve vorrei implementare una mappa in cui i punti di interesse venissero richiamati tramite una chiamata ajax in formato json.
Ho cercato di modificare il codice all' indirizzo
https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/

Cercando di popolare la viabile geoJson  con l achiamata
getJSON ma anche se il debug mi fa vedere di avere caricato i valori
alla fine non viene visualizzato nulla .


   $(".poi_a").bind("click", (function (e) {
       
   var indirizzo = $(this).attr("href");
   var geoJson = [];
   $.ajaxSetup({ cache: false });

   $.getJSON('poi.php?callback=?', function(data){
 

            /* loop through array */
           // alert(data);
        }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
            /* alert(jqXHR.responseText) */
           alert("error occurred!");
        })
        .done(function() {
alert( "second success" );
  //geoJson = data;


 
   map.markerLayer.setGeoJSON(geoJson);

    // Cycle through markers once geoJson is ready.
    // Add custom popups to each using our custom feature properties
    map.markerLayer.eachLayer(function(marker) {

        var feature = marker.feature;

        // Create custom popup content
        var popupContent =  '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
                                '<img src="' + feature.properties.image + '">' +
                            '  

' + feature.properties.city + '

' +
                            '';

        // http://leafletjs.com/reference.html#popup
        marker.bindPopup(popupContent,{
            closeButton: false,
            minWidth: 300
        });
    });

    map.setView([45.908, -78.525], 5);
  })
  .fail(function() {
   alert( "error" );
  })
  .always(function() {
    //alert( "complete" );
   
   
   
  })
        ;

return false;


}));

});

la callback ajax è questa
jQuery19101373158977366984_1383292934356(
{
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
        "properties": {
            "image": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/DCmontage4.jpg/250px-DCmontage4.jpg",
            "url": "http://en.wikipedia.org/wiki/Washington,_D.C.",
            "marker-symbol": "star",
            "city": "Washington, D.C."
        }
    }, {
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
        "properties": {
            "image": "http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Chicago_montage.jpg/300px-Chicago_montage.jpg",
            "url": "http://en.wikipedia.org/wiki/Chicago",
            "city": "Chicago"
        }
    }, {
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
        "properties": {
            "image": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/NYC_Montage_2011.jpg/275px-NYC_Montage_2011.jpg",
            "url": "http://en.wikipedia.org/wiki/New_York_City",
            "city": "New York City"
        }
    })

qualcuno mi può dare una mano ?
Grazie
Reply | Threaded
Open this post in threaded view
|

Re: mapbox.js vs ajax JSON

sabas88
Ciao,
per queste domande abbiamo creato la lista degli sviluppatori

Ad occhio sembra che usi jsonp..

Io ho fatto direttamente con Leaflet (Mapbox.js è un plugin di Leaflet adesso..) ed una piccola funzione per fare la chiamata ajax, trovi il codice qua

Ciao,
Stefano


2013/11/1 akstern <[hidden email]>
Salve vorrei implementare una mappa in cui i punti di interesse venissero
richiamati tramite una chiamata ajax in formato json.
Ho cercato di modificare il codice all' indirizzo
https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/

Cercando di popolare la viabile geoJson  con l achiamata
getJSON ma anche se il debug mi fa vedere di avere caricato i valori
alla fine non viene visualizzato nulla .


   $(".poi_a").bind("click", (function (e) {

   var indirizzo = $(this).attr("href");
   var geoJson = [];
   $.ajaxSetup({ cache: false });

   $.getJSON('poi.php?callback=?', function(data){


            /* loop through array */
           // alert(data);
        }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler
*/
            /* alert(jqXHR.responseText) */
           alert("error occurred!");
        })
        .done(function() {
alert( "second success" );
  //geoJson = data;



   map.markerLayer.setGeoJSON(geoJson);

    // Cycle through markers once geoJson is ready.
    // Add custom popups to each using our custom feature properties
    map.markerLayer.eachLayer(function(marker) {

        var feature = marker.feature;

        // Create custom popup content
        var popupContent =  ' ' +
                                ' <' + feature.properties.url + '>  <' +
feature.properties.image + '> ' +
                            '
' + feature.properties.city + '
' +
                            ' ';

        // http://leafletjs.com/reference.html#popup
        marker.bindPopup(popupContent,{
            closeButton: false,
            minWidth: 300
        });
    });

    map.setView([45.908, -78.525], 5);
  })
  .fail(function() {
   alert( "error" );
  })
  .always(function() {
    //alert( "complete" );



  })
        ;

return false;


}));

});

la callback ajax è questa
jQuery19101373158977366984_1383292934356(
{
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
        "properties": {
            "image":
"http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/DCmontage4.jpg/250px-DCmontage4.jpg",
            "url": "http://en.wikipedia.org/wiki/Washington,_D.C.",
            "marker-symbol": "star",
            "city": "Washington, D.C."
        }
    }, {
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
        "properties": {
            "image":
"http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Chicago_montage.jpg/300px-Chicago_montage.jpg",
            "url": "http://en.wikipedia.org/wiki/Chicago",
            "city": "Chicago"
        }
    }, {
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
        "properties": {
            "image":
"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/NYC_Montage_2011.jpg/275px-NYC_Montage_2011.jpg",
            "url": "http://en.wikipedia.org/wiki/New_York_City",
            "city": "New York City"
        }
    })

qualcuno mi può dare una mano ?
Grazie




--
View this message in context: http://gis.19327.n5.nabble.com/mapbox-js-vs-ajax-JSON-tp5783576.html
Sent from the Italy General mailing list archive at Nabble.com.

_______________________________________________
Talk-it mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-it


_______________________________________________
Talk-it mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-it
Reply | Threaded
Open this post in threaded view
|

Re: mapbox.js vs ajax JSON

akstern
Grazie stasera ci do un occhio

"sabas88 [via GIS]" <[hidden email]> ha scritto:

Ciao,
per queste domande abbiamo creato la lista degli sviluppatori

Ad occhio sembra che usi jsonp..

Io ho fatto direttamente con Leaflet (Mapbox.js è un plugin di Leaflet adesso..) ed una piccola funzione per fare la chiamata ajax, trovi il codice qua

Ciao,
Stefano


2013/11/1 akstern <[hidden email]>
Salve vorrei implementare una mappa in cui i punti di interesse venissero
richiamati tramite una chiamata ajax in formato json.
Ho cercato di modificare il codice all' indirizzo
https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/

Cercando di popolare la viabile geoJson  con l achiamata
getJSON ma anche se il debug mi fa vedere di avere caricato i valori
alla fine non viene visualizzato nulla .


   $(".poi_a").bind("click", (function (e) {

   var indirizzo = $(this).attr("href");
   var geoJson = [];
   $.ajaxSetup({ cache: false });

   $.getJSON('poi.php?callback=?', function(data){


            /* loop through array */
           // alert(data);
        }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler
*/
            /* alert(jqXHR.responseText) */
           alert("error occurred!");
        })
        .done(function() {
alert( "second success" );
  //geoJson = data;



   map.markerLayer.setGeoJSON(geoJson);

    // Cycle through markers once geoJson is ready.
    // Add custom popups to each using our custom feature properties
    map.markerLayer.eachLayer(function(marker) {

        var feature = marker.feature;

        // Create custom popup content
        var popupContent =  ' ' +
                                ' <' + feature.properties.url + '>  <' +
feature.properties.image + '> ' +
                            '
' + feature.properties.city + '
' +
                            ' ';

        // http://leafletjs.com/reference.html#popup
        marker.bindPopup(popupContent,{
            closeButton: false,
            minWidth: 300
        });
    });

    map.setView([45.908, -78.525], 5);
  })
  .fail(function() {
   alert( "error" );
  })
  .always(function() {
    //alert( "complete" );



  })
        ;

return false;


}));

});

la callback ajax è questa
jQuery19101373158977366984_1383292934356(
{
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
        "properties": {
            "image":
"http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/DCmontage4.jpg/250px-DCmontage4.jpg",
            "url": "http://en.wikipedia.org/wiki/Washington,_D.C.",
            "marker-symbol": "star",
            "city": "Washington, D.C."
        }
    }, {
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
        "properties": {
            "image":
"http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Chicago_montage.jpg/300px-Chicago_montage.jpg",
            "url": "http://en.wikipedia.org/wiki/Chicago",
            "city": "Chicago"
        }
    }, {
        type: "Feature",
        "geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
        "properties": {
            "image":
"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/NYC_Montage_2011.jpg/275px-NYC_Montage_2011.jpg",
            "url": "http://en.wikipedia.org/wiki/New_York_City",
            "city": "New York City"
        }
    })

qualcuno mi può dare una mano ?
Grazie




--
View this message in context: http://gis.19327.n5.nabble.com/mapbox-js-vs-ajax-JSON-tp5783576.html
Sent from the Italy General mailing list archive at Nabble.com.

_______________________________________________
Talk-it mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-it


_______________________________________________
Talk-it mailing list
[hidden email]
https://lists.openstreetmap.org/listinfo/talk-it



If you reply to this email, your message will be added to the discussion below:
http://gis.19327.n5.nabble.com/mapbox-js-vs-ajax-JSON-tp5783576p5783583.html
To unsubscribe from mapbox.js vs ajax JSON, click here.
NAML