odon
/
laravel-leaflet-example
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'outlet-map-view'

pull/3/head
Nafies Luthfi 7 years ago
parent
281e913e8d 36d12dce47
commit
d9825c5e01
8 changed files with 103 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      app/Outlet.php
  2. BIN
      public/images/marker-icon-green.png
  3. BIN
      public/images/marker-shadow.png
  4. 2
      resources/lang/en/outlet.php
  5. 7
      resources/views/layouts/app.blade.php
  6. 2
      resources/views/outlets/index.blade.php
  7. 48
      resources/views/outlets/show.blade.php
  8. 31
      tests/Unit/Models/OutletTest.php

16
app/Outlet.php
View File

@ -28,4 +28,20 @@ class Outlet extends Model
{ {
return $this->belongsTo(User::class); return $this->belongsTo(User::class);
} }
public function getCoordinateAttribute()
{
if ($this->latitude && $this->longitude) {
return $this->latitude.', '.$this->longitude;
}
}
public function getMapPopupContentAttribute()
{
$mapPopupContent = '';
$mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.name').':</strong><br>'.$this->name.'</div>';
$mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.coordinate').':</strong><br>'.$this->coordinate.'</div>';
return $mapPopupContent;
}
} }

BIN
public/images/marker-icon-green.png
View File

Side by Side

After

Width: 25  |  Height: 41  |  Size: 1.8 KiB

BIN
public/images/marker-shadow.png
View File

Side by Side

After

Width: 41  |  Height: 41  |  Size: 608 B

2
resources/lang/en/outlet.php
View File

@ -32,4 +32,6 @@ return [
'address' => 'Outlet Address', 'address' => 'Outlet Address',
'latitude' => 'Latitude', 'latitude' => 'Latitude',
'longitude' => 'Longitude', 'longitude' => 'Longitude',
'location' => 'Location',
'coordinate' => 'Coordinate',
]; ];

7
resources/views/layouts/app.blade.php
View File

@ -9,15 +9,13 @@
<title>{{ config('app.name', 'Laravel') }}</title> <title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts --> <!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com"> <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles --> <!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
@yield('styles')
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@ -79,5 +77,8 @@
@yield('content') @yield('content')
</main> </main>
</div> </div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body> </body>
</html> </html>

2
resources/views/outlets/index.blade.php
View File

@ -45,9 +45,7 @@
<td>{{ $outlet->latitude }}</td> <td>{{ $outlet->latitude }}</td>
<td>{{ $outlet->longitude }}</td> <td>{{ $outlet->longitude }}</td>
<td class="text-center"> <td class="text-center">
@can('view', $outlet)
<a href="{{ route('outlets.show', $outlet) }}" id="show-outlet-{{ $outlet->id }}">{{ __('app.show') }}</a> <a href="{{ route('outlets.show', $outlet) }}" id="show-outlet-{{ $outlet->id }}">{{ __('app.show') }}</a>
@endcan
</td> </td>
</tr> </tr>
@endforeach @endforeach

48
resources/views/outlets/show.blade.php
View File

@ -25,5 +25,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="card">
<div class="card-header">{{ trans('outlet.location') }}</div>
@if ($outlet->coordinate)
<div class="card-body" id="mapid"></div>
@else
<div class="card-body">{{ __('outlet.no_coordinate') }}</div>
@endif
</div>
</div>
</div> </div>
@endsection @endsection
@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<style>
#mapid { height: 400px; }
.popup-content-row { margin: 6px 0; }
</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([{{ $outlet->latitude }}, {{ $outlet->longitude }}], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var myIcon = L.icon({
iconUrl: "{{ url('images/marker-icon-green.png') }}",
shadowUrl: "{{ url('images/marker-shadow.png') }}",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
className: "marker-icon-green",
});
L.marker([{{ $outlet->latitude }}, {{ $outlet->longitude }}], { icon: myIcon }).addTo(map)
.bindPopup('{!! $outlet->map_popup_content !!}');
</script>
@endpush

31
tests/Unit/Models/OutletTest.php
View File

@ -4,15 +4,15 @@ namespace Tests\Unit\Models;
use App\User; use App\User;
use App\Outlet; use App\Outlet;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Tests\BrowserKitTest as TestCase; use Tests\BrowserKitTest as TestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;
class OutletTest extends TestCase class OutletTest extends TestCase
{ {
use DatabaseMigrations; use DatabaseMigrations;
/** @test */ /** @test */
public function a_outlet_has_name_link_attribute()
public function an_outlet_has_name_link_attribute()
{ {
$outlet = factory(Outlet::class)->create(); $outlet = factory(Outlet::class)->create();
@ -28,11 +28,36 @@ class OutletTest extends TestCase
} }
/** @test */ /** @test */
public function a_outlet_has_belongs_to_creator_relation()
public function an_outlet_has_belongs_to_creator_relation()
{ {
$outlet = factory(Outlet::class)->make(); $outlet = factory(Outlet::class)->make();
$this->assertInstanceOf(User::class, $outlet->creator); $this->assertInstanceOf(User::class, $outlet->creator);
$this->assertEquals($outlet->creator_id, $outlet->creator->id); $this->assertEquals($outlet->creator_id, $outlet->creator->id);
} }
/** @test */
public function an_outlet_has_coordinate_attribute()
{
$outlet = factory(Outlet::class)->make(['latitude' => '-3.333333', 'longitude' => '114.583333']);
$this->assertEquals($outlet->latitude.', '.$outlet->longitude, $outlet->coordinate);
$outlet = factory(Outlet::class)->make(['latitude' => null, 'longitude' => null]);
$this->assertNull($outlet->coordinate);
$outlet = factory(Outlet::class)->make(['latitude' => null, 'longitude' => '114.583333']);
$this->assertNull($outlet->coordinate);
}
/** @test */
public function an_outlet_has_map_popup_content_attribute()
{
$outlet = factory(Outlet::class)->make(['lat' => '-3.333333', 'long' => '114.583333']);
$mapPopupContent = '';
$mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.name').':</strong><br>'.$outlet->name.'</div>';
$mapPopupContent .= '<div class="my-2"><strong>'.__('outlet.coordinate').':</strong><br>'.$outlet->coordinate.'</div>';
$this->assertEquals($mapPopupContent, $outlet->map_popup_content);
}
} }
Write Preview
Loading…
Cancel
Save