mapsmania · September 13, 2019 13:37
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>The Map of English Literature</title>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
 	<style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
 			a:link {  color: white;}
 			a:visited {  color: white;}
 			a:hover {  color: white;}
 			a:active {  color: white;}
        }
 		
 	
 	#text {
 position: absolute;
 font: 15px arial, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 width: 25%;
 overflow: auto;
 background: #fff;
 padding:8px;
 border-left: 5px solid #800B45;
 }
 #features {font-size: 18px; color:#800B45;}

 #bio {
 width:300px;
 }

 </style>

 	
 </head>
 <body>

 	<div id='map' ></div>
 	<div id='text'>
 	<h3>Map of English Literature</h3> 
 	<div id='features'> </div>
 	<div id='years'>This map shows the birthplaces of some of English Literature's greatest writers. On the map authors, poets and dramatists have been mapped to their place of birth (although there are a few exceptions where writers have been mapped to locations which they are more commonly associated with).
 	<br><br>
 	If you hover over a name on the map you can read more about the chosen writer. All this information comes from the writer's <a href="http://www.wikipedia.com">Wikipedia</a> entry.
 	<br><br>This map is not intended to be an exhaustive list of British writers. For each location there can only be one writer on the map. So, for example, only Malcolm Bradbury appears on the map for Sheffield (meaning other authors born in Sheffield, like Margaret Drabble, are left off the map).
 	<br><br>If you zoom in on the map other writers' names may appear. If you zoom out you may discover that a few of the luminaries of English Literature were actually born elsewhere in the world.
 	</div><br>
 	<div id='born'> </div><br>
 	<div id='bio'> </div><br>
 	<a href="http://www.googlemapsmania.blogspot.com"><font size="3">Maps Mania</font></a>
 	</div>
 	
 	
 	
 	
 <script>
 mapboxgl.accessToken = 'pk.eyJ1IjoiZ21hcHNtYW5pYSIsImEiOiJOYnlnSFpvIn0.5f62d0cnrWCA1KioxzXtqg';
 var map = new mapboxgl.Map({
 container: 'map',
 zoom: 5,
 center: [1.54902,54.307944],
 style: 'mapbox://styles/gmapsmania/cjyqc1cjy0pvj1cs81vmmw2yi'
 });
 var nav = new mapboxgl.NavigationControl();
 map.addControl(nav, 'top-left');

 //Hover over each point


 map.on('mousemove', function (e) {
 var text = map.queryRenderedFeatures(e.point,   { layers: ['authors'] });
 var title = text[0].properties.name;
 var born = text[0].properties.born;
 var years = text[0].properties.years;
 var bio = text[0].properties.bio;


 document.getElementById('features').innerHTML = title;
 document.getElementById('born').innerHTML = born;
 document.getElementById('years').innerHTML = years;
 document.getElementById('bio').innerHTML = bio;
 });




 </script>
 	
 	

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>The Map of English Literature</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body {
	padding: 0;
	margin: 0;
	}
	html, body, #map {
	height: 100%;
	width: 100%;
	a:link { color: white;}
	a:visited { color: white;}
	a:hover { color: white;}
	a:active { color: white;}
	}


	#text {
	position: absolute;
	font: 15px arial, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	width: 25%;
	overflow: auto;
	background: #fff;
	padding:8px;
	border-left: 5px solid #800B45;
	}
	#features {font-size: 18px; color:#800B45;}

	#bio {
	width:300px;
	}

	</style>


	</head>
	<body>

	<div id='map' ></div>
	<div id='text'>
	<h3>Map of English Literature</h3>
	<div id='features'> </div>
	<div id='years'>This map shows the birthplaces of some of English Literature's greatest writers. On the map authors, poets and dramatists have been mapped to their place of birth (although there are a few exceptions where writers have been mapped to locations which they are more commonly associated with).
	<br><br>
	If you hover over a name on the map you can read more about the chosen writer. All this information comes from the writer's <a href="http://www.wikipedia.com">Wikipedia</a> entry.
	<br><br>This map is not intended to be an exhaustive list of British writers. For each location there can only be one writer on the map. So, for example, only Malcolm Bradbury appears on the map for Sheffield (meaning other authors born in Sheffield, like Margaret Drabble, are left off the map).
	<br><br>If you zoom in on the map other writers' names may appear. If you zoom out you may discover that a few of the luminaries of English Literature were actually born elsewhere in the world.
	</div><br>
	<div id='born'> </div><br>
	<div id='bio'> </div><br>
	<a href="http://www.googlemapsmania.blogspot.com"><font size="3">Maps Mania</font></a>
	</div>




	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiZ21hcHNtYW5pYSIsImEiOiJOYnlnSFpvIn0.5f62d0cnrWCA1KioxzXtqg';
	var map = new mapboxgl.Map({
	container: 'map',
	zoom: 5,
	center: [1.54902,54.307944],
	style: 'mapbox://styles/gmapsmania/cjyqc1cjy0pvj1cs81vmmw2yi'
	});
	var nav = new mapboxgl.NavigationControl();
	map.addControl(nav, 'top-left');

	//Hover over each point


	map.on('mousemove', function (e) {
	var text = map.queryRenderedFeatures(e.point, { layers: ['authors'] });
	var title = text[0].properties.name;
	var born = text[0].properties.born;
	var years = text[0].properties.years;
	var bio = text[0].properties.bio;


	document.getElementById('features').innerHTML = title;
	document.getElementById('born').innerHTML = born;
	document.getElementById('years').innerHTML = years;
	document.getElementById('bio').innerHTML = bio;
	});




	</script>



	</body>
	</html>