asathoor/popups.html

## gistfile1.txt
How to create several popups
============================

## popups.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Attach a popup to a marker instance</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
/**
 * Tip: Link to your image
 **/
#marker, #pop {
    background-image: url('/mapbox-gl-js/assets/washington-monument.jpg');
    background-size: cover;
    background-color: mediumspringgreen;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.mapboxgl-popup {
    max-width: 200px;
}

</style>

<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNhdGhvb3IiLCJhIjoiY2oyd3hlbzU3MDA5NzJxbm9iMjczanJndCJ9.HahDB7Z1rrD5THIYQh6t4g';

var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/asathoor/cjfkvmnl8gxrc2ro99la3onwv',
    center: monument,
    zoom: 3
});

// create the popup
var popup = new mapboxgl.Popup()
    .setText('Construction on the Washington Monument began in 1848.');

// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';

// create the marker
new mapboxgl.Marker(el)
    .setLngLat(monument)
    .setPopup(popup) // sets a popup on this marker
    .addTo(map);

/**
 * One more
 **/

// the position of the popup
var pop = [-122.20292,47.47961];

// create the popup
var myNewPop = new mapboxgl.Popup()
    .setText('Here is a new popup.');

// create DOM element for the marker
// AND GIVE IT A NEW ID
// and style the background image or similar in CSS eg. l. 18
var el2 = document.createElement('div');
el2.id = 'pop';

// create the marker
new mapboxgl.Marker(el2)
    .setLngLat( pop )
    .setPopup( myNewPop ) // sets a popup on this marker
    .addTo(map);
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Attach a popup to a marker instance</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	/**
	* Tip: Link to your image
	**/
	#marker, #pop {
	background-image: url('/mapbox-gl-js/assets/washington-monument.jpg');
	background-size: cover;
	background-color: mediumspringgreen;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	}

	.mapboxgl-popup {
	max-width: 200px;
	}

	</style>

	<div id='map'></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiYXNhdGhvb3IiLCJhIjoiY2oyd3hlbzU3MDA5NzJxbm9iMjczanJndCJ9.HahDB7Z1rrD5THIYQh6t4g';

	var monument = [-77.0353, 38.8895];
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/asathoor/cjfkvmnl8gxrc2ro99la3onwv',
	center: monument,
	zoom: 3
	});

	// create the popup
	var popup = new mapboxgl.Popup()
	.setText('Construction on the Washington Monument began in 1848.');

	// create DOM element for the marker
	var el = document.createElement('div');
	el.id = 'marker';

	// create the marker
	new mapboxgl.Marker(el)
	.setLngLat(monument)
	.setPopup(popup) // sets a popup on this marker
	.addTo(map);

	/**
	* One more
	**/

	// the position of the popup
	var pop = [-122.20292,47.47961];

	// create the popup
	var myNewPop = new mapboxgl.Popup()
	.setText('Here is a new popup.');

	// create DOM element for the marker
	// AND GIVE IT A NEW ID
	// and style the background image or similar in CSS eg. l. 18
	var el2 = document.createElement('div');
	el2.id = 'pop';

	// create the marker
	new mapboxgl.Marker(el2)
	.setLngLat( pop )
	.setPopup( myNewPop ) // sets a popup on this marker
	.addTo(map);
	</script>

	</body>
	</html>