Create a gist now

Instantly share code, notes, and snippets.

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://ruebot.net/files/JeSuisCharlie-cat-20150115-tweets-deduped.geojson" type="text/javascript"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/jasondavies/d3-cloud/master/d3.layout.cloud.js"></script>
<div id="map" style="width: 720px; height: 450px;border: 1px solid #ccc;"></div>
<style type="text/css">
.leaflet-popup-content-wrapper .leaflet-popup-content {
width:250px !important;
}
</style>
<script type="text/javascript">
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var map = L.map('map').addLayer(tiles);
var markers = L.markerClusterGroup();
var geoJsonLayer = L.geoJson(JeSuisCharlie20150115, {
onEachFeature: function (feature, layer) {
layer.bindPopup('<img src="'+ feature.properties.profile_image_url +'" /><p><b>@'+ feature.properties.screen_name +'</b></p><p><a href="'+ feature.properties.url +'" target="_blank">'+ feature.properties.text +'</a></p>');
}
});
markers.addLayer(geoJsonLayer);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment