DGNum/experiENS
6
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Ajout de lieu presque fonctionnel

Browse source
This commit is contained in:
Evarin 2017-04-17 00:00:41 +02:00
parent 8550776fab
commit 3b030aef70
5 changed files with 127 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
avisstage/static/images/marker-blue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
avisstage/static/images/marker-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
avisstage/static/images/marker-red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
avisstage/static/images/markers-soft.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

157
avisstage/templates/avisstage/formulaires/lieu_raw.html
View file

@ -11,6 +11,7 @@
<link rel="stylesheet" type="text/css" href="{% static "css/leaflet.css" %}" />
{% endblock %}
<p><input id="addlieu" type="text" placeholder="Chercher un établissement" /></p>
<div id="map_addlieu"></div>
<div id="candidats"></div>
@ -29,42 +30,138 @@
<input type="submit" />
<script type="text/javascript">
$(function(){
var map = L.map('map_addlieu').setView([51.505, -0.09], 13);
var STATIC_ROOT = "{{ STATIC_URL }}";
// Affiche la carte
var map = L.map('map_addlieu').setView([48.8422411,2.3430553], 13);
var layer = new L.StamenTileLayer("terrain");
map.addLayer(layer);
var mainmarker;
var propositions = [];
new L.Control.GPlaceAutocomplete({
position: "topleft",
callback: function(place){
// object of google place is given
var location = {lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()};
map.panTo(location);
if(mainmarker===undefined)
mainmarker = L.marker(location, {draggable:true}).addTo(map);
else
mainmarker.setLatLng(location);
console.log(place);
$.getJSON("/api/v1/lieu/", {"format":"json",
"lat":location.lat,
"lng":location.lng}, showPropositions);
}
})
.addTo(map);
// Autocomplete
var input = document.getElementById('addlieu');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setTypes(["geocode", "establishment"]);
autocomplete.addListener('place_changed', handlePlaceSearch);
function showPropositions(data) {
$.each(propositions, function(i, item) { item.remove(); });
propositions = [];
$.each(data.objects, function(i, item) {
var mark = L.marker([item.coord.lat, item.coord.lng]);
mark.addTo(map).bindPopup("<b>"+item.nom+"</b><br />"+
item.ville+", "+item.pays);
propositions.push(mark);
// Préparation de la suite
var mainmarker;
var suggestion_actuelle;
var propositions_data = [];
var propositions_markers = [];
var choix_actuel;
// Icones
var iconProps = {
iconSize: [36, 46],
iconAnchor: [18, 45],
popupAnchor: [0, -48]
};
var greenIcon = L.icon($.extend({}, iconProps, {iconUrl: STATIC_ROOT + 'images/marker-green.png'}));
var redIcon = L.icon($.extend({}, iconProps, {iconUrl: STATIC_ROOT + 'images/marker-red.png'}));
var blueIcon = L.icon($.extend({}, iconProps, {iconUrl: STATIC_ROOT + 'images/marker-blue.png'}));
// Callback autocomplete
function handlePlaceSearch() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("No details available for input: '" + place.name + "'");
return;
}
// Processing du lieu
var data = {};
$.each(place.address_components, function(i, obj) {
for (var j=0; j<obj.types.length; j++) {
switch(obj.types[j]) {
case "locality":
data.ville = obj.long_name;
break;
case "country":
data.pays = obj.short_name;
break;
}
}
});
data.nom = place.name;
data.coord = {lng: place.geometry.location.lng(),
lat: place.geometry.location.lat()};
data.orig_coord = data.coord;
suggestion_actuelle = data;
console.log(place);
var location = data.coord;
map.panTo(location);
if(mainmarker===undefined) {
mainmarker = L.marker(location,
{draggable: true,
icon: redIcon}).addTo(map);
mainmarker.on("dragend", refreshSuggestedPosition);
} else
mainmarker.setLatLng(location);
mainmarker.bindPopup(popupText(data, ""));
// Affichage des suggestions
$.getJSON("/api/v1/lieu/", {"format":"json",
"lat":location.lat,
"lng":location.lng}, showPropositions);
}
// Callback suggestions
function showPropositions(data) {
// TODO gérer les appels concurrents
$.each(propositions_markers, function(i, item) { item.remove(); });
propositions_markers = [];
propositions_data = data.objects;
$.each(data.objects, function(i, item) {
var mark = L.marker([item.coord.lat, item.coord.lng],
{icon: blueIcon});
mark.addTo(map).bindPopup(popupText(item, i));
propositions_markers.push(mark);
});
}
function popupText(data, ilieu) {
var desc = "<div><b>" + data.nom +"</b><br />"+data.ville+", "+data.pays+"<br />";
if(ilieu !== "") {
desc += "<a href=\"javascript:choixLieuStage("+ilieu+")\">Choisir ce lieu</a></div>"
} else {
desc += "<a href=\"javascript:restoreSuggestedPosition()\">Restaurer la position originale</a><br/>"
desc += "<a href=\"javascript:choixLieuStage()\">Créer un nouveau lieu</a></div>"
}
return desc;
}
function refreshSuggestedPosition() {
var coord = mainmarker.getLatLng();
suggestion_actuelle.coord = {lat:coord.lat, lng:coord.lng};
if (choix_actuel == suggestion_actuelle) {
$("#id_coord_0").val(choix_actuel.coord.lat);
$("#id_coord_1").val(choix_actuel.coord.lng);
}
}
window.restoreSuggestedPosition = function() {
mainmarker.setLatLng(suggestion_actuelle.orig_coord);
refreshSuggestedPosition();
}
window.choixLieuStage = function(ilieu) {
var choix;
if(ilieu === undefined)
choix = suggestion_actuelle;
else
choix = propositions_data[ilieu];
$("#id_nom").val(choix.nom);
$("#id_ville").val(choix.ville);
$("#id_pays").val(choix.pays);
$("#id_coord_0").val(choix.coord.lat);
$("#id_coord_1").val(choix.coord.lng);
choix_actuel = choix;
}
});
</script>
</script>
</form>