googlemapsturf

by bulutkartal

HTML

<script src="	https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p><input type="range" id="range" min="1" max="10" step="1" value="3" /> <span class="range-text">3 Km</span></p>
  <div id="mapDiv"></div>

CSS

#mapDiv { width: 980px; height: 600px; }
    #range { width: 300px; }
    .map-box{ padding: 10px; }

JavaScript

var map, marker;
var dataMap = new google.maps.Data();

var point = turf.point([121.51709318161011, 25.047833423462535]);
// turf.buffer
$('#range').on('change', function(e){
  $('.range-text').text( $(this).val() + ' Km');
  dataMapReload(marker.position, $(this).val());
});
  var mapOptions = {
      center: new google.maps.LatLng(point.geometry.coordinates[1], point.geometry.coordinates[0]),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapElement = document.getElementById("mapDiv");

  map = new google.maps.Map(mapElement, mapOptions);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(point.geometry.coordinates[1], point.geometry.coordinates[0]),
    map: map,
    draggable: true,
    title: ''
  });
   google.maps.event.addListener(marker, 'dragend', function(e) {
    dataMapReload(e.latLng, $('#range').val());
    map.panTo(e.latLng);
  });
  
  dataMapReload(marker.position, $('#range').val());

function dataMapReload(point, unit){
  unit = parseInt(unit, 10);
  var turfPoint = turf.point([point.lng(), point.lat()]);
  var buffered = turf.buffer(turfPoint, unit, "kilometers");
  dataMap.setMap(null);
  dataMap = new google.maps.Data();
  dataMap.addGeoJson(buffered);
  dataMap.setMap(map);
}