Lab Detail


Sno Back Back Subject subject date title note
1 1 Back to subject COMPUTER NETWORKS & INTERNET PROTOCOLS LAB - 23A05501P (Lab) Aug. 31, 2025 Client-Side GeoAPI Interaction Using HTML and leafletcdn

Code 


<!DOCTYPE html>
<html>
<head>
  <title>GeoAPI Interaction (Google Tiles)</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
  <!-- Marker Cluster CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />

  <style>
    #map { height: 600px; }
  </style>
</head>
<body>
  <h2>GEOAPI Intraction</h2>
  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>

  <script>
    // Initialize map
    var map = L.map('map').setView([14.62, 79.42], 9);

    // ✅ Google Maps tile layer
    var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map);

    // Other Google layers (optional)
    var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    });
    var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    });

    // Cluster group
    var markers = L.markerClusterGroup();

    // Fetch GeoJSON from API
    fetch("https://aec.sites.marrichet.com/api/studentlocation/")
      .then(response => response.json())
      .then(data => {
        var geojsonLayer = L.geoJSON(data, {
          onEachFeature: function (feature, layer) {
            layer.bindPopup(
              `<b>Student ID:</b> ${feature.id}<br>
               <b>Coordinates:</b> ${feature.geometry.coordinates[1]}, ${feature.geometry.coordinates[0]}`
            );
          }
        });

        markers.addLayer(geojsonLayer);
        map.addLayer(markers);
        map.fitBounds(markers.getBounds());
      });

    // ✅ Layer control for switching Google maps
    L.control.layers({
      "Google Streets": googleStreets,
      "Google Satellite": googleSat,
      "Google Hybrid": googleHybrid
    }).addTo(map);

  </script>
</body>
</html>

Output: