Commit 000a9ac3 authored by Hypsug0's avatar Hypsug0
Browse files

generalyze axiosjs and improve add legend display/collapse on mouseove

parent f64da3b7
This diff is collapsed.
......@@ -9,27 +9,30 @@
.leaflet-container-default {
min-height: 800px;
}
.legend {
padding: 6px 8px;
font: 14px "LatoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
line-height: 24px;
color: #555;
padding: 6px 8px;
font: 14px "LatoRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
line-height: 24px;
color: #555;
}
.legend span {
position: relative;
bottom: 3px;
position: relative;
bottom: 3px;
}
.legend i {
width: 16px;
height: 16px;
float: left;
margin: 0 8px 0 0;
opacity: 0.7;
border-radius: 50%;
width: 16px;
height: 16px;
float: left;
margin: 0 8px 0 0;
opacity: 0.7;
border-radius: 50%;
}
</style>
......@@ -99,12 +102,28 @@
</div>
<script type="text/javascript">
var dataurl = '{% url "api:geodata_place" %}';
var metaplace_dataurl = '{% url "api:geodata_metaplaces" %}';
var circlemarker = null;
var placeBaseUrl = '/place/bbox/api/search';
var metaplaceBaseUrl = '/metaplace/api/search';
function showDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = '<i style="background: #ff4c41"></i><span>Localisation simple</span><br/>';
div.innerHTML += '<i style="background: #8A2BE2"></i><span>Localisation sur un métasite</span><br/>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br/>';
}
function hideDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = "<b class='fa fa-info-circle'></b>";
}
window.addEventListener("map:init", function (event) {
var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyDistanceMultiplier: 3, maxClusterRadius: 14});
var markers = L.markerClusterGroup({
chunkedLoading: true,
spiderfyDistanceMultiplier: 3,
maxClusterRadius: 14
});
var style_data = {
radius: 6,
......@@ -115,7 +134,7 @@
fillOpacity: 0.8
};
var style_data_metasite = {
var style_data_metasite = {
radius: 6,
fillColor: "#8A2BE2",
color: "#ddd",
......@@ -132,13 +151,14 @@
fillOpacity: 0.2
};
var map = event.detail.map;
map.spin(true);
// Fonction plein écran
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
......@@ -166,67 +186,169 @@
}));
// Add legend
let legend = L.control({ position: "bottomleft" });
legend.onAdd = function(map) {
let div = L.DomUtil.create("div", "legend");
div.innerHTML += '<i style="background: #ff4c41"></i><span>Localisation simple</span><br>';
div.innerHTML += '<i style="background: #8A2BE2"></i><span>Localisation sur un métasite</span><br>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br>';
return div;
let legend = L.control({position: "bottomleft"});
legend.onAdd = function (map) {
let div = L.DomUtil.create("div", "info legend");
div.setAttribute("onmouseenter", "showDisclaimer()");
div.setAttribute("onmouseleave", "hideDisclaimer()");
div.id = "info legend"
div.innerHTML = "<b class='fa fa-info-circle'></b>";
return div;
};
legend.addTo(map);
// Download GeoJSON data with Ajax
fetch(dataurl, {
credentials: "include"
})
.then(function (resp) {
return resp.json();
var locationLayer = Object;
let overlayText = L.control({position: "topright"});
overlayText.onAdd = function (map) {
let div = L.DomUtil.create("div", "zoomInfo");
div.innerHTML += '<p class="label label-primary">Zoomez pour afficher les données</p>';
return div;
};
overlayText.addTo(map);
let cancelPlaceSearchRequest;
const loadPlaces = function () {
// Download GeoJSON data with Ajax
markers.clearLayers();
map.spin(true);
var dataBboxUrl = placeBaseUrl + '?format=json&in_bbox=' + map.getBounds().toBBoxString();
if (cancelPlaceSearchRequest) {
// Cancel the previous request before making a new request
cancelPlaceSearchRequest.cancel();
}
// Create a new CancelToken
cancelPlaceSearchRequest = axios.CancelToken.source();
$http.get(dataBboxUrl, {
progress: true,
cancelToken: cancelPlaceSearchRequest.token
})
.then(function (resp) {
console.log('<loadPlaces respJson>', resp);
if (resp.status == 200) {
return resp.data;
}
})
.catch(function (error) {
// handle error
if (error.__CANCEL__) {
console.log('<loadPlaces axios error> cancelled request')
} else {
console.log('<loadPlaces Axios error>', error);
}
})
.then(function (data) {
if (data.results) {
locationLayer = L.geoJson(data.results, {
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = '<h3>Site&nbsp;:&nbsp;'
+ props.name
+ '</h3><p><ul><li><b>Type</b>: '
+ (props.type_data ? props.type_data.descr : "Non défini")
+ '</li><li><b>Nombre de sessions</b> '
+ (props.total_sessions ? props.total_sessions : "Aucune")
+ '&nbsp;(Dernière: '
+ (props.last_session ? props.last_session.date_start__max : "Aucune")
+ ')</li></ul> </p><div class="text-right"><div class="btn-group" role="group"><a type="button" class="btn btn-default btn-sm" align="center" style="color:white;" href="/place/'
+ feature.id
+ '/detail" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a><a type="button" class="btn btn-info btn-sm" align="center" style="color:white;" href="/place/'
+ feature.id
+ '/update" target="_blank"><i class="fa fa-fw fa-edit"></i></a></div></div>';
layer.bindPopup(content);
}
,
pointToLayer: function (feature, latlng) {
// Set a different color if location is in a metaplace
if (feature.properties.metaplace) {
return L.circleMarker(latlng, style_data_metasite);
}
return L.circleMarker(latlng, style_data);
}
});
markers.addLayer(locationLayer).addTo(map).bringToFront();
}
}
)
.catch(function (error) {
console.log('<loadPlace leaflet error>', error);
})
.then(function () {
map.spin(false);
});
}
;
// Download GeoJSON data with Axios
let cancelMetaPlaceSearchRequest;
loadMetaPlace = function () {
if (cancelMetaPlaceSearchRequest) {
// Cancel the previous request before making a new request
cancelMetaPlaceSearchRequest.cancel();
}
// Create a new CancelToken
cancelMetaPlaceSearchRequest = axios.CancelToken.source();
$http.get(metaplaceBaseUrl + '?format=json', {
progress: true,
cancelToken: cancelMetaPlaceSearchRequest.token
})
.then(function (data) {
var locationLayer = L.geoJson(data, {
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = `<a class="btn btn-primary btn-sm btn-block" align="center" style="color:white;" href="/place/${props.pk}/detail" target="_blank" style="font-color:white"><strong>${props.name}</strong></a>`;
layer.bindPopup(content);
}
,
pointToLayer: function (feature, latlng) {
// Set a different color if location is in a metaplace
if (feature.properties.metaplace) {
return L.circleMarker(latlng, style_data_metasite);
.then(function (resp) {
return resp.data;
})
.catch(function (error) {
// handle error
console.log('<loadMetaPlace Axios error>', error);
})
.then(function (data) {
L.geoJSON(data, {
style: polygon_style,
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = '<h3>MetaSite&nbsp;:&nbsp;'
+ props.name
+ '</h3><p><ul><li><b>Type</b>: '
+ (props.type_data ? props.type_data.descr : "Non défini")
+ '</li></ul> </p><div class="text-right"><div class="btn-group" role="group"><a type="button" class="btn btn-default btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/detail" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a><a type="button" class="btn btn-info btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/update" target="_blank"><i class="fa fa-fw fa-edit"></i></a></div></div>';
layer.bindPopup(content);
}
return L.circleMarker(latlng, style_data);
}
}).addTo(map).bringToBack();
})
.catch(function (error) {
console.log('loadMetaPlace Leaflet error', error);
})
.then(function () {
map.spin(false);
});
markers.addLayer(locationLayer).addTo(map).bringToFront();
})
.then(function () {
map.spin(false);
});
// Download GeoJSON data with Ajax
fetch(metaplace_dataurl, {credentials: "include"})
.then(function (resp) {
return resp.json();
})
.then(function (data) {
L.geoJSON(data, {
style: polygon_style,
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = `<a class="btn btn-primary btn-sm btn-block" align="center" style="color:white;" href="/metaplace/${props.pk}/detail" target="_blank" style="font-color:white"><strong>${props.name}</strong></a>`;
layer.bindPopup(content);
}
}).addTo(map).bringToBack();
})
.then(function () {
map.spin(false);
})
.catch(function (error) {
console.log(error);
});
};
var debounce = null;
loadMetaPlace();
map.on('moveend', function () {
var currZoom = map.getZoom();
if (currZoom >= 13) {
map.removeControl(overlayText);
markers.clearLayers();
clearTimeout(debounce);
debounce = setTimeout(loadPlaces, 1000);
} else {
markers.clearLayers();
overlayText.addTo(map);
}
});
var handler = function (e) {
var position = e.currentTarget.getAttribute('data-position');
......@@ -269,4 +391,4 @@
});
</script>
{% endblock %}
\ No newline at end of file
{% endblock %}
This diff is collapsed.
......@@ -46,7 +46,8 @@
}
</style>
<h1><i class="{{ icon | safe }}"></i> {{ title | safe }}</h1>
<h1><a href="{% url 'sights:place_create' %}" class="btn btn-primary pull-right"><i
class="fa fa-fw fa-map-marker-alt"></i>{% trans 'Créer une localité' %}</a><i class="{{ icon | safe }}"></i> {{ title | safe }}</h1>
{% comment %}Tableau de recherche avec filtrage {% endcomment %}
<div class="col-sm-12 col-md-6 col-lg-7">
......@@ -161,25 +162,45 @@
<script>
var dataUrl = "/place/api/search?format=json";
function showDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = '<i style="background: #ff4c41"></i><span>Localisation simple</span><br/>';
div.innerHTML += '<i style="background: #8A2BE2"></i><span>Localisation sur un métasite</span><br/>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br/>';
}
function hideDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = "<b class='fa fa-info-circle'></b>";
}
$(document).ready(function () {
function format(d) {
var dataArray = [];
if (d.properties.last_session != null) {
if (d.properties.last_session != null && d.properties.last_session.date_start__max!= null) {
dataArray.push('<strong>Dernière session</strong>&nbsp;:&nbsp;' + d.properties.last_session.date_start__max)
}
if (d.properties.contact != null) {
if (d.properties.contact != null && d.properties.contact.contacts != "") {
dataArray.push('<strong>Types d&quot;observations</strong>&nbsp;:&nbsp;' + d.properties.contact.contacts)
}
if (d.properties.comment != null) {
dataArray.push('<strong>Commentaire</strong>&nbsp;:&nbsp;' + d.properties.comment)
}
if (d.properties.is_managed != null) {
if (d.properties.is_managed) {
dataArray.push('<strong>Site géré</strong>')
}
if (d.properties.convention != null) {
if (d.properties.convention) {
dataArray.push('<strong>Convention refuge</strong>')
}
return dataArray.join('<br />')
if (dataArray.length > 0) {
return dataArray.join('<br />')
}
else {
return 'Aucune donnée complémentaire'
}
}
......@@ -355,7 +376,7 @@
fillOpacity: 0.2
};
// Fonction plein écran
searchMap.addControl(new L.Control.Fullscreen());
......@@ -385,59 +406,80 @@
textErr: 'Erreur'
}));
// Add legend
let legend = L.control({position: "bottomleft"});
legend.onAdd = function (map) {
let div = L.DomUtil.create("div", "legend");
div.innerHTML += '<i style="background: #ff4c41"></i><span>Localisation simple</span><br>';
div.innerHTML += '<i style="background: #8A2BE2"></i><span>Localisation sur un métasite</span><br>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br>';
let div = L.DomUtil.create("div", "info legend");
div.setAttribute("onmouseenter", "showDisclaimer()");
div.setAttribute("onmouseleave", "hideDisclaimer()");
div.id = "info legend"
div.innerHTML = "<b class='fa fa-info-circle'></b>";
return div;
};
legend.addTo(searchMap);
// Download GeoJSON data with Ajax
fetch(metaplace_dataurl, {credentials: "include"})
.then(function (resp) {
return resp.json();
let cancelMetaPlaceSearchRequest;
loadMetaPlace = function () {
if (cancelMetaPlaceSearchRequest) {
// Cancel the previous request before making a new request
cancelMetaPlaceSearchRequest.cancel();
}
// Create a new CancelToken
cancelMetaPlaceSearchRequest = axios.CancelToken.source();
$http.get(metaplace_dataurl, {
progress: true,
cancelToken: cancelMetaPlaceSearchRequest.token
})
.then(function (data) {
L.geoJSON(data, {
style: polygon_style,
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = '<h3>MetaSite&nbsp;:&nbsp;'
+ props.name
+ '</h3><p><ul><li><b>Type</b>: '
+ (props.type_data ? props.type_data.descr : "Non défini")
+ '</li></ul> </p><div class="text-right"><div class="btn-group" role="group"><a type="button" class="btn btn-default btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/detail" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a><a type="button" class="btn btn-info btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/update" target="_blank"><i class="fa fa-fw fa-edit"></i></a></div></div>';
layer.bindPopup(content);
.then(function (resp) {
if (resp.status == 200) {
return resp.data;
}
}).addTo(searchMap).bringToBack();
})
.catch(function (err) {
if ($http.isCancel(error)) {
console.log('Previous request canceled', error.message);
} else {
console.log(error);
}
});
})
.catch(function (error) {
// handle error
console.log('<loadMetaPlace Axios error>', error);
})
.then(function (data) {
L.geoJSON(data, {
style: polygon_style,
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
var content = '<h3>MetaSite&nbsp;:&nbsp;'
+ props.name
+ '</h3><p><ul><li><b>Type</b>: '
+ (props.type_data ? props.type_data.descr : "Non défini")
+ '</li></ul> </p><div class="text-right"><div class="btn-group" role="group"><a type="button" class="btn btn-default btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/detail" target="_blank"><i class="fa fa-fw fa-info-circle"></i></a><a type="button" class="btn btn-info btn-sm" align="center" style="color:white;" href="/metaplace/'
+ feature.id
+ '/update" target="_blank"><i class="fa fa-fw fa-edit"></i></a></div></div>';
layer.bindPopup(content);
}
}).addTo(searchMap).bringToBack();
})
.catch(function (error) {
console.log('<loadMetaPlace Leaflet error>', error);
});
};
let cancelPlaceSearchRequest;
// Download GeoJSON data with Ajax
var markersById = {}
let markersById = {}
const loadPlaces = function () {
table.clear();
table.clear().draw();
markers.clearLayers();
searchMap.spin(true);
console.log('<loadPlaces dataUrl>', dataUrl);
if (cancelPlaceSearchRequest) {
// Cancel the previous request before making a new request
cancelPlaceSearchRequest.cancel();
}
// Create a new CancelToken
cancelPlaceSearchRequest = axios.CancelToken.source();
......@@ -448,15 +490,15 @@
cancelToken: cancelPlaceSearchRequest.token
})
.then(function (resp) {
console.log('<loadPlaces respJson>', resp);
return resp.data;
if (resp.status == 200) {
return resp.data;
}
})
.catch(function (error) {
// handle error
console.log('<loadPlaces Error1>', error);
})
.then(function (data) {
console.log('<loadPlaces data>', data);
var locationLayer = L.geoJson(data, {
onEachFeature: function onEachFeature(feature, layer) {
var props = feature.properties;
......@@ -549,6 +591,7 @@
}
);
loadMetaPlace();
showValues();
......
......@@ -215,6 +215,19 @@
var dataUrl = "/sighting/api/search?format=json";
function showDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = '<i style="background: #ff4c41"></i><span>Localisation simple</span><br/>';
div.innerHTML += '<i style="background: #8A2BE2"></i><span>Localisation sur un métasite</span><br/>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br/>';
}
function hideDisclaimer() {
var div = document.getElementById("info legend")
div.innerHTML = "<b class='fa fa-info-circle'></b>";
}
$(document).ready(function () {
function format(d) {
return '<strong>Commentaire</strong>&nbsp;:&nbsp;' + (d.properties.comment ? d.properties.comment : "Aucun commentaire");
......@@ -537,4 +550,4 @@
</script>
{% endblock %}
\ No newline at end of file
{% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment