Plot user content to an interactive map.

Map allows you to stream geotagged content onto a world map, allowing you to locate the social buzz around breaking news or a live event. All applicable content will be displayed, including text, comments, photos, and Tweets.


Maps are powered by ©OpenStreetMap, which provides the data Livefyre uses to render its Maps.


The quickest way to use Map is to use the built version hosted on Livefyre’s CDN.

First, add Livefyre.js to your page.

<script src=""></script>

Then, position the element in which the Map App will appear.

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

Finally, use Livefyre.require to construct the Map, and get a Collection to pipe in from streamhub-sdk. Keep in mind that Map can show only Content with geotagged metadata. Twitter and Instagram Curate support this feature. To ensure best performance, include a geolocation filter on all of your Curate Rules for the Collection.

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: '',
        siteId: 340628,
        articleId: 'custom-1389845009515'

Check out this live example.



The initial number of items to load from the Collection and display on the map. After this number are loaded, users may click a button to show more. (Optional. Defaults to 50.)

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


Options to pass to the underlying Leaflet map, which Map uses for rendering. Use this option to set Leaflet Map Options, including the initial centerpoint of the map, and initial and maximum zoom levels. (Optional.)

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

On this page