Commit 3b739f11 authored by Hypsug0's avatar Hypsug0
Browse files

share leaflet map form script

parent 6c67644a
......@@ -55,16 +55,34 @@ class MetaPlaceForm(forms.ModelForm):
role="button",
)
),
Row(
Column("name", css_class="col-xs-12 col-md-6"),
Column("type", css_class="col-xs-12 col-md-6"),
Fieldset(
_("Localisation"),
Column("autogeom", css_class="col-lg-12"),
Column("geom", css_class="col-lg-12"),
css_class="col-lg-12",
Accordion(
PrimaryAccordionGroup(
"Informations principales",
Row(
Column("name", css_class="col-xs-12 col-md-6"),
Column("type", css_class="col-xs-12 col-md-6"),
Fieldset(
_("Localisation"),
Column("autogeom", css_class="col-lg-12"),
Column("geom", css_class="col-lg-12"),
css_class="col-lg-12",
),
css_class="col-lg-12",
),
),
css_class="col-lg-12",
),
Row(
Column(
Submit("submit", _("Enregistrer"), css_class="btn-primary btn-sm"),
Button(
"cancel",
_("Annuler"),
css_class="btn-warning btn-sm",
onclick="history.go(-1)",
),
css_class="col-lg-12 btn-group right",
role="button",
)
),
)
super(MetaPlaceForm, self).__init__(*args, **kwargs)
......
......@@ -39,135 +39,7 @@ class MetaPlaceCreate(LoginRequiredMixin, CreateView):
context[
"js"
] = """
var dataurl = '/api/place.geojson';
var metaplace_dataurl = '/api/metaplaces.geojson';
window.addEventListener("map:init", function (event) {
var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyDistanceMultiplier: 3, maxClusterRadius: 14});
var style_data = {
radius: 6,
fillColor: "#ff4c41",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var style_data_metasite = {
radius: 6,
fillColor: "#8A2BE2",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var polygon_style = {
color: "#8A2BE2",
fillColor: "#9370DB",
weight: 2,
opacity: 0.8,
fillOpacity: 0.2
};
var map = event.detail.map;
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
icon: 'fa fa-location-arrow',
};
L.control.locate(locateOptions).addTo(map);
// Recherche par adresse
map.addControl(new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=de-DE&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat', 'lon'],
markerLocation: true,
autoType: true,
autoCollapse: true,
minLength: 2,
zoom: 13,
text: 'Suchen...',
textCancel: 'Annuler',
textErr: 'Erreur'
}));
// Add legend
let legend = L.control({ position: "topright" });
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;
};
legend.addTo(map);
// Download GeoJSON data with Ajax
fetch(dataurl, {
credentials: "include"
})
.then(function (resp) {
return resp.json();
})
.then(function (data) {
markers.addLayer(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);
}
return L.circleMarker(latlng, style_data);
}
})).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);
});
});
"""
return context
......@@ -186,135 +58,6 @@ class MetaPlaceUpdate(PlaceEditAuthMixin, UpdateView):
context[
"js"
] = """
var dataurl = '/api/place.geojson';
var metaplace_dataurl = '/api/metaplaces.geojson';
window.addEventListener("map:init", function (event) {
var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyDistanceMultiplier: 3, maxClusterRadius: 14});
var style_data = {
radius: 6,
fillColor: "#ff4c41",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var style_data_metasite = {
radius: 6,
fillColor: "#8A2BE2",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var polygon_style = {
color: "#8A2BE2",
fillColor: "#9370DB",
weight: 2,
opacity: 0.8,
fillOpacity: 0.2
};
var map = event.detail.map;
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
icon: 'fa fa-location-arrow',
};
L.control.locate(locateOptions).addTo(map);
// Recherche par adresse
map.addControl(new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=de-DE&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat', 'lon'],
markerLocation: true,
autoType: true,
autoCollapse: true,
minLength: 2,
zoom: 13,
text: 'Suchen...',
textCancel: 'Annuler',
textErr: 'Erreur'
}));
// Add legend
let legend = L.control({ position: "topright" });
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;
};
legend.addTo(map);
// Download GeoJSON data with Ajax
fetch(dataurl, {
credentials: "include"
})
.then(function (resp) {
return resp.json();
})
.then(function (data) {
markers.addLayer(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);
}
return L.circleMarker(latlng, style_data);
}
})).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);
});
});
"""
return context
......
......@@ -105,156 +105,7 @@ class PlaceCreate(LoginRequiredMixin, CreateView):
context[
"js"
] = """
var dataurl = '/api/place.geojson';
var metaplace_dataurl = '/api/metaplaces.geojson';
window.addEventListener("map:init", function (event) {
var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyDistanceMultiplier: 3, maxClusterRadius: 14});
var style_data = {
radius: 6,
fillColor: "#ff4c41",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var style_data_metasite = {
radius: 6,
fillColor: "#8A2BE2",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var polygon_style = {
color: "#8A2BE2",
fillColor: "#9370DB",
weight: 2,
opacity: 0.8,
fillOpacity: 0.2
};
var map = event.detail.map;
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
icon: 'fa fa-location-arrow',
};
L.control.locate(locateOptions).addTo(map);
// Recherche par adresse
map.addControl(new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=de-DE&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat', 'lon'],
markerLocation: true,
autoType: true,
autoCollapse: true,
minLength: 2,
zoom: 13,
text: 'Suchen...',
textCancel: 'Annuler',
textErr: 'Erreur'
}));
// Add legend
let legend = L.control({ position: "topright" });
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: #32CD32;"></i><span>Prise du point manuellement</span><br>';
div.innerHTML += '<i style="background: #9370DB; border-radius: 0%;"></i><span>Emprise du métasite</span><br>';
return div;
};
legend.addTo(map);
// Download GeoJSON data with Ajax
fetch(dataurl, {
credentials: "include"
})
.then(function (resp) {
return resp.json();
})
.then(function (data) {
markers.addLayer(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);
}
return L.circleMarker(latlng, style_data);
}
})).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);
});
// Trigger zoom on coordinate with manual filling
$('#id_x,#id_y').on('change', function() {
let x = $('#id_x').val();
let y = $('#id_y').val();
if ( x && y) {
for (k in map._layers) {
if (map._layers[k].dragging) {
console.log(map._layers[k])
var newLatLng = new L.LatLng(y, x);
map._layers[k].setLatLng(newLatLng);
map.flyTo([y, x], 16);
}
};
}
});
// Reset fields if users draw/edit the leaflet marker
map.on('draw:created draw:edited', function (e) {
$('#id_x').val('') && $('#id_y').val('');
});
});
"""
return context
......@@ -276,6 +127,7 @@ class PlaceDetail(PlaceViewAuthMixin, DetailView):
logger.debug(loggeduser)
pk = self.kwargs.get("pk")
placeobject = Place.objects.get(id_place=pk)
# placeneighbour = Place.objects.filter(geom__within=(placeobject.geom, D(m=50)))
placedetail = False
#  Etats des lieux à afficher en fonction du type de localité (tree, build, bridge, cave)
if placeobject.type:
......@@ -390,6 +242,7 @@ class PlaceDetail(PlaceViewAuthMixin, DetailView):
context["sessioncount"] = sessioncount
context["sessiontable"] = sessiontable
context["placedetail"] = placedetail
context["placeneighbour"] = placeneighbour
if placedetail:
context["placedetailicon"] = placedetailicon
context["placedetailtitle"] = placedetailtitle
......
......@@ -5,27 +5,33 @@
{% block content %}
<style>
.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;
}
.legend span {
position: relative;
bottom: 3px;
}
.legend i {
width: 16px;
height: 16px;
float: left;
margin: 0 8px 0 0;
opacity: 0.7;
border-radius: 50%;
}
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;
}
.zoomInfo {
padding: 5px;
}
.legend span {
position: relative;
bottom: 3px;
}
.legend i {
width: 16px;
height: 16px;
float: left;
margin: 0 8px 0 0;
opacity: 0.7;
border-radius: 50%;
}
</style>
<h1><i class="{{ icon }}"></i> {{ title }}</h1>
{% if messages %}
......@@ -52,6 +58,226 @@
{% crispy form %}
</form>
<link rel="stylesheet" href="{% static 'css/select2-bootstrap.min.css' %}">
<script>
console.log('TEST');
var placeBaseUrl = '/place/bbox/api/search';
var metaplaceBaseUrl = '/metaplace/api/search';
const controller = new AbortController();
const signal = controller.signal;
window.addEventListener("map:init", function (event) {
var markers = L.markerClusterGroup({
chunkedLoading: true,
spiderfyDistanceMultiplier: 3,
maxClusterRadius: 14
});
var style_data = {
radius: 6,
fillColor: "#ff4c41",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var style_data_metasite = {
radius: 6,
fillColor: "#8A2BE2",
color: "#ddd",
weight: 2,
opacity: 1,
fillOpacity: 0.8
};
var polygon_style = {
color: "#8A2BE2",
fillColor: "#9370DB",
weight: 2,
opacity: 0.8,
fillOpacity: 0.2
};
var map = event.detail.map;
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
icon: 'fa fa-location-arrow',
};
L.control.locate(locateOptions).addTo(map);
// Recherche par adresse
map.addControl(new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=de-DE&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat', 'lon'],
markerLocation: true,
autoType: true,
autoCollapse: true,
minLength: 2,
zoom: 13,
text: 'Suchen...',
textCancel: 'Annuler',
textErr: 'Erreur'
}));
// Add legend
let legend = L.control({position: "bottomright"});
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;
};
legend.addTo(map);