Landkarte

Plotten Sie Benutzerinhalte zu einer interaktiven Map.

Mit der Karte können Sie geotaggte Inhalte auf eine Weltkarte übertragen, sodass Sie das Social Buzz rund um aktuelle Nachrichten oder ein Live-Ereignis finden können. Alle relevanten Inhalte werden angezeigt, einschließlich Text, Kommentaren, Fotos und Tweets.

HINWEIS

Karten werden mit © OpenStreetMap betrieben, das die Daten bereitstellt, die Livefyre zum Rendern seiner Maps verwendet.

Integration

Die schnellste Möglichkeit, Map zu verwenden, ist die auf Livefyres CDN gehostete Version zu verwenden.

Fügen Sie zunächst Livefyre.js zu Ihrer Seite hinzu.

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

Positionieren Sie dann das Element, in dem die Map-App angezeigt wird.

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

Schließlich verwenden Sie Livefyre.require, um die Map zu erstellen und eine Sammlung zu entnehmen, die von streamub-sdk eingeleitet wird. Beachten Sie, dass Map nur Inhalte mit geotageten Metadaten anzeigen kann. Twitter und Instagram Curate unterstützen diese Funktion. Um eine optimale Leistung zu gewährleisten, fügen Sie in allen Kuratierungsregeln für die Sammlung einen Geolocation-Filter ein.

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

Sehen Sie sich dieses Live-Beispiel an.

Konfiguration

initial

Die anfängliche Anzahl der Elemente, die aus der Sammlung geladen und auf der Map angezeigt werden sollen. Nach dem Laden dieser Nummer können Benutzer auf eine Schaltfläche klicken, um weitere anzuzeigen. (Optional. Der Standardwert ist 50.)

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

leafletMapOptions

Optionen, die an die zugrunde liegende Gebrauchsinformation-Map weitergegeben werden, welche Map zum Rendern verwendet. Verwenden Sie diese Option, um Optionen für die Imagemap festzulegen, einschließlich des anfänglichen Zentrums der Map sowie der Anfangs- und Maximalzoomwerte. (Optional.)

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

Auf dieser Seite