znseaman/jsbin.egazEqu.html

## jsbin.egazEqu.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>Interactivity Outside of Map</title>

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />

  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100px;
}

#PORvivINTE {
    position: absolute;
    right: 0px;
    width: 100px;
    top: 0px;
    bottom: 0px;
    font-size: 40px;
    z-index: 99;
    color: #fff;
    padding: 10px;
    background: #000;
}


.popup {
    text-align: center;
}
.popup .slideshow {
    width: 100%;
}
.popup .slideshow .image {
    display: none;
}
.popup .slideshow .active {
    display: block;
}
.popup .slideshow img {
    width: 100%;
}
.popup .slideshow .caption {
    background: #eee;
    padding: 8px;
}
.popup .cycle {
    height: 30px;
    margin-top: 5px;
    padding-top: 5px;
}
.popup .cycle a.prev {
    float: left;
}
.popup .cycle a.next {
    float: right;
}

</style>
<div id='map'></div>
<div id='PORvivINTE'></div>
<script>
var map = L.mapbox.map('map', 'burgessseb.map-sv5gtezl', {gridControl: false}).setView([16.8689,-99.8652],13);

map.addControl(L.mapbox.geocoderControl())
map.addControl(L.mapbox.shareControl())

map.gridLayer
    .on('mousemove',function(o) {
        document.getElementById('PORvivINTE').innerHTML = (o.data && o.data.PORvivINTE) || '';
    }).on('mouseout', function(o) {
        document.getElementById('PORvivINTE').innerHTML = '';
    });

 overlayPane = {
  "Acapulco" : L.mapbox.tileLayer('burgessseb.map-sv5gtezl'),
  "Tamaulipas" : L.mapbox.tileLayer('znseaman.tamauli'),
  "Grey Map" : L.mapbox.tileLayer('examples.map-20v6611k')
};

// Add a layer control element to the map
layerControl = L.control.layers(overlayPane, null, {position: 'topleft'});
layerControl.addTo(map);


  //GeoJSON Interactivity Tests
var geoJson = [{
    type: 'Feature',
    "geometry": { "type": "Point", "coordinates": [-99.894978,16.866384]},
    "properties": {
        'title': 'Washington, D.C.',

        // Store the image url and caption in an array
        'images': [
          ['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
          ['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
          ['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
        ]
    }
}, {
    type: 'Feature',
    "geometry": { "type": "Point", "coordinates": [-99.834706,16.90181]},
    "properties": {
        'title': 'New York City',
        'images': [
          ['https://i.imgur.com/exemdwr.png','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
          ['https://i.imgur.com/LHNDBpf.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
          ['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
        ]

    }
}];

  // Add custom popup html to each marker
map.markerLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;
    var images = feature.properties.images
    var slideshowContent = '';

    for(var i = 0; i < images.length; i++) {
        var img = images[i];

        slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
                              '<img src="' + img[0] + '" />' +
                              '<div class="caption">' + img[1] + '</div>' +
                            '</div>';
    }

    // Create custom popup content
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<h2>' + feature.properties.title + '</h2>' +
                            '<div class="slideshow">' +
                                slideshowContent +
                            '</div>' +
                            '<div class="cycle">' +
                                '<a href="#" class="prev" onclick="return moveSlide(\'prev\')">&laquo; Previous</a>' +
                                '<a href="#" class="next" onclick="return moveSlide(\'next\')">Next &raquo;</a>' +
                            '</div>'
                        '</div>';

    // http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });
});

map.markerLayer.setGeoJSON(geoJson);

// jQuery part

function moveSlide(direction) {
    var $slideshow = $('.slideshow'),
        totalSlides = $slideshow.children().length;

    if (direction === 'prev') {
        var $newSlide = $slideshow.find('.active').prev();
        if ($newSlide.index() < 0) {
            $newSlide = $('.image').last();
        }
    } else {
        var $newSlide = $slideshow.find('.active').next();
        if ($newSlide.index() < 0) {
            $newSlide = $('.image').first();
        }
    }

    $slideshow.find('.active').removeClass('active').hide();
    $newSlide.addClass('active').show();
    return false;
}
               /*
var markerLayer = L.mapbox.markerLayer()
 .loadURL('https://gist.github.com/znseaman/f6474257bce7526f47dd#file-map-geojson')
    .addTo(map);

map.markerLayer.on('mouseover', function(e) {
    e.layer.openPopup();
});
map.markerLayer.on('mouseout', function(e) {
    e.layer.closePopup();
});
  */
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<meta charset=utf-8 />
	<title>Interactivity Outside of Map</title>

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />

	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 100px;
	}

	#PORvivINTE {
	position: absolute;
	right: 0px;
	width: 100px;
	top: 0px;
	bottom: 0px;
	font-size: 40px;
	z-index: 99;
	color: #fff;
	padding: 10px;
	background: #000;
	}


	.popup {
	text-align: center;
	}
	.popup .slideshow {
	width: 100%;
	}
	.popup .slideshow .image {
	display: none;
	}
	.popup .slideshow .active {
	display: block;
	}
	.popup .slideshow img {
	width: 100%;
	}
	.popup .slideshow .caption {
	background: #eee;
	padding: 8px;
	}
	.popup .cycle {
	height: 30px;
	margin-top: 5px;
	padding-top: 5px;
	}
	.popup .cycle a.prev {
	float: left;
	}
	.popup .cycle a.next {
	float: right;
	}

	</style>
	<div id='map'></div>
	<div id='PORvivINTE'></div>
	<script>
	var map = L.mapbox.map('map', 'burgessseb.map-sv5gtezl', {gridControl: false}).setView([16.8689,-99.8652],13);

	map.addControl(L.mapbox.geocoderControl())
	map.addControl(L.mapbox.shareControl())

	map.gridLayer
	.on('mousemove',function(o) {
	document.getElementById('PORvivINTE').innerHTML = (o.data && o.data.PORvivINTE) \|\| '';
	}).on('mouseout', function(o) {
	document.getElementById('PORvivINTE').innerHTML = '';
	});

	overlayPane = {
	"Acapulco" : L.mapbox.tileLayer('burgessseb.map-sv5gtezl'),
	"Tamaulipas" : L.mapbox.tileLayer('znseaman.tamauli'),
	"Grey Map" : L.mapbox.tileLayer('examples.map-20v6611k')
	};

	// Add a layer control element to the map
	layerControl = L.control.layers(overlayPane, null, {position: 'topleft'});
	layerControl.addTo(map);


	//GeoJSON Interactivity Tests
	var geoJson = [{
	type: 'Feature',
	"geometry": { "type": "Point", "coordinates": [-99.894978,16.866384]},
	"properties": {
	'title': 'Washington, D.C.',

	// Store the image url and caption in an array
	'images': [
	['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
	['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
	['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
	]
	}
	}, {
	type: 'Feature',
	"geometry": { "type": "Point", "coordinates": [-99.834706,16.90181]},
	"properties": {
	'title': 'New York City',
	'images': [
	['https://i.imgur.com/exemdwr.png','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
	['https://i.imgur.com/LHNDBpf.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
	['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
	]

	}
	}];

	// Add custom popup html to each marker
	map.markerLayer.on('layeradd', function(e) {
	var marker = e.layer;
	var feature = marker.feature;
	var images = feature.properties.images
	var slideshowContent = '';

	for(var i = 0; i < images.length; i++) {
	var img = images[i];

	slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
	'<img src="' + img[0] + '" />' +
	'<div class="caption">' + img[1] + '</div>' +
	'</div>';
	}

	// Create custom popup content
	var popupContent = '<div id="' + feature.properties.id + '" class="popup">' +
	'<h2>' + feature.properties.title + '</h2>' +
	'<div class="slideshow">' +
	slideshowContent +
	'</div>' +
	'<div class="cycle">' +
	'<a href="#" class="prev" onclick="return moveSlide(\'prev\')">« Previous</a>' +
	'<a href="#" class="next" onclick="return moveSlide(\'next\')">Next »</a>' +
	'</div>'
	'</div>';

	// http://leafletjs.com/reference.html#popup
	marker.bindPopup(popupContent,{
	closeButton: false,
	minWidth: 320
	});
	});

	map.markerLayer.setGeoJSON(geoJson);

	// jQuery part

	function moveSlide(direction) {
	var $slideshow = $('.slideshow'),
	totalSlides = $slideshow.children().length;

	if (direction === 'prev') {
	var $newSlide = $slideshow.find('.active').prev();
	if ($newSlide.index() < 0) {
	$newSlide = $('.image').last();
	}
	} else {
	var $newSlide = $slideshow.find('.active').next();
	if ($newSlide.index() < 0) {
	$newSlide = $('.image').first();
	}
	}

	$slideshow.find('.active').removeClass('active').hide();
	$newSlide.addClass('active').show();
	return false;
	}
	/*
	var markerLayer = L.mapbox.markerLayer()
	.loadURL('https://gist.github.com/znseaman/f6474257bce7526f47dd#file-map-geojson')
	.addTo(map);

	map.markerLayer.on('mouseover', function(e) {
	e.layer.openPopup();
	});
	map.markerLayer.on('mouseout', function(e) {
	e.layer.closePopup();
	});
	*/
	</script>
	</body>
	</html>