Merge branch 'interactive-outlet-coordinate-input'

7 years ago · d57f9b276a
6 changed files with 113 additions and 30 deletions
--- a/public/images/marker-icon-green.png
+++ b/public/images/marker-icon-green.png
--- a/public/images/marker-shadow.png
+++ b/public/images/marker-shadow.png
--- a/resources/views/outlets/create.blade.php
+++ b/resources/views/outlets/create.blade.php
@ -36,6 +36,7 @@
                            </div>
                        </div>
                    </div>
+                    <div id="mapid"></div>
                </div>
                <div class="card-footer">
                    <input type="submit" value="{{ __('outlet.create') }}" class="btn btn-success">
@ -46,3 +47,50 @@
    </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 { height: 300px; }
+</style>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+    crossorigin=""></script>
+<script>
+    var mapCenter = ['-3.313695', '114.590148'];
+    var map = L.map('mapid').setView(mapCenter, 13);
+
+    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 marker = L.marker(mapCenter).addTo(map);
+    function updateMarker(lat, lng) {
+        marker
+        .setLatLng([lat, lng])
+        .bindPopup("Your location :  " + marker.getLatLng().toString())
+        .openPopup();
+        return false;
+    };
+
+    map.on('click', function(e) {
+        let latitude = e.latlng.lat.toString().substring(0, 15);
+        let longitude = e.latlng.lng.toString().substring(0, 15);
+        $('#latitude').val(latitude);
+        $('#longitude').val(longitude);
+        updateMarker(latitude, longitude);
+    });
+
+    var updateMarkerByInputs = function() {
+        return updateMarker( $('#latitude').val() , $('#longitude').val());
+    }
+    $('#latitude').on('input', updateMarkerByInputs);
+    $('#longitude').on('input', updateMarkerByInputs);
+</script>
+@endpush
--- a/resources/views/outlets/edit.blade.php
+++ b/resources/views/outlets/edit.blade.php
@ -48,17 +48,24 @@
                        <textarea id="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" name="address" rows="4">{{ old('address', $outlet->address) }}</textarea>
                        {!! $errors->first('address', '<span class="invalid-feedback" role="alert">:message</span>') !!}
                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="latitude" class="control-label">{{ __('outlet.latitude') }}</label>
                                <input id="latitude" type="text" class="form-control{{ $errors->has('latitude') ? ' is-invalid' : '' }}" name="latitude" value="{{ old('latitude', $outlet->latitude) }}" required>
                                {!! $errors->first('latitude', '<span class="invalid-feedback" role="alert">:message</span>') !!}
                            </div>
+                        </div>
+                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="longitude" class="control-label">{{ __('outlet.longitude') }}</label>
                                <input id="longitude" type="text" class="form-control{{ $errors->has('longitude') ? ' is-invalid' : '' }}" name="longitude" value="{{ old('longitude', $outlet->longitude) }}" required>
                                {!! $errors->first('longitude', '<span class="invalid-feedback" role="alert">:message</span>') !!}
                            </div>
                        </div>
+                    </div>
+                    <div id="mapid"></div>
+                </div>
                <div class="card-footer">
                    <input type="submit" value="{{ __('outlet.update') }}" class="btn btn-success">
                    <a href="{{ route('outlets.show', $outlet) }}" class="btn btn-link">{{ __('app.cancel') }}</a>
@ -72,3 +79,50 @@
 </div>
@endif
@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: 300px; }
+</style>
+@endsection
+
+@push('scripts')
+<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+    crossorigin=""></script>
+<script>
+    var mapCenter = [{{ $outlet->latitude }}, {{ $outlet->longitude }}];
+    var map = L.map('mapid').setView(mapCenter, 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 marker = L.marker(mapCenter).addTo(map);
+    function updateMarker(lat, lng) {
+        marker
+        .setLatLng([lat, lng])
+        .bindPopup("Your location :  " + marker.getLatLng().toString())
+        .openPopup();
+        return false;
+    };
+
+    map.on('click', function(e) {
+        let latitude = e.latlng.lat.toString().substring(0, 15);
+        let longitude = e.latlng.lng.toString().substring(0, 15);
+        $('#latitude').val(latitude);
+        $('#longitude').val(longitude);
+        updateMarker(latitude, longitude);
+    });
+
+    var updateMarkerByInputs = function() {
+        return updateMarker( $('#latitude').val() , $('#longitude').val());
+    }
+    $('#latitude').on('input', updateMarkerByInputs);
+    $('#longitude').on('input', updateMarkerByInputs);
+</script>
+@endpush
--- a/resources/views/outlets/map.blade.php
+++ b/resources/views/outlets/map.blade.php
@ -34,16 +34,7 @@
        console.log(response.data);
        L.geoJSON(response.data, {
            pointToLayer: function(geoJsonPoint, latlng) {
-                var myIcon = L.icon({
-                    iconUrl: baseUrl + '/images/marker-icon-green.png',
-                    shadowUrl: baseUrl + '/images/marker-shadow.png',
-                    iconSize: [25, 41],
-                    iconAnchor: [12, 41],
-                    popupAnchor: [1, -34],
-                    shadowSize: [41, 41],
-                    className: 'marker-icon-green',
-                });
-                return L.marker(latlng, { icon: myIcon });
+                return L.marker(latlng);
            }
        })
        .bindPopup(function (layer) {
--- a/resources/views/outlets/show.blade.php
+++ b/resources/views/outlets/show.blade.php
@ -61,17 +61,7 @@
        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)
+    L.marker([{{ $outlet->latitude }}, {{ $outlet->longitude }}]).addTo(map)
        .bindPopup('{!! $outlet->map_popup_content !!}');
 </script>
@endpush