<!DOCTYPE html><html><head><title>Hello World with MapLibreGl</title><!-- hint: remember to change your page title! --><metacharset="utf-8"/><linkrel="shortcut icon"href="#"><linkrel="stylesheet"href="styles/style.css"><!-- MapLibreGL's css--><linkrel="stylesheet"href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"/><!-- MapLibreGL's JavaScript--><scriptsrc="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script></head><body><header> Hello World
<!-- hint: you can make a menu with other links here if you'd like --></header><main><divclass="portfolio"><divid="contents"></div><!-- Portfolio content goes here --><h2>Where I work</h2><ul><li>Los Angeles Metro</li><li>UCLA</li><li>Yindee Games</li></ul></div><divid="map"></div></main><divid="footer"> Copyright(2024)
</div><scriptsrc="js/init.js"></script></body></html>
// Initialize the mapconstmap=newmaplibregl.Map({container:'map',style:'https://api.maptiler.com/maps/streets-v2-light/style.json?key=wsyYBQjqRwKnNsZrtci1',center:[-118.4430,34.0691],zoom:15});functionaddMarker(lat,lng,title,message){letpopup_message=`<h2>${title}</h2> <h3>${message}</h3>`newmaplibregl.Marker().setLngLat([lng,lat]).setPopup(newmaplibregl.Popup().setHTML(popup_message)).addTo(map)createButtons(lat,lng,title);returnmessage}functioncreateButtons(lat,lng,title){constnewButton=document.createElement("button");newButton.id="button"+title;newButton.innerHTML=title;newButton.setAttribute("lat",lat);newButton.setAttribute("lng",lng);newButton.addEventListener('click',function(){map.flyTo({center:[lng,lat],})})document.getElementById("contents").appendChild(newButton);}