Untitled

<!DOCTYPE html>
<html>
<head>
  <title> Test Map</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
  integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
  crossorigin=""></script>
  <script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
  <style>
  #map {
    height:800px;
  }
  </style>


  <script type = "text/javascript">
  function init(){
    var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
    var map = new L.map('map').setView([ -20.91, 142.70], 5);
    osmMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; ' + osmLink, maxZoom: 18,}).addTo(map);
    attrLink = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
    attrLinkToner = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.';
    var terrainMap = L.tileLayer( 'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg',{
      attribution: attrLink,
      maxZoom: 18,
    }).addTo(map);
    var baseLayers = {
      "Open Street Map":osmMap, "Stamen Terrain": terrainMap
    };

    L.control.layers(baseLayers).addTo(map);

    showLayers(map);

    function showLayers(map) {

      var myIcon = L.icon({
        iconUrl: "./images/frog.png",
        iconSize: [24,24],
        iconAnchor: [12,24]
      });


      var controlLayers = L.control.layers().addTo(map);

      $.getJSON("getData.php", function(data) {
        var geojsonLayer = L.geoJson(data, {
          style: function(feature) {
            return {
              'weight': 0,
              'fillColor': 'brown',
              'fillOpacity': 1
            }
          },
          onEachFeature: function(feature, layer) {
            var popupText = "Popup Text";
            layer.bindPopup(popupText);
          }
        }).addTo(map);
        controlLayers.addOverlay(geojsonLayer, 'ExampleLayer');
      });


    } // end of function showLayers


  }// end of function init
  </script>
</head>
<h1>Page heading</h1>
<body onload=init()>
  <div id = "map"> </div>
</body>
</html>

$.getJSON("getData.php",function(data){
    for (let i = 0; i< data.length; i++) {
      let location = new L.LatLng(data[i].siteLatitude, data[i].siteLongitude);
      let marker = new L.Marker(location, {
        icon: modelIcon,
        title: 'thetitle' });

        let studyTitle = data[i].studyTitle
        let siteID = data[i].siteID;

        let content = "<h2>" + studyTitle + "</h2>" + "<p>" + siteID + "</p>" + "<p> <b>" + "</b></p>";
        marker.bindPopup(content, {
          maxWidth: '400'
        });
        marker.addTo(map);
      }
    }
  )