How to store latitude and longitude of polygon fill area?

422 views Asked by At

I want to save multiple zones(polygon areas) latitude and longitude not the coordinates latitude and longitude. I tried google, but didn't find anything helping. Here is my code for drawing polygons to a circle, but it is saving coordinates of polygon. But I need to store latitude and longitude of inside polygons. I mean latitude and longitude of polygons area. So I can check a pickup location latitude and longitude, In which zone they exist.

<script>
"use strict";

var input_start_radius = 0;
var input_end_radius = 0;
var circle; //global variable, consider adding it to map instead of window
var map = null;
var bounds = null;
var ey = null;
var ex = null;
var zonemap;
var mapPolygon;

function initializeMap() {
  var myOptions = {
    zoom: 11,
    center: new google.maps.LatLng(53.597085,-0.659541),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  zonemap = new google.maps.Map(document.getElementById("zonemap"),
                                myOptions);
 
  bounds = new google.maps.LatLngBounds();

  var donut = new google.maps.Polygon({
                 paths: [drawCircle(new google.maps.LatLng(53.597085,-0.659541), input_start_radius, 1),
                         drawCircle(new google.maps.LatLng(53.597085,-0.659541), input_end_radius, -1)],
                 strokeColor: "#0000FF",
                 strokeOpacity: 0.8,
                 strokeWeight: 2,
                 fillColor: "#FF0000",
                 fillOpacity: 0.35
     });
    //  alert("S: " + input_start_radius + ", E: " + input_end_radius);
    mapPolygon = JSON.stringify(donut.getPaths());
    // console.log(saveRawShape(mapPolygon));
    document.getElementById("geometry").value = mapPolygon;
    // var getData = JSON.parse(saveData);
    // console.log(getData);
     donut.setMap(zonemap);
  
 zonemap.fitBounds(bounds);
 
}


function getStartInputRadius(data)
{
    input_start_radius = parseFloat(data.value);
}

function getEndInputRadius(data)
{
    input_end_radius = parseFloat(data.value);
}


function drawCircle(point, radius, dir) { 
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 
var earthsradius = 3963; // 3963 is the radius of the earth in miles

   var points = 32; 

   // find the raidus in lat/lon 
   var rlat = (radius / earthsradius) * r2d; 
   var rlng = rlat / Math.cos(point.lat() * d2r); 


   var extp = new Array(); 
   if (dir==1)  {var start=0;var end=points+1} // one extra here makes sure we connect the
   else     {var start=points+1;var end=0}
   for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
   { 
      var theta = Math.PI * (i / (points/2)); 
      ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
      ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
      extp.push(new google.maps.LatLng(ex, ey)); 
      bounds.extend(extp[extp.length-1]);
   } 
   // alert(extp.length);
   return extp;
   }
  

</script>
<div class="m-portlet m-portlet--tab">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                           Create Zone
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                
                <!--begin::Form-->
            {!! Form::open(array('route' => 'zones.store','method'=>'POST', 'class' => 'm-form m-form--fit m-form--label-align-right')) !!}
            <div class="m-portlet__body">
                <div class="form-group m-form__group">
                    <label for="exampleInputName">Enter Zone Name</label>
                    {!! Form::text('zone_name', null, array('placeholder' => 'Enter Zone Name','class' => 'form-control m-input m-input--air')) !!}
                </div>
                <div class="form-group m-form__group">
                    <label for="exampleInputEmail1">Enter Starting Radius From Zone 0 in Miles</label>
                    {!! Form::text('start_radius', null, array('id' => 'input_start_radius', 'onchange' => 'getStartInputRadius(this)', 'placeholder' => 'Enter Radius','class' => 'form-control m-input m-input--air')) !!}
                </div>
                <div class="form-group m-form__group">
                    <label for="exampleInputEmail1">Enter Ending Radius From Zone 0 in Miles</label>
                    {!! Form::text('end_radius', null, array('id' => 'input_end_radius', 'onchange' => 'getEndInputRadius(this)', 'placeholder' => 'Enter Radius','class' => 'form-control m-input m-input--air')) !!}
                </div>
                {!! Form::hidden('geometry', null, array('id' => 'geometry')) !!}
                <div class="form-group m-form__group">
                    <div onclick="initializeMap()" class="btn btn-accent">Generate Zone</div>
                </div>
                <div id="zonemap"></div>

            </div>
            <div class="m-portlet__foot m-portlet__foot--fit">
                <div class="m-form__actions">
                    <button type="submit" class="btn btn-accent">Save Zone</button>
                    <button type="reset" class="btn btn-secondary">Cancel</button>
                </div>
            </div>
        {!! Form::close() !!}
            </div>
        </div>

0

There are 0 answers