Mapa Lab: Difference between revisions

1,257 bytes added ,  Yesterday at 02:37
Line 107: Line 107:
// STEP 3 Bind the HTML content to the polygon
// STEP 3 Bind the HTML content to the polygon
luissantosPolygon.bindPopup(popupContent);
luissantosPolygon.bindPopup(popupContent);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church
var casarealPolygon = L.polygon([
  [14.844345690393117, 120.81139862537997],
  [14.844416475283884, 120.81163898836508],
  [14.844091092386002, 120.81174627672725],
  [14.844034053102847, 120.81148140857981],
], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.4
}).addTo(map);
// STEP 2 Define the popup content with an image
var popupContent = `
  <div style="text-align: center;">
    <b style="font-size: 14px;">Dambanang Casa Real</b><br>
    <img src="https://wikimalolos.com/wikimalolos/images/thumb/8/86/Casa-real-1.jpg-final.jpg/800px-Casa-real-1.jpg-final.jpg?20260519020245"
        alt="Dambanang Casa Real"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Ariola, Coronel, Manabat"</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Casa_Real_De_Malolos"
      target="_blank"
      style="color: #007bff; text-decoration: none; font-weight: bold; font-size: 12px;">
      Learn More at Wiki Malolos →
    </a>
  </div>
`;
// STEP 3 Bind the HTML content to the polygon
casarealPolygon.bindPopup(popupContent);