You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
48 lines
1.5 KiB
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="card">
|
|
<div class="card-body" id="mapid"></div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('styles')
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
|
|
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
|
|
crossorigin=""/>
|
|
|
|
<style>
|
|
#mapid { min-height: 500px; }
|
|
</style>
|
|
@endsection
|
|
@push('scripts')
|
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
|
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
|
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
|
crossorigin=""></script>
|
|
|
|
<script>
|
|
var map = L.map('mapid').setView(['-3.313695', '114.590148'], 13);
|
|
var baseUrl = "{{ url('/') }}";
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
axios.get('{{ route('api.outlets.index') }}')
|
|
.then(function (response) {
|
|
console.log(response.data);
|
|
L.geoJSON(response.data, {
|
|
pointToLayer: function(geoJsonPoint, latlng) {
|
|
return L.marker(latlng);
|
|
}
|
|
})
|
|
.bindPopup(function (layer) {
|
|
return layer.feature.properties.map_popup_content;
|
|
}).addTo(map);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
</script>
|
|
@endpush
|