Mapa Lab: Difference between revisions

From Wiki Malolos
Jump to navigation Jump to search
(Created page with "=== MAPA LAB CHEAT SHEET === <html> <head> <title>Map Test</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <style>#map { height: 500px; }</style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script> var map = L.map('map').setView([14.8432, 120.8114], 20); // Center on Malolos City // MapTiler tile layer L.tileLayer('https://ap...")
 
 
(18 intermediate revisions by 7 users not shown)
Line 23: Line 23:
   }).addTo(map);
   }).addTo(map);


//DO EDIT ABOVE CODE
//DO EDIT ABOVE CODE
//DO EDIT ABOVE CODE


//BELOW IS A POLYGON TYPE MAP MARKER
//BELOW IS A POLYGON TYPE MAP MARKER
//BELOW IS A POLYGON TYPE MAP MARKER




  // Marker: Malolos City with clickable URL
// POLYGON TYPE
  //L.marker([14.8432, 120.8114]).addTo(map)
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church
    //.bindPopup('<b>Lungsod ng Malolos</b><br><a href="https://malolos.gov.ph" target="_blank">Visit Website</a>')
    //.openPopup();
 
  // Marker: Bulacan State University with article link
  L.marker([14.857882, 120.813859]).addTo(map)
    .bindPopup('<b>Bulacan State University (BulSU)</b><br><a href="https://wikimalolos.com/wikimalolos/index.php/Making_a_Case_for_a_Historical_Founding_Date_of_Bulacan_State_University" target="_blank">Read Historical Article</a>');
 
  // Polygon: Approximate boundary of Bulacan State University
  var bulsuPolygon = L.polygon([
    [14.857630581410698, 120.81184712962074],
    [14.859724860926136, 120.81430888041209],
    [14.858521919350292, 120.81543541601346],
    [14.856447885966825, 120.81283903663416],
  ], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.4
  }).addTo(map);
 
  bulsuPolygon.bindPopup('Bulacan State University Campus');
 
// Polygon: Approximate boundary of Barasoain Church
var barasoainPolygon = L.polygon([
var barasoainPolygon = L.polygon([
   [14.846952933499336, 120.81225915935168],
   [14.846952933499336, 120.81225915935168],
Line 64: Line 42:
}).addTo(map);
}).addTo(map);


// Define the popup content with an image
// STEP 2 Define the popup content with an image
var popupContent = `
var popupContent = `
   <div style="text-align: center;">
   <div style="text-align: center;">
Line 71: Line 49:
         alt="Barasoain Church"  
         alt="Barasoain Church"  
         style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
         style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
     <p style="font-size: 11px; color: #555;">The "Cradle of Democracy in the East"</p>
     <p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Cradle of Democracy in the East"</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Barasoain_Church"
      target="_blank"
      style="color: #007bff; text-decoration: none; font-weight: bold; font-size: 12px;">
      Learn More at Wiki Malolos →
    </a>
   </div>
   </div>
`;
`;


// Bind the HTML content to the polygon
// STEP 3 Bind the HTML content to the polygon
barasoainPolygon.bindPopup(popupContent);
barasoainPolygon.bindPopup(popupContent);




// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Tahanan ni Dr. Luis Santos
var luissantosPolygon = L.polygon([
[14.841608829967972, 120.81088175637068],
[14.84161820909566, 120.8109041475335],
[14.841661497371982, 120.81088175637068],
[14.841677435302959, 120.81091210759453],
[14.841759254400522, 120.81087246022614],
[14.84180981248059, 120.81097170195507],
[14.841676287272104, 120.81104814490777],
[14.841684713622643, 120.81107094368312],
[14.841604339188663, 120.81111385902497],
[14.841544058342686, 120.81099785349065],
[14.841487666567808, 120.81102869889403],
[14.841446831136428, 120.81095762035908],
[14.841503871101938, 120.81092409274827],
[14.841523964722562, 120.81096164367239],
[14.841549891972234, 120.81094957373247],
[14.841535631985307, 120.8109254338527],
], {
  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;">Tahanan ni Dr. Luis Santos</b><br>
    <img src="https://wikimalolos.com/wikimalolos/images/7/71/Tahanan_ni_Dr._Luis_Santos.jpg"
        alt="Tahanan ni Dr. Luis Santos"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Rozaldes, Espanto, Trinidad"</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Tahanan_ni_Dr._Luis_Santos"
      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
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);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church
var gusalingpampamahalaanngmalolosPolygon = L.polygon([
  [14.84387118470922, 120.81099862656768],
  [14.843867241272276, 120.81129031671115],
  [14.843724871656097, 120.81134041160257],
  [14.843633496004264, 120.81105817587596],
], {
  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;">Gusaling Pampamahalaan ng Malolos</b><br>
    <img src="https://wikimalolos.com/wikimalolos/images/1/1b/Gusaling_Pampamahalaan_ng_Malolos.jpeg"
        alt="Gusaling Pampamahalaan ng Malolos"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">Sentro ng Kapangyarihan sa Bayan ng Malolos Estrella Cabuang Calajate Abequibel Dejesus"</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Gusaling_Pampamahalaan_ng_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
gusalingpampamahalaanngmalolosPolygon.bindPopup(popupContent);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church
var bahayngmgatanchangcoPolygon = L.polygon([
  [14.844311376004542, 120.81256831233246],
  [14.844335385977738, 120.81262031890348],
  [14.844149308615695, 120.81272355582806],
  [14.844086282376098, 120.81260091346655],
  [14.844228841701323, 120.81252018684881],
  [14.844267107609456, 120.8125915988568],
],
{
  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;">Bahay Ng Mga Tanchangco</b><br>
    <img src="https://streetviewpixels-pa.googleapis.com/v1/thumbnail?panoid=Orp4ld-T8LC0zLEimvPujQ&cb_client=search.gws-prod.gps&w=408&h=240&yaw=326.76797&pitch=0&thumbfov=100"
        alt="Bahay Ng Mga Tanchangco"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Aquino, Pormilos, Roxas"</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Bahay_ng_mga_tanchangco"
      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
bahayngmgatanchangcoPolygon.bindPopup(popupContent);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church
var ilogtampoyPolygon = L.polygon([
  [14.844024, 120.810870],
  [14.844004, 120.810990],
  [14.843850, 120.810987],
  [14.843861, 120.810882],
], {
  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;">Ilog Tampoy</b><br>
    <img src="https://wikimalolos.com/wikimalolos/index.php/File:Ilog_Tampoy.jpg"
        alt="Ilog Tampoy"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">"Sinaunang Daungan ng Komersyo sa Malolos" Burgos, Dueñas, Reyna</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Ilog_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
ilogtampoyPolygon.bindPopup(popupContent);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Barasoain Church
var comisariadeguerraPolygon = L.polygon([
  [14.843755802559375, 120.8102657682469],
  [14.843775729314983, 120.81043291345799],
  [14.84337406121672, 120.81054177852788],
  [14.843300656078007, 120.81037716842492],
], {
  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;">Comisaria De Guerra</b><br>
    <img src="https://wikimalolos.com/wikimalolos/index.php/File:Comisagiadeguerra.jpg"
        alt="Comisaria De Guerra"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">The "Laureta Inocencio Mabingnay Maglalang"</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Comisaria_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
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.843973, 120.811431],
  [14.843988, 120.811480],
  [14.843897, 120.811520],
  [14.843889, 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);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Gobierno Militar De La Plaza De Malolos
var gobiernomilitardelaplazademalolosPolygon = L.polygon([
  [14.84308, 120.81038],
  [14.84311, 120.81050],
  [14.84291, 120.81055],
  [14.84288, 120.81044],
], {
  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;">Gobierno Militar De La Plaza De Malolos</b><br>
    <img src="https://wikimalolos.com/wikimalolos/images/8/80/Gobiernomilitardelaplaza.jpg?20260519020008"
        alt="Gobierno Militar De La Plaza De Malolos"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">Atencio, Bautista, Clavio, Mapa</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Gobierno_Militar_de_la_Plaza"
      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
gobiernomilitardelaplazademalolosPolygon.bindPopup(popupContent);
// POLYGON TYPE
// STEP 1 Define Boundaries: Approximate boundaries of Sectaria de Fomento
var fomentoPolygon = L.polygon([
  [14.842542, 120.810247],
  [14.842573, 120.810407],
  [14.842459, 120.810435],
  [14.842445, 120.810401],
  [14.842399, 120.810407],
  [14.842403, 120.810421],
  [14.842341, 120.810430],
  [14.842317, 120.810326],
  [14.842426, 120.810299],
  [14.842426, 120.810276],
  [14.842544, 120.810251],
], {
  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 Fomento</b><br>
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Jose_bautista_Bahay_na_bato_house_malolos.jpg"
        alt="Secretaria de Fomento"
        style="width: 200px; height: auto; margin-top: 8px; border-radius: 4px;">
    <p style="font-size: 11px; color: #555; margin-bottom: 8px;">The “Nicodemus Pazon Sanares”</p>
   
    <a href="https://wikimalolos.com/wikimalolos/index.php/Antonio_Bautista"
      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
fomentoPolygon.bindPopup(popupContent);
//DO EDIT/COPY CODE BEYOND THIS
//DO EDIT/COPY CODE BEYOND THIS
//DO EDIT/COPY CODE BEYOND THIS
</script>


</body>
</html>


<html><iframe src="https://wikimalolos.com/wp-admin/admin-ajax.php?action=h5p_embed&id=20" width="959" height="628" frameborder="0" allowfullscreen="allowfullscreen" title="Tara, Malolos!"></iframe><script src="https://wikimalolos.com/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script></html>




Line 86: Line 454:




//DO EDIT BEYOND THIS
//DO EDIT/COPY CODE BEYOND THIS
//DO EDIT BEYOND THIS
//DO EDIT/COPY CODE BEYOND THIS
//DO EDIT BEYOND THIS
//DO EDIT/COPY CODE BEYOND THIS


</script>
</script>

Latest revision as of 05:24, 19 May 2026

MAPA LAB CHEAT SHEET

Map Test



//DO EDIT/COPY CODE BEYOND THIS //DO EDIT/COPY CODE BEYOND THIS //DO EDIT/COPY CODE BEYOND THIS

</script>

</body> </html>

Retrieved from "https://wikimalolos.com/wikimalolos/index.php?title=Mapa_Lab&oldid=7299"