Harita da polygon'u çiziyorum db'ye kaydediyorum ama sayfa da editlemeye girdiğim de polygon çizili gelmiyor
https://i.hizliresim.com/hbq1ucj.png bu şekilde çiziyorum ama işte sayfa yüklenince bir harita tekrar açılmıyor kayıdı değiştirmem gerekiyor 2. de polygonu çizmiyor
db de bu şekilde saklıyorum.
"\"[[[28.945355184937,41.017461342255416],[28.94629932251067,40.996087049591665],[28.985953100586244,41.01661945584914],[28.959774740601034,41.02056975269869],[28.945355184937,41.017461342255416]]]\""
@extends(BaseHelper::getAdminMasterLayoutTemplate())
@section('content')
<link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css" type="text/css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js"></script>
<style>
#map-container {
position: relative;
width: 100%;
height: 400px;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.calculation-box {
height: 75px;
width: 150px;
position: absolute;
bottom: 40px;
left: 10px;
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
text-align: center;
}
p {
font-family: 'Open Sans';
margin: 0;
font-size: 13px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>{{ isset($zoneCoverage) ? __('Satış Bölgesi Kapsamını Düzenle') : __('Yeni Satış Bölgesi Kapsamı') }}</h1>
<form action="{{ isset($zoneCoverage) ? route('sales.zone_coverage.editzone_coverage.update', $zoneCoverage->id) : route('sales.zone_coverage.createzone_coverage.store') }}" method="POST">
@csrf
@if(isset($zoneCoverage))
@method('PUT')
@endif
<div class="form-group">
<label for="sales_regions_id">Satış Bölgesi</label>
<select name="sale_area_id" id="sale_area_id" class="form-control">
<option value="">{{ __('Seçiniz') }}</option>
@foreach($salesRegions as $region)
<option value="{{ $region->id }}" {{ isset($zoneCoverage) && $zoneCoverage->sale_area_id == $region->id ? 'selected' : '' }} data-scope="{{ $region->region_scope }}">{{ $region->name }}</option>
@endforeach
</select>
</div>
<div id="geographical_data_fields" style="display: {{ isset($zoneCoverage) && $zoneCoverage->region_scope == 'geographical_data' ? 'block' : 'none' }};">
<div class="form-group">
<label for="il">İl</label>
<input type="text" name="il" id="il" class="form-control" value="{{ old('il', $zoneCoverage->il ?? '') }}">
</div>
<div class="form-group">
<label for="ilce">İlçe</label>
<input type="text" name="ilce" id="ilce" class="form-control" value="{{ old('ilce', $zoneCoverage->ilce ?? '') }}">
</div>
<div class="form-group">
<label for="mahalle">Mahalle</label>
<input type="text" name="mahalle" id="mahalle" class="form-control" value="{{ old('mahalle', $zoneCoverage->mahalle ?? '') }}">
</div>
</div>
<div id="google_maps_polygon_fields" style="display: {{ isset($zoneCoverage) && $zoneCoverage->region_scope == 'google_maps_polygon' ? 'block' : 'none' }};">
<div id="map-container">
<div id="map"></div>
</div>
<div class="calculation-box">
<p>Click the map to draw a polygon.</p>
<div id="calculated-area"></div>
</div>
</div>
<input type="hidden" name="polygon_coordinates" id="polygon_coordinates" value="{{ old('polygon_coordinates', $zoneCoverage->polygon_coordinates ?? '') }}">
<button type="submit" class="btn btn-success">{{ isset($zoneCoverage) ? __('Güncelle') : __('Kaydet') }}</button>
<a href="{{ route('sales.zone_coverage.index') }}" class="btn btn-danger">{{ __('İptal') }}</a>
</form>
</div>
</div>
</div>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const saleAreaField = document.getElementById('sale_area_id');
const geographicalDataFields = document.getElementById('geographical_data_fields');
const googleMapsPolygonFields = document.getElementById('google_maps_polygon_fields');
saleAreaField.addEventListener('change', function () {
const selectedOption = this.options[this.selectedIndex];
const regionScope = selectedOption.getAttribute('data-scope');
if (regionScope === 'geographical_data') {
geographicalDataFields.style.display = 'block';
googleMapsPolygonFields.style.display = 'none';
} else if (regionScope === 'google_maps_polygon') {
geographicalDataFields.style.display = 'none';
googleMapsPolygonFields.style.display = 'block';
initMap();
} else {
geographicalDataFields.style.display = 'none';
googleMapsPolygonFields.style.display = 'none';
}
});
if (saleAreaField.value) {
const selectedOption = saleAreaField.options[saleAreaField.selectedIndex];
const regionScope = selectedOption.getAttribute('data-scope');
if (regionScope === 'google_maps_polygon') {
initMap();
}
}
function initMap() {
mapboxgl.accessToken = 'pk..';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/satellite-v9', // style URL
center: [28.9784, 41.0082], // starting position [lng, lat]
zoom: 13 // starting zoom
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
},
defaultMode: 'draw_polygon'
});
map.addControl(draw);
map.on('draw.create', updateArea);
map.on('draw.delete', updateArea);
map.on('draw.update', updateArea);
function updateArea(e) {
const data = draw.getAll();
const answer = document.getElementById('calculated-area');
if (data.features.length > 0) {
const area = turf.area(data);
const rounded_area = Math.round(area * 100) / 100;
answer.innerHTML = `<p><strong>${rounded_area}</strong></p><p>square meters</p>`;
document.getElementById('polygon_coordinates').value = JSON.stringify(data.features[0].geometry.coordinates);
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.');
}
}
@if(isset($polygonCoordinates))
const polygonCoordinates = {!! $polygonCoordinates !!};
const polygon = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": polygonCoordinates
}
};
draw.add(polygon);
map.fitBounds(turf.bbox(polygon), { padding: 20 });
@endif
setTimeout(function() {
map.resize();
}, 500);
}
});
</script>
@endsection