83
edits
Mapa Lab: Difference between revisions
→MAPA LAB CHEAT SHEET
| Line 282: | Line 282: | ||
// STEP 3 Bind the HTML content to the polygon | // STEP 3 Bind the HTML content to the polygon | ||
comisariadeguerraPolygon.bindPopup(popupContent); | comisariadeguerraPolygon.bindPopup(popupContent); | ||
// POLYGON TYPE | |||
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church | |||
var secretariaPolygon = L.polygon([ | |||
[14.843402, 120.810917], | |||
[14.843442, 120.811071], | |||
[14.843329, 120.811105], | |||
[14.843298, 120.810999], | |||
[14.843237, 120.810995], | |||
[14.843204, 120.810875], | |||
[14.843233, 120.810866], | |||
[14.843270, 120.810953], | |||
], { | |||
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;">Secretaria De Guerra</b><br> | |||
<img src="https://wikimalolos.com/wikimalolos/images/6/65/Secretaria_De_Guerra.png" | |||
alt="Secretaria De Guerra" | |||
style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;"> | |||
<p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Adriano, Bautista, Gloria"</p> | |||
<a href="https://wikimalolos.com/wikimalolos/index.php/Secretaria_De_Guerra" | |||
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 | |||
secretariaPolygon.bindPopup(popupContent); | |||
// POLYGON TYPE | |||
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church | |||
var tampoyPolygon = L.polygon([ | |||
[14.843988, 120.811477], | |||
[14.843896, 120.811517], | |||
[14.843977, 120.811435], | |||
[14.843891, 120.811472], | |||
], { | |||
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;">Tulay Tampoy</b><br> | |||
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/0123jfSanto_Ni%C3%B1o_Bautista_Bridge_Roads_Hall_Creek_Malolos_Cityfvf_02.JPG" | |||
alt="Tulay Tampoy" | |||
style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;"> | |||
<p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Adriano, Bautista, Gloria"</p> | |||
<a href="https://wikimalolos.com/wikimalolos/index.php/Tulay-Tampoy" | |||
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 | |||
tampoyPolygon.bindPopup(popupContent); | |||
//DO EDIT/COPY CODE BEYOND THIS | //DO EDIT/COPY CODE BEYOND THIS | ||