@extends('layouts.app')

@section('link')
    <link href="{{ asset('css/theme.default.css') }}" rel="stylesheet">
    
    
    <link href="{{ asset('css/leaflet.css') }}" rel="stylesheet">
    <link href="{{ asset('css/MarkerCluster.css') }}" rel="stylesheet">
    <link href="{{ asset('css/MarkerCluster.Default.css') }}" rel="stylesheet">
    
      	<style type="text/css">

    	#mymap {

      		border:1px solid red;

      		width: 100%;

      		height: 870px;

    	}

  	</style>
@endsection


@section('content')
 <button class="btn btn-primary back-btn" onclick="window.history.back()">{{__('texte.objects_arr.show.back')}}</button>
  <div id="mymap"></div>
  




<script src="{{ asset('js/leaflet.js') }}"></script>
<script src="{{ asset('js/leaflet.markercluster.js') }}"></script>

  <script type="text/javascript">
    var locations = <br />
<b>Notice</b>:  Undefined variable: filtered_objects in <b>D:\dev\sklad\resources\views\objects\show_map.blade.php</b> on line <b>39</b><br />
null;
      
	
    var map = L.map('mymap',{
        center: [43.251061, 27.855555],
        zoom: 9
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    var googleIcon = L.icon({
        iconUrl: 'images/pin-icon-png-9.jpg',
        iconSize: [50, 50], // size of the icon
        });
    
    var markers = L.markerClusterGroup();
    
    for(var i=0;i<locations.length;i++){
        var marker = L.marker([locations[i].gps_lat, locations[i].gps_lng], {icon: googleIcon}).bindPopup('Контрагент - <a href="contragents/'+ locations[i].contragent_id +'">' + locations[i].contragent_name + '</a>.<br /> Обект - <a href="objects/'+ locations[i].id +'">' + locations[i].object_name + '</a>');
        markers.addLayer(marker);
    }
    
    map.addLayer(markers);
    
    //var group = new L.featureGroup([markers]);

    //map.fitBounds(group.getBounds());
    
  </script>
@endsection