-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·39 lines (32 loc) · 1.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<title> Liping Yang </title>
</head>
<body>
<p>
Welcome to Liping Yang's home page. (Please visit <a href="http://lipingyang.org" target="_blank">wwww.lipingyang.org</a> for Liping's actively updated website.)
</p>
<div id="mapId" style="height:400px; width: 600px"></div>
<script>
// Bandelier Hall East lat/long: 35.0843° N, 106.6241° W
//create a map variable "mymap" that points to the map placed in the mapId <div>
//zoom the view on Bandelier Hall East building at a 17 zoom level
var mymap = L.map('mapId').setView([35.0843, -106.6241], 17);
// create a varialbe named "osm" that is used to hold OpenStreetMap tile layer
var osm = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// add the OpenStreetMap tile layer (i.e., the varialbe osm you defined above) to the map
osm.addTo(mymap);
// add a marker on the tile layer
var marker = L.marker([35.0843, -106.6241]).addTo(mymap);
// add a popup
// Popups are usually used when you want to attach some information to a particular object on a map
marker.bindPopup("<b>Hello world!</b> <br><i>Bandelier Hall East</i> <br>University of New Mexico").openPopup();
// <b> tag used to bold text
// <br> tag for newline
// <i> tag for italic text
</script>
</body>
</html>