Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
dbchiro
dbchiroweb
Commits
3b739f11
Commit
3b739f11
authored
Feb 16, 2020
by
Hypsug0
Browse files
share leaflet map form script
parent
6c67644a
Changes
4
Hide whitespace changes
Inline
Side-by-side
sights/forms.py
View file @
3b739f11
...
...
@@ -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
)
...
...
sights/metaplace/views.py
View file @
3b739f11
...
...
@@ -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
...
...
sights/place/views.py
View file @
3b739f11
...
...
@@ -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
...
...
templates/leaflet_form.html
View file @
3b739f11
...
...
@@ -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
);