Mapa

Faça o mapeamento do conteúdo do usuário para um mapa interativo.

O mapa permite que você faça stream de conteúdo com tags geográficas em um mapa do mundo, permitindo que você localize o burburinho social em torno de notícias novas ou de um evento ao vivo. Todo o conteúdo aplicável será exibido, incluindo texto, comentários, fotos e tweets.

Integração

A maneira mais rápida de usar o Mapa é usar a versão criada hospedada no CDN da Livefyre.

Primeiro, adicione Livefyre.js à sua página.

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

Em seguida, posicione o elemento no qual o aplicativo de mapa será exibido.

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

Por fim, use Livefyre.require para construir o Mapa e obter uma coleção para encurtar a partir do stream-sdk. Lembre-se de que o Mapa pode mostrar somente o Conteúdo com metadados com tags. O twitter e o Instagram Preparate oferecem suporte a esse recurso. Para garantir melhor desempenho, inclua um filtro de geolocalização em todas as Regras de preparação para a coleção.

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

Confira este live example.

Configuração

initial

O número inicial de itens a serem carregados da Coleção e exibidos no mapa. Após o carregamento desse número, os usuários podem clicar em um botão para mostrar mais. (Opcional. O padrão é 50.)

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

leafletMapOptions

Opções a serem passadas para o mapa subjacente Folheto, que o Mapa usa para renderização. Use esta opção para definir Opções de mapa de folheto, incluindo o ponto central inicial do mapa, e os níveis inicial e máximo de zoom. (Opcional.)

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

Recursos de Business.Adobe.com