1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
| if(isset($_POST['lat'])) { $lat=$_POST['lat'];}
else { $lat="";}
if(isset($_POST['lon'])) { $lon=$_POST['lon'];}
else { $lon="";}
?>
<form method="POST" action="add_site-2">
<div class="container">
<h2>Ajouter un site</h2>
<div class="form-row">
<div class="form-group col-lg-6">
<h4> Localisez tout d'abord votre opération sur la carte ci-dessous (fonds IGN et vue satellite disponible) en cliquant sur l'endroit choisi et en attendant que la page se rafraichisse (Attendre "Localisation OK!) </h4>
<?php
//Carte leaflet
// Requête SQL
$req = "SELECT * FROM site";
if(!$connexion->query($req)) {echo "Pb d'accès au CARNET";}
else {
?>
<div id="mapid" style="margin:auto !important;height:800px; z-index:0; display:inline-block !important; width: 100%;"></div>
<script type="text/javascript">
var mymap = L.map('mapid',{center:[47, 2], zoom: 6});
var carte1 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbDk1ZW8wNTg4NDNrMDh6bTE5ZXBxIn0.uazs_LYFg4-sbqgBwZMqIw'
}).addTo(mymap),
carte2 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.satellite',
accessToken: 'pk.eyJ1IjoiY2xlbWFyY2hlbyIsImEiOiJjanRwbDk1ZW8wNTg4NDNrMDh6bTE5ZXBxIn0.uazs_LYFg4-sbqgBwZMqIw'
});
function layerUrl(key, layer) {
return "http://wxs.ign.fr/" + key
+ "/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&"
+ "LAYER=" + layer + "&STYLE=normal&TILEMATRIXSET=PM&"
+ "TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg";
}
var carte3 = L.tileLayer(
layerUrl(
"fg4kp0ilbj1rp1kopr92lh22", "GEOGRAPHICALGRIDSYSTEMS.MAPS"
),
{attribution: '© <a href="http://www.ign.fr/">IGN</a>'}
);
var myIcon = L.icon({
<?php
echo "iconUrl:'".$chmemin_image."/rond1/',";
?>
iconSize:[10, 10],
popupAnchor:[0,-15],
});
var sites = L.layerGroup().addTo(mymap);
<?php
//définition du popup
foreach ($connexion->query($req) as $row){
$row = array_map($hsc, $row); // échappement de toutes les valeurs
$notice = '<a href='.$chemin_image.'sites/Notice_site?id='.$row['ID_Site'].' target=_blank>Notice</a>';
$donnees= 'L.marker(['.$row['Lat'].', '.$row['Lon'].'],{icon: myIcon}).bindPopup("'.$row['Commune'].'<br>'.$row['Lieu_dit'].'<br>'.$notice.'").addTo(mymap);';
echo $donnees;}
?>
var baseMaps = {
"Vue carte": carte1,
"Vue satellite": carte2,
"Vue IGN" : carte3
};
var overlayMaps = {
"sites": sites
};
L.control.layers(baseMaps, overlayMaps).addTo(mymap);
//Ajout d'un nouveau point et récupération de ses coordonnées
var layerGroup = L.layerGroup()
.addTo(mymap);
mymap.on('click', function (e) {
layerGroup.clearLayers();
var poplocation = e.latlng;
var lat = e.latlng.lat;
var lon = e.latlng.lng;
$.ajax({
url : 'url de cette page qui contient la carte',
method : 'POST',
data : {
lat : lat,
lon : lon
},
success : function( data ) { // en cas de requête réussie
// Je procède à l'insertion
var content = $( data ).find( '#content' ).html();
$( '#content' ).html( content );
//et j'insère le nouveau point
var marker = L.marker([e.latlng.lat, e.latlng.lng])
.addTo(layerGroup);
},
error : function( data ) { // en cas d'échec
// Sinon je traite l'erreur
console.log( 'Erreur
' );
}
});
});
</script>
<?php
}
if (empty($lat)){$latitude='Placeholder="Sélectionnez ci-dessus svp"';} else {$latitude='Value="'.$lat.'"';}
if (empty($lon)){$longitude='Placeholder="Sélectionnez ci-dessus svp"';} else {$longitude='Value="'.$lon.'"';}
?>
<div class="form-row">
<div class="form-group col-md-6"><label>Latitude*</label> : <input type="decimal" class="form-control" name="lat" <?php echo $latitude;?>></div>
<div class="form-group col-md-6"><label>Longitude*</label> : <input type="decimal" class="form-control" name="lon" <?php echo $longitude;?>></div>
</div>
</div> |
Partager