streamhub-map is a StreamHub App that displays social content on a geographical map.
The quickest way to use streamhub-map is to use the built version hosted on Livefyre's CDN.
streamhub-map depends on streamhub-sdk. Ensure it's been included in your page.
<script src="http://cdn.livefyre.com/libs/sdk/v2.7.0/streamhub-sdk.min.js"></script>
Include streamhub-map too.
<script src="http://cdn.livefyre.com/libs/apps/cheung31/streamhub-map/v1.2.0-build.46/streamhub-map.min.js"></script>
Optionally, include some reasonable default CSS rules for StreamHub Content. This stylesheet is provided by the StreamHub SDK.
<link rel="stylesheet" href="http://cdn.livefyre.com/libs/sdk/v2.7.0/streamhub-sdk.min.css" />
-
Require streamhub-sdk and ContentMapView
var ContentMapView = Livefyre.require('streamhub-map');
-
Create a
Collection
.var collection = new Collection({ "network": "livefyre.com", "siteId": "290596", "articleId": "172", "environment": "qa-ext.livefyre.com" });
-
Create a
ContentMapView
, passing the DOMElement to render it in (el
option).var view = new ContentMapView({ el: document.getElementById("myMap") });
-
Pipe the collection's content into the
ContentMapView
collection.pipe(view);
The default center point, zoom level, and appearance of map tiles can be
configured with the leafletMapOptions
option.
To set the default center point of the map, specify the lat/lon coordinate in the leafletMapOptions
:
var view = new ContentMapView({
el: document.getElementById("myMap"),
leafletMapOptions: {
center: [37.774929499038386, -122.41941549873445]
}
});
To set the default zoom level of the map, specify the zoom level in the leafletMapOptions
:
var view = new ContentMapView({
el: document.getElementById("myMap"),
leafletMapOptions: {
zoom: 4
}
});
Out of the box, the map tiles are powered by Mapbox. To change the appearance of map tiles, specify mapboxTileOptions
option:
var view = new ContentMapView({
el: document.getElementById("myMap"),
mapboxTileOptions: {
mapId: 'myuser.map-0l53fhk2',
format: 'jpg70'
}
});
To use a custom map tiles, get a Mapbox map ID create a Mapbox account.
Instead of using a built version of streamhub-map from Livefyre's CDN, you may wish to fork, develop on the repo locally, or include it in your existing JavaScript application.
Clone this repo
git clone https://github.com/cheung31/streamhub-map
Development dependencies are managed by npm, which you should install first.
With npm installed, install streamhub-map's dependencies. This will also download Bower and use it to install browser dependencies.
cd streamhub-map
npm install
This repository's package.json includes a helpful script to launch a web server for development
npm start
You can now visit http://localhost:8080/ to see an example feed loaded via RequireJS.
To see Jasmine tests:
npm start
and navigate to: http://localhost:8080/tests.
Livefyre StreamHub is used by the world's biggest brands and publishers to power their online Content Communities. StreamHub turns your site into a real-time social experience. Curate images, videos, and Tweets from across the social web, right into live blogs, chats, widgets, and dashboards. Want StreamHub? Contact Livefyre.