@extends ('layouts.master')
@section('css')
<link href="{{ url('/leaflet/leaflet.css') }}" rel="stylesheet">
<style>
    #mapid{
        width: 100%;
        height: 500px;
    }
</style>
@endsection
@section('content')
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">
                <em class="fa fa-map"></em>
            </a></li>
            <li class="active">Peta Persebaran</li>
        </ol>
    </div><!--/.row-->
    
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Peta Persebaran</h1>
        </div>
    </div><!--/.row-->
    <div class="row">      
        <div class="col-md-12">
            <div class="panel panel-default ">
                <div class="panel-body timeline-container">
                <div id="mapid"></div>
                </div>
            </div>
        </div><!--/.col-->
        
    </div><!--/.row-->
</div>	<!--/.main-->
@endsection
@section('js')
<script src="{{ url('/leaflet/leaflet.js') }}"></script>
<script>
    var map = L.map('mapid', {
    center: [-7.842751, 112.016187],
    zoom: 13
    });
    var imageUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var citra = L.tileLayer(imageUrl,{maxZoom: 22}).addTo(map);
    var jsondata = $.ajax({type: "GET", url: "{{ url('/data_mark') }}", async: false}).responseJSON;
    var marker;
    $.each(jsondata,function(index, value){
        var infoW = '<div class="row">'+
                        '<div class="col-lg-12">'+
                            '<h4>'+value.nama_rumah+'</h4>'+
                            '<h5>'+value.nama_gedung+'</h5>'+
                            "<a href='../data/gedung/detail/"+value.id_gedung+"' class='btn btn-info btn-sm' title='Detail'> Detail </a>"+
                        '</div>'+
                    '</div>';
        marker = L.marker([value.lati, value.longi]).bindPopup(infoW, {maxWidth: 500}).openPopup().addTo(map);
    });
</script>
@endsection