map3.html


<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Muizenberg Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
 integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
 crossorigin=""></script>
  </head>

 <body>

  <div id ="mapid" style = "width:425px; height:350px"></div>
  
         <script>

             var mapOptions = {
                 center: [-34.0978, 18.4722],
                 zoom: 10
                 }
                 var map = new L.map('map', mapOptions);
                 var layer = new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
             
                 map.addLayer(layer);
           
          </script>

      </body>
</html>