Carte

Traçage du contenu utilisateur sur un mappage interactif.

Map vous permet de diffuser du contenu avec des balises géolocalisées sur une carte du monde, ce qui vous permet de localiser le buzz social autour des dernières nouvelles ou d'un événement en direct. Tout le contenu applicable sera affiché, y compris le texte, les commentaires, les photos et les tweets.

REMARQUE

Les cartes sont alimentées par ©OpenStreetMap, qui fournit les données que Livefyre utilise pour effectuer le rendu de ses cartes.

Analytics

Le moyen le plus rapide d'utiliser Map est d'utiliser la version intégrée hébergée sur le CDN de Livefyre.

Tout d’abord, ajoutez Livefyre.js à votre page.

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

Positionnez ensuite l’élément dans lequel l’application de mappage apparaîtra.

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

Enfin, utilisez Livefyre.require pour construire la carte, et obtenir une collection à l'entrée à partir du hub-sdk. Gardez à l’esprit que Map ne peut afficher que du contenu avec des métadonnées géolocalisées. Twitter et Instagram Curate prennent en charge cette fonctionnalité. Pour optimiser les performances, incluez un filtre de géolocalisation sur toutes les règles de traitement de la collection.

<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>

Consultez cet exemple en direct.

Configuration

initial

Nombre initial d’éléments à charger à partir de la collection et à afficher sur la carte. Une fois ce nombre chargé, les utilisateurs peuvent cliquer sur un bouton pour en afficher davantage. (Facultatif. Par défaut, 50.)

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

leafletMapOptions

Options à transmettre au mappage brochure sous-jacent, que Map utilise pour le rendu. Utilisez cette option pour définir Options de zone cliquable du prospectus, y compris le point central initial de la zone cliquable, ainsi que les niveaux de zoom initial et maximal. (Facultatif.)

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

Sur cette page