@extends('layouts.admin')
@section('title','Geovisor Educacion')
@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>
   <link rel="stylesheet" href="css/Leaflet.AnimatedSearchBox.css">
   <link rel="stylesheet" href="js/leaflet-search.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
   {!! Html::style('melody/vendors/iconfonts/font-awesome/css/all.min.css') !!}
    {!! Html::style('melody/vendors/css/vendor.bundle.base.css') !!}
    {!! Html::style('melody/vendors/css/vendor.bundle.addons.css') !!}
    {!! Html::style('melody/css/style.css') !!}
<style type="text/css">
    #map {    
    height: 700px; 
    border: 1px solid #ccc;
    }
</style>
{!! Html::script('https://code.jquery.com/jquery-3.6.0.min.js') !!}
    {!! Html::script('https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin="') !!}
    {!! Html::script('https://cdn.jsdelivr.net/npm/fuse.js@5.0.10-beta/dist/fuse.min.js') !!}
    {!! Html::script('js/Leaflet.AnimatedSearchBox.js') !!}
    {!! Html::script('https://unpkg.com/jquery@3.3.1/dist/jquery.js') !!}
{!! Html::script('https://unpkg.com/leaflet@1.3.0/dist/leaflet.js') !!}
{!! Html::script('js/leaflet-search.js') !!}
@endsection
@section('options')
@endsection
@section('preference')
@endsection
@section('content')
  <div id="map">
        
  </div>
@endsection
@section('scripts')
{!! Html::script('melody/js/data-table.js') !!}
{!! Html::script('https://unpkg.com/leaflet@1.7.1/dist/leaflet.js') !!}
  {!! Html::script('https://cdn.jsdelivr.net/npm/leaflet-ajax/dist/leaflet.ajax.min.js') !!}
{!! Html::script('http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js') !!}
    {!! Html::script('visor/catiline.js') !!}
    {!! Html::script('visor/leaflet.shpfile.js') !!}

    {!! Html::script('leas/example/leaflet-src.js') !!}
{!! Html::script('leas/dist/leaflet.ajax.js') !!}
{!! Html::script('leas/example/spin.js') !!}
{!! Html::script('leas/example/leaflet.spin.js') !!}
{!! Html::script('https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js') !!}

  {!! Html::script('http://code.jquery.com/jquery-2.1.4.min.js') !!}
  {!! Html::script('https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js') !!}
<script>

  
  var m= L.map('map').setView([-15.898893, -64.872554], 6);
var osmDataAttr = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
      var mopt = {
          url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
          options: {attribution:'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
        };
      var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
      var mq=L.tileLayer(mopt.url,mopt.options);

      mq.addTo(m);

      var baseMaps = {
          "Satelital": mq,
          "Open Street Map":osm
      };

function estilomarcador(feature, latlng) {
  return L.circleMarker(latlng, {
    radius: 9.0,
    fillColor: 'blue',
    color: '#FFFFFF',
    weight: 2,
    opacity: 1.0,
    fillOpacity: 1.0
  })
}

var triangulo = L.icon({
    iconUrl: 'http://siot.igmbolivia.gob.bo/limites/public/leas/triangulo.png',
    iconSize: [15, 15]
});


function estiloTriangulo(feature, latlng) {
  return L.marker(latlng, {
    icon: triangulo
  })
};


function popUp(f,l){
    var out = [];
    if (f.properties){
        for(key in f.properties){
            out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
}
var jsonTest = new L.GeoJSON.AJAX("{{$intradepartamentals->trazo}}",{
  style: function (feature) {
    return {
      color: '#D8FF00',
      weight: 4
    };
  },
onEachFeature:popUp});



var jsonpTest = L.geoJson.ajax("{{$intradepartamentals->puntos}}",{onEachFeature:popUp, pointToLayer: estiloTriangulo});

var geojsonLayer = new L.GeoJSON.AJAX("http://siot.igmbolivia.gob.bo/limites/public/lim.geojson", {
  style: function (feature) {
    return {
      color: 'black',
      weight: 2
    };
  },
}).addTo(m);

jsonTest.addTo(m);
var overlays={
"trazo":jsonTest,
"puntos":jsonpTest
}
var lc=L.control.layers(baseMaps,overlays);
lc.addTo(m);
  
map.addControl( controlSearch );
</script>
@endsection