Mappa

Tracciare il contenuto dell’utente in una mappa interattiva.

La mappa consente di inviare i contenuti con tag in una mappa del mondo, consentendoti di individuare il social buzz intorno a notizie aggiornate o a un evento live. Verranno visualizzati tutti i contenuti applicabili, compresi testo, commenti, foto e tweet.

NOTA

Le mappe sono alimentate da ©OpenStreetMap, che fornisce i dati utilizzati da Livefyre per il rendering delle sue mappe.

Integrazione

Il modo più rapido per utilizzare Map è utilizzare la versione incorporata ospitata sulla CDN di Livefyre.

Innanzitutto, aggiungi Livefyre.js alla pagina.

<script src="https://cdn.livefyre.com/Livefyre.js"></script> 

Quindi, posiziona l’elemento in cui apparirà l’app mappa.

<div id="map" style="height: 500px;"></div>

Infine, utilizza Livefyre.need per costruire la mappa, e ottenere una raccolta da tubo in da sdk-sdk. Tieni presente che la mappa può mostrare solo il contenuto con metadati geotagged. Questa funzione è supportata da twitter e Instagram Curate. Per garantire le migliori prestazioni, includi un filtro di geolocalizzazione su tutte le regole di cura per la raccolta.

<script> 
Livefyre.require(['streamhub-map#1', 'streamhub-sdk#2'], 
function (Map, SDK) { 
    var map = new Map({ 
        el: document.getElementById('map') 
    }); 
    var collection = new SDK.Collection({ 
        network: 'strategy-prod.fyre.co', 
        siteId: 340628, 
        articleId: 'custom-1389845009515' 
    }); 
    collection.pipe(map); 
}); 
</script>

Consulta questo esempio live.

Configurazione

initial

Il numero iniziale di elementi da caricare dalla raccolta e visualizzare sulla mappa. Una volta caricato questo numero, gli utenti possono fare clic su un pulsante per visualizzare di più. (Facoltativo. Il valore predefinito è 50.)

var map = new Map({ 
    el: document.getElementById('map'), 
    initial: 100 
});

leafletMapOptions

Opzioni da passare alla mappa sottostante Foglietto illustrativo, che la mappa utilizza per il rendering. Utilizzare questa opzione per impostare le opzioni mappa foglia, compreso il punto centrale iniziale della mappa e i livelli di zoom iniziali e massimi. (Facoltativo.)

var map = new Map({ 
    el: document.getElementById('map'), 
    leafletMapOptions: { 
        center: [37.774, -122.4], 
        zoom: 15 
    } 
});

In questa pagina