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.
74 lines
2.7 KiB
74 lines
2.7 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=""/>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
|
|
|
<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 src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
|
|
|
|
<script>
|
|
var map = L.map('mapid').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});
|
|
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);
|
|
var markers = L.markerClusterGroup();
|
|
|
|
axios.get('{{ route('api.outlets.index') }}')
|
|
.then(function (response) {
|
|
console.log(response.data);
|
|
var marker = L.geoJSON(response.data, {
|
|
pointToLayer: function(geoJsonPoint, latlng) {
|
|
return L.marker(latlng);
|
|
}
|
|
})
|
|
.bindPopup(function (layer) {
|
|
return layer.feature.properties.map_popup_content;
|
|
});
|
|
markers.addLayer(marker);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
map.addLayer(markers);
|
|
@can('create', new App\Outlet)
|
|
var theMarker;
|
|
|
|
map.on('click', function(e) {
|
|
let latitude = e.latlng.lat.toString().substring(0, 15);
|
|
let longitude = e.latlng.lng.toString().substring(0, 15);
|
|
|
|
if (theMarker != undefined) {
|
|
map.removeLayer(theMarker);
|
|
};
|
|
|
|
var popupContent = "Your location : " + latitude + ", " + longitude + ".";
|
|
popupContent += '<br><a href="{{ route('outlets.create') }}?latitude=' + latitude + '&longitude=' + longitude + '">Add new outlet here</a>';
|
|
|
|
theMarker = L.marker([latitude, longitude]).addTo(map);
|
|
theMarker.bindPopup(popupContent)
|
|
.openPopup();
|
|
});
|
|
@endcan
|
|
</script>
|
|
@endpush
|