@model Aniel.Connect.Models.T5.

Mapa_Area_CoberturaModel
@using Aniel.Connect.Models.T5
@using Resources

@{
ViewBag.Title = "Aniel Geograph";
Layout = "~/Views/Shared/_LayoutLimpo.cshtml";
}

@section styles{

<style>
/*Collapse*/
.collapse {
visibility: hidden;
}

.collapse.show {
visibility: visible;
display: block;
}

.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}

.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
</style>
}

<div class="container-fluid" id="divTitle">

<!--main-->

<div class="row mb-1">

<div class="col-md-8 col-sm-10">

<h4 class="title-page mb-0">
<i class="fas fa-map-marked-alt"></i>
@ViewBag.Title
</h4>

<div class="form-group row">

<label class="ml-4">Endereço:</label>
<div class="col-sm-10">
<input type="text" class="form-control ml-2 mr-1" id="pac-
input" autocomplete="off">
 </div>
<i class="la la-search la-2x" style="color: #999"></i>
</div>
</div>

<div class="col-auto ml-auto">

<div class="row text-right">
<div class="col-sm-12" id="relogioPainel" style="font-size:
12px;">Mapa Atualizado às </div>
<div class="col-sm-12" id="relogio" style=" font-size:14px; font-
weight: bold">29/01/2021 11:32</div>
</div>
<div class="row mr-0" style="float: right;">
<button class="btn btn-default btn-add" data-toggle="modal" data-
target="#modal-filter" title="@RsBase.FILTRO">
<i class="la la-bars la-2x" style="color: #999"></i>
</button>

<button class="btn btn-default btn-add" id="iLimparFiltro"

title="@RsBase.LIMPAR_FILTRO">
<i class="la la-tachometer la-2x" style="color: #999"></i>
</button>

<button class="btn btn-default btn-add" data-toggle="modal" data-

target="#modal-filter" title="@RsBase.FILTRO">
<i class="la la-filter la-2x" style="color: #999"></i>
</button>

<button class="btn btn-default btn-add" id="iLimparFiltro"

title="@RsBase.LIMPAR_FILTRO">
<i class="la la-eraser la-2x" style="color: #999"></i>
</button>

<button class="btn btn-default btn-add" type="button"

title="@RsBase.EXPORTAR" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<i class="la la-ellipsis-v la-2x" style="color: #999"></i>
</button>

<div class="dropdown-menu dropdown-menu-right" aria-

labelledby="dropdownMenuButton">
<a class="dropdown-item" href="@Url.Action("Importacao",
"Cliente")" onclick="ShowPageLoading(); return
true;">@RsCadastros.IMPORTAR_CLIENTES</a>
<a class="dropdown-item" href="#" onclick="$('.buttons-
excel').click(); return false;">@RsBase.EXPORTAREXCEL</a>

<a id="iSuspenderPlano" class="dropdown-item"

href="#">@RsCadastros.SUSPENDER_PLANOS</a>
<a id="iReativarPlano" class="dropdown-item"
href="#">@RsCadastros.REATIVAR_PLANOS</a>
<a id="iReduzirVelocidade" class="dropdown-item"
href="#">@RsCadastros.REDUZIR_VELOCIDADE</a>
<a id="iNormalizarVelocidade" class="dropdown-item"
href="#">@RsCadastros.NORMALIZAR_VELOCIDADE</a>

@*@if (AcessoHelper.TemAcesso(_areas, "21"))

{*@
<a id="btnInativar" class="dropdown-item"
href="#">@RsBase.INATIVAR</a>
<a id="btnAtivar" class="dropdown-item"
href="#">@RsBase.ATIVAR</a>
@*}*@
</div>
<a class="btn btn-success btn-add-2" href="#" id="btnAtualizar"
title="Atualizar" return true;">
<i class="fas fa-sync-alt" style="color: #fff"></i>
</a>
</div>
</div>

</div>
<!--./main-->
</div>

<!--Collapse arrow right-->

<div class="row" style="position: absolute; z-index:999; margin-top: 95px;">
<div class="col-md-6">
<a class="" data-toggle="collapse" data-target="#demo" style="background-
color: white; border: 1px solid; padding: 10px;">
<i class="fa fa-chevron-right"></i>
</a>
<div id="demo" class="collapse width">
<div style="width:400px;">

<div class="card" style="width: 22rem;">

<div class="card-body">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-
tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-
selected="true">Caixas Disponíveis</a>
<a class="nav-item nav-link" id="nav-profile-tab"
data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-
selected="false">Planos Ofertados</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home"
role="tabpanel" aria-labelledby="nav-home-tab">Caixas Disponíveis</div>
<div class="tab-pane fade" id="nav-profile"
role="tabpanel" aria-labelledby="nav-profile-tab">Planos Ofertados</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

<!--Mapa-->
@*<input id="pac-input"
class="controls"
type="text"
placeholder="Search Box" />*@

<div id="map" style=" height: 88vh; width: 100%;"></div>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- Async script executes immediately and must be after any DOM elements used in
callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB300cwy-
vnbfZEfWteLTlmr8QzSK-2zAw&callback=initMap&libraries=places,drawing,geometry"
async></script>

<!--GoogleMaps Config-->

<script>
const cor = "@Html.Raw(Model.Cor)";
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return
a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&libraries=places">

function initDrawing(map) {
const image =

"https://developers.google.com/maps/documentation/javascript/examples/full/images/b
eachflag.png";

let drawingManager = new google.maps.drawing.DrawingManager({

map: map,
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_DOWN,
drawingModes: ['marker', 'circle', 'polygon', 'polyline',
'rectangle'],

// drawingModes: [
// google.maps.drawing.OverlayType.MARKER,
// google.maps.drawing.OverlayType.CIRCLE,
// google.maps.drawing.OverlayType.POLYGON,
// google.maps.drawing.OverlayType.POLYLINE,
// google.maps.drawing.OverlayType.RECTANGLE,

},
markerOptions: {
icon: image,
visible: false,
},
rectangleOptions: {
strokeColor: cor,
fillColor: cor,
fillOpacity: "0.15",
editable: false,
bounds: map.getBounds(),
},

polygonOptions: { /*area de cobertura*/

strokeColor: cor,
fillColor: cor,
 fillOpacity: "0.15",
strokeWeight: 3,
Status: "Alex",

},

polylineOptions: {
strokeColor: cor,
editable: false,

/* autocomplete: true*/
},

circleOptions: {
strokeColor: cor,
fillColor: cor,
fillOpacity: "0.15",
strokeWeight: 3,
editable: false,
}
});

//google.maps.event.addlistener(drawingmanager, 'rectanglecomplete',
(rectangle) => {
// console.log(rectangle.getbounds())
// rectangle.seteditable(true);
// /*var area =
google.maps.geometry.spherical.computearea(polygon.getpath());*/
// var tamanhoarea =
google.maps.geometry.spherical.computearea(rectangle.getbounds());

// //var ronaldo = polyline.getpath(); /*pegar as cordenadas do path*/

// //console.log(ronaldo);

// coordinates = (rectangle.getbounds().getarray());
// console.log(coordinates);

// for (var i = 0; i < coordinates.length; i++) {

// lat = coordinates[i].lat();
// lng = coordinates[i].lng();

// console.log(lat, lng);

// }
//});

google.maps.event.addListener(drawingManager, 'rectanglecomplete',
(rectangle) => {
console.log(rectangle)
rectangle.setEditable(true);

});

google.maps.event.addListener(drawingManager, 'polylinecomplete',
(polyline) => {
coordinates = (polyline.getPath().getArray());
console.log(coordinates);
 var TamanhoArea =
google.maps.geometry.spherical.computeArea(polygon.getPath());

});

google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon)

=> {
console.log(polygon.getPath().getArray());

console.log(polygon.strokeColor, polygon.fillColor,
polygon.strokeWeight, polygon.fillOpacity, polygon.Status);
console.log(polygon.editable);

polygon.setEditable(true);
/*var area =
google.maps.geometry.spherical.computeArea(polygon.getPath());*/
var TamanhoArea =
google.maps.geometry.spherical.computeArea(polygon.getPath());

//var ronaldo = polyline.getPath(); /*pegar as cordenadas do path*/

//console.log(ronaldo);

coordinates = (polygon.getPath().getArray());
console.log(coordinates);

//const encodeString =
google.maps.geometry.encoding.encodePath(polygon.getPath());
//console.log(encodeString);

//const decodeString =
google.maps.geometry.encoding.decodePath(encodeString);
//console.log(decodeString);

var j = 0;
var latlng = [];

for (var i = 0; i < coordinates.length; i++) {

latlng.push([coordinates[i].lat(), coordinates[i].lng()]);

}
latlng.push(latlng[0]);

/* latlng = latlng.toString();*/

console.log(latlng);

console.log(TamanhoArea);

//////////////// /*Converter de Path para string*/

//var LatLngString = [];

//var arr = latlng.split(',');

//for (var i = 0; i < arr.length; i += 2) {
// LatLngString.push(new google.maps.LatLng(parseFloat(arr[i]),
parseFloat(arr[i + 1])));

//}

// new google.maps.Polyline({
// map: map,
// path: LatLngString,
// geodesic: true,
// strokeColor: "#000000",
// strokeOpacity: 1.3,

/*});*/

//// criação de objeto polyline

//var polyline = new google.maps.Polyline({
// map: map,
// path: path,
// strokeColor: '#0000FF',
// strokeColor: '#0000FF',
// strokeOpacity: 0.7,
// strokeWeight: 1
//});

});
//google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
//google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
//google.maps.event.addListener(polygon.getPath(), "set_at", getPath);

};

function initAutocomplete(map) {

// Create the search box and link it to the UI element.

const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener("bounds_changed", () => {
searchBox.setBounds(map.getBounds());
});
let markers = [];
// Listen for the event fired when the user selects a prediction and
retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();

if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
 marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log("Returned place contains no geometry");
return;
}
const icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);

if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);

const link = '@String.Concat(CONSTANTES.URLPortal,

"/api/Area_CoberturaApi/FindCoordenadas/",Request.QueryString["Id"])';
$.ajax({
url: link,
type: 'GET',
dataType: 'json',
beforeSend: function () {
ShowPageLoading();
},
complete: function () {
HidePageLoading();
}
}).done(function (data) {
if (data.ok) {

//data.objeto.id
//data.objeto.tipo

data.objeto.coodenadasDouble

}
 else {
Notificar("@RsBase.ATENCAO_", data.mensagem, "warning");
}
});

});

};

// This example requires the Drawing library. Include the libraries=drawing

// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&libraries=drawing">
//function initMap() {
// const map = new google.maps.Map(document.getElementById("map"), {
// center: { lat: -22.8365822664385, lng: -43.340056779660614 },
// zoom: 15,
// });
// const drawingManager = new google.maps.drawing.DrawingManager({
// drawingMode: google.maps.drawing.OverlayType.MARKER,
// drawingControl: true,
// drawingControlOptions: {
// position: google.maps.ControlPosition.TOP_CENTER,
// drawingModes: [
// google.maps.drawing.OverlayType.MARKER,
// google.maps.drawing.OverlayType.CIRCLE,
// google.maps.drawing.OverlayType.POLYGON,
// google.maps.drawing.OverlayType.POLYLINE,
// google.maps.drawing.OverlayType.RECTANGLE,
// ],
// },
// markerOptions: {
// icon:
"https://developers.google.com/maps/documentation/javascript/examples/full/images/b
eachflag.png",
// },
// circleOptions: {
// fillColor: "#ffff00",
// fillOpacity: 1,
// strokeWeight: 5,
// clickable: false,
// editable: true,
// zIndex: 1,
// },
// });
// drawingManager.setMap(map);

//}

//// Initialize and add the map

//function initMap() {
// // The location of Uluru
// const uluru = { lat: -22.8365822664385, lng: -43.340056779660614 };
// // The map, centered at Uluru
// const map = new google.maps.Map(document.getElementById("map"), {
// zoom: 15,
 // center: uluru,
// });
// // The marker, positioned at Uluru
// const marker = new google.maps.Marker({
// position: uluru,
// map: map,
// });
//}
async function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -22.8365822664385, lng: -43.340056779660614 },
zoom: 15,
mapTypeId: "roadmap",
});

initDrawing(map)
initAutocomplete(map)
}
</script>