Untitled

<html>
<head>
  <title>A Cyprus map!</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="jquery-2.2.4.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([35.170582481889134, 33.42520000000002],9);

  // load a tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: 'by <a href="http://www.acgoldman.com/">Goldman solutions & services</a>, Data by <a href="http://www.opencartography.com">Open Cartography</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  // loading GeoJSON file - Here my html and PicnicSites.geojson file resides in same folder
  $.getJSON("PicnicSites.geojson",function(data){
    // L.geoJson function is used to parse geojson file and load on to map
    L.geoJson(data).addTo(map);
  });

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

$ is not defined

<script src="https://unpkg.com/jquery@2.2.4/dist/jquery.min.js"></script>