import L from 'leaflet';
import axios from "axios";
import { json } from "body-parser";
import { application } from "express";
 
var map = L.map("map",{
    measurecontrol: true,
    center: [17.6868, 83.2185],
    zoom: 10
})
 
var OpenStreetMap_Mapnik = L.tileLayer('https://t...content-available-to-author-only...p.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="https://w...content-available-to-author-only...p.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
 
var wmsurl = 'http://localhost:8080/geoserver/wms'
var mylayer = L.tileLayer.wms(wmsurl,{
    layers: 'web_gis:Final_Lulc',
    format: 'image/png',
    transparent: true
}).addTo(map);
 
map.addEventListener("click",function (e) {
    console.log(e.latlng);
 
    var url = 
    '${wmsurl}?
    request=GetFeatureInfo
    &service=WMS
    &version=1.1.1
    &layers=web_gis:Final_Lulc
    &styles=
    &srs=EPSG%3A4326
    &format=image%2Fpng
    &bbox=${map.getBounds().toBBoxString}
    &width=${map.getSize().x}
    &height=${map.getSize().y}
    &query_layers=web_gis:Final_Lulc
    &info_format=application/json
    &feature_count=50
    &x=${map.latLngToContainerPoint(e.latlng).x}
    &y=${map.latLngToContainerPoint(e.latlng).y}
    &exceptions=application%2Fvnd.ogc.se_xml'
 
    console.log(url);
 
    axios.get(url).then(function(response){
        var jsonresponse = response.data;
        var lulcvalue = jsonresponse.features[0].properties.GRAY_INDEX;
 
        L.popup().setLatLng(e.latlng).setContent("LULC: "+lulcvalue +"rank").openOn(map);
    })
 
})
 

aW1wb3J0IEwgZnJvbSAnbGVhZmxldCc7CmltcG9ydCBheGlvcyBmcm9tICJheGlvcyI7CmltcG9ydCB7IGpzb24gfSBmcm9tICJib2R5LXBhcnNlciI7CmltcG9ydCB7IGFwcGxpY2F0aW9uIH0gZnJvbSAiZXhwcmVzcyI7Cgp2YXIgbWFwID0gTC5tYXAoIm1hcCIsewogICAgbWVhc3VyZWNvbnRyb2w6IHRydWUsCiAgICBjZW50ZXI6IFsxNy42ODY4LCA4My4yMTg1XSwKICAgIHpvb206IDEwCn0pCgp2YXIgT3BlblN0cmVldE1hcF9NYXBuaWsgPSBMLnRpbGVMYXllcignaHR0cHM6Ly90Li4uY29udGVudC1hdmFpbGFibGUtdG8tYXV0aG9yLW9ubHkuLi5wLm9yZy97en0ve3h9L3t5fS5wbmcnLCB7CgltYXhab29tOiAxOSwKCWF0dHJpYnV0aW9uOiAnJmNvcHk7IDxhIGhyZWY9Imh0dHBzOi8vdy4uLmNvbnRlbnQtYXZhaWxhYmxlLXRvLWF1dGhvci1vbmx5Li4ucC5vcmcvY29weXJpZ2h0Ij5PcGVuU3RyZWV0TWFwPC9hPiBjb250cmlidXRvcnMnCn0pLmFkZFRvKG1hcCk7Cgp2YXIgd21zdXJsID0gJ2h0dHA6Ly9sb2NhbGhvc3Q6ODA4MC9nZW9zZXJ2ZXIvd21zJwp2YXIgbXlsYXllciA9IEwudGlsZUxheWVyLndtcyh3bXN1cmwsewogICAgbGF5ZXJzOiAnd2ViX2dpczpGaW5hbF9MdWxjJywKICAgIGZvcm1hdDogJ2ltYWdlL3BuZycsCiAgICB0cmFuc3BhcmVudDogdHJ1ZQp9KS5hZGRUbyhtYXApOwoKbWFwLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIixmdW5jdGlvbiAoZSkgewogICAgY29uc29sZS5sb2coZS5sYXRsbmcpOwoKICAgIHZhciB1cmwgPSAKICAgICcke3dtc3VybH0/CiAgICByZXF1ZXN0PUdldEZlYXR1cmVJbmZvCiAgICAmc2VydmljZT1XTVMKICAgICZ2ZXJzaW9uPTEuMS4xCiAgICAmbGF5ZXJzPXdlYl9naXM6RmluYWxfTHVsYwogICAgJnN0eWxlcz0KICAgICZzcnM9RVBTRyUzQTQzMjYKICAgICZmb3JtYXQ9aW1hZ2UlMkZwbmcKICAgICZiYm94PSR7bWFwLmdldEJvdW5kcygpLnRvQkJveFN0cmluZ30KICAgICZ3aWR0aD0ke21hcC5nZXRTaXplKCkueH0KICAgICZoZWlnaHQ9JHttYXAuZ2V0U2l6ZSgpLnl9CiAgICAmcXVlcnlfbGF5ZXJzPXdlYl9naXM6RmluYWxfTHVsYwogICAgJmluZm9fZm9ybWF0PWFwcGxpY2F0aW9uL2pzb24KICAgICZmZWF0dXJlX2NvdW50PTUwCiAgICAmeD0ke21hcC5sYXRMbmdUb0NvbnRhaW5lclBvaW50KGUubGF0bG5nKS54fQogICAgJnk9JHttYXAubGF0TG5nVG9Db250YWluZXJQb2ludChlLmxhdGxuZykueX0KICAgICZleGNlcHRpb25zPWFwcGxpY2F0aW9uJTJGdm5kLm9nYy5zZV94bWwnCgogICAgY29uc29sZS5sb2codXJsKTsKCiAgICBheGlvcy5nZXQodXJsKS50aGVuKGZ1bmN0aW9uKHJlc3BvbnNlKXsKICAgICAgICB2YXIganNvbnJlc3BvbnNlID0gcmVzcG9uc2UuZGF0YTsKICAgICAgICB2YXIgbHVsY3ZhbHVlID0ganNvbnJlc3BvbnNlLmZlYXR1cmVzWzBdLnByb3BlcnRpZXMuR1JBWV9JTkRFWDsKCiAgICAgICAgTC5wb3B1cCgpLnNldExhdExuZyhlLmxhdGxuZykuc2V0Q29udGVudCgiTFVMQzogIitsdWxjdmFsdWUgKyJyYW5rIikub3Blbk9uKG1hcCk7CiAgICB9KQoKfSkK