<!DOCTYPE html>
<html>
<head>
  <title>Your Country in a Database</title>
  <meta charset="utf-8" />
    <style>
body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
}
#search {
  z-index: 1000;
  position: absolute;
  top: 10px;
  right: 30px;
  width: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 4px;
}
    </style>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="leaflet.css" />

  <!--[if lte IE 8]><link rel="stylesheet" href="leaflet.ie.css" /><![endif]-->
</head>

<body>
  <div id="map"></div>
  <div id='search'>
  <form>
    <input size="5" name='radius' id='radius' type='text' value='0.5'/> km<br/>
    <input onClick="changeQuery(); return false;" type='submit' value="Find!"/>
  </form>

  </div>

  <script src="leaflet.js"></script>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

  <script>
    var map = new L.Map('map');

    var cloudmadeUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors',
      cloudmade = new L.TileLayer(
        cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}
      );

    map.setView(new L.LatLng(51.5116, -0.1019), 17).addLayer(cloudmade);

    var geojsonMarkerOptions = {
      radius: 12,
      fillColor: "#8888ff",
      color: "#33f",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.6
    };
    var geojsonAreaOptions = {
      radius: 8,
      fillColor: "#8888ff",
      color: "#33f",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.2
    };

    var geoJsonOptions = {
      pointToLayer: function (latlng) {
        myOptions = geojsonMarkerOptions;
        myOptions.radius = calcCircleSize();
        return new L.CircleMarker(latlng, myOptions);
      }
    }

    var geojsonLayer = new L.GeoJSON(null, geoJsonOptions);
    map.addLayer(geojsonLayer);
    geojsonLayer.on("featureparse", function (e) {
      if (e.properties && e.properties.popupContent){
        e.layer.bindPopup(e.properties.popupContent);
      }
      if (e.properties && e.properties.style && e.layer.setStyle) {
        e.layer.setStyle(e.properties.style);
      } else if (e.geometryType == 'Polygon' && map.getZoom() >= 16) {
        e.layer.setStyle(geojsonAreaOptions);
      } else {
        e.layer.setStyle(geojsonMarkerOptions);
      }
    });

    map.on('moveend', changeLocation);

    var popup = new L.Popup();

    function calcCircleSize() {
      z = map.getZoom();
      return Math.min(12, Math.max(2, 15 - ((15-z) * 3)));
    }

    function changeLocation(event) {
      center = map.getCenter();

      radiusInput = document.getElementById('radius');

      $.ajax({
        url: "fetch-mongo-fixed2.php" +
          '?lat=' + center.lat + '&lon=' + center.lng +
          '&d=' + radiusInput.value,
        beforeSend: function ( xhr ) {
        xhr.overrideMimeType("text/plain; charset=x-user-defined");
        }
      }).done(function ( data ) {
        geojsonLayer.clearLayers();
        res = jQuery.parseJSON(data);
        res.forEach( function(value) {
          if (map.getZoom() < 16 && value.geometry.type == 'Polygon') {
            value.geometry.type = 'Point';
            value.geometry.coordinates = value.geometry.coordinates[0][0];
          }
          geojsonLayer.addGeoJSON(value);
        
        } );
      });
    }
  </script>
</body>
</html>