jhpoelen/completeNerd.html

## completeNerd.html
<html>
<head>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css"/>
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
    <script src="https://rawgit.com/jhpoelen/eol-globi-data-js/master/globi-data-dist.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #cartodb-map {
            width: 100%;
            height: 100%;
            background: black;
        }

        .info legend {
            width: 100%;
            height: 100%;
            background: black;
        }

        .leaflet-popup-content {
            width: auto !important;
        }
    </style>

    <script>
        var map;
        function init() {
            // initiate leaflet map
            map = new L.Map('cartodb-map', {
                center: [37.717, -122.42],
                zoom: 15
            });

            L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
                attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
            }).addTo(map);

            var cartodbConfig = 'http://danrademacher.cartodb.com/api/v2/viz/f82a863a-04f3-11e6-a73c-0e787de82d45/viz.json';

            function placeInteractionMarkers() {
                var searchOpts = {bbox: '-122.43375851635744,37.710986150852946,-122.41092677197264,37.72463234180247',
                    includeObservations: true, fields: ['study_url', 'latitude', 'longitude'] };
                globiData.findSpeciesInteractions(searchOpts, function (interactions) {
                    interactions.forEach(function (interaction) {
                        var interact = L.circle([interaction.latitude, interaction.longitude], 25, {
                            color: 'green',
                            fillColor: '#00FF99',
                            fillOpacity: 0.6}).addTo(map);

                        if (interaction.study_url.match(/inaturalist/)) {
                            interact.bindPopup('<a href="' + interaction.study_url + '" target="_blank">interaction</a>');
                            globiData.get(interaction.study_url + '.json', function (resp) {
                                var photos = resp.observation_photos;
                                var content = 'show interaction';
                                if (photos && photos.length > 0) {
                                    content = '<img src="' + photos[0].photo.thumb_url + '"></img>';
                                }
                                interact.bindPopup('<a href="' + interaction.study_url + '" target="_blank">' + content + '</a>');
                            });
                        }
                    });
                });
            }

            function appendToLegend() {
                var legendItems = document.querySelector('.cartodb-legend > ul');
                var item = document.createElement('li');
                item.innerHTML = '<div class="bullet" style="background:#00FF99"></div>' +
                        '<a target="_blank" title="all interactions" href="http://www.globalbioticinteractions.org/browse/#interactionType=interactsWith&resultType=json&bbox=-122.43375851635744%2C37.710986150852946%2C-122.41092677197264%2C37.72463234180247">species interactions</a>';
                legendItems.appendChild(item);
            }

            cartodb.createLayer(map, cartodbConfig)
                    .addTo(map)
                    .done(function () {
                        appendToLegend();
                        placeInteractionMarkers();
                    });


        }
        window.addEventListener('load', function () {
            init();
        });
    </script>
</head>

<body>
<div id='cartodb-map'></div>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css"/>
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<script src="https://rawgit.com/jhpoelen/eol-globi-data-js/master/globi-data-dist.js"></script>
	<style>
	html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#cartodb-map {
	width: 100%;
	height: 100%;
	background: black;
	}

	.info legend {
	width: 100%;
	height: 100%;
	background: black;
	}

	.leaflet-popup-content {
	width: auto !important;
	}
	</style>

	<script>
	var map;
	function init() {
	// initiate leaflet map
	map = new L.Map('cartodb-map', {
	center: [37.717, -122.42],
	zoom: 15
	});

	L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
	attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
	}).addTo(map);

	var cartodbConfig = 'http://danrademacher.cartodb.com/api/v2/viz/f82a863a-04f3-11e6-a73c-0e787de82d45/viz.json';

	function placeInteractionMarkers() {
	var searchOpts = {bbox: '-122.43375851635744,37.710986150852946,-122.41092677197264,37.72463234180247',
	includeObservations: true, fields: ['study_url', 'latitude', 'longitude'] };
	globiData.findSpeciesInteractions(searchOpts, function (interactions) {
	interactions.forEach(function (interaction) {
	var interact = L.circle([interaction.latitude, interaction.longitude], 25, {
	color: 'green',
	fillColor: '#00FF99',
	fillOpacity: 0.6}).addTo(map);

	if (interaction.study_url.match(/inaturalist/)) {
	interact.bindPopup('<a href="' + interaction.study_url + '" target="_blank">interaction</a>');
	globiData.get(interaction.study_url + '.json', function (resp) {
	var photos = resp.observation_photos;
	var content = 'show interaction';
	if (photos && photos.length > 0) {
	content = '<img src="' + photos[0].photo.thumb_url + '"></img>';
	}
	interact.bindPopup('<a href="' + interaction.study_url + '" target="_blank">' + content + '</a>');
	});
	}
	});
	});
	}

	function appendToLegend() {
	var legendItems = document.querySelector('.cartodb-legend > ul');
	var item = document.createElement('li');
	item.innerHTML = '<div class="bullet" style="background:#00FF99"></div>' +
	'<a target="_blank" title="all interactions" href="http://www.globalbioticinteractions.org/browse/#interactionType=interactsWith&resultType=json&bbox=-122.43375851635744%2C37.710986150852946%2C-122.41092677197264%2C37.72463234180247">species interactions</a>';
	legendItems.appendChild(item);
	}

	cartodb.createLayer(map, cartodbConfig)
	.addTo(map)
	.done(function () {
	appendToLegend();
	placeInteractionMarkers();
	});


	}
	window.addEventListener('load', function () {
	init();
	});
	</script>
	</head>

	<body>
	<div id='cartodb-map'></div>
	</body>
	</html>