Commit 136d5da6 authored by fred.perso's avatar fred.perso

add location search with nomatim to maps

parent 4eb76965
......@@ -18,8 +18,6 @@ h1, h2, h3, h4, h5 {
font-family: "Lato";
}
/* Sticky footer styles
-------------------------------------------------- */
......@@ -50,7 +48,7 @@ header {
background-color: #1a1a1a;
}
header h1{
header h1 {
font-family: "Lato";
}
......@@ -96,7 +94,7 @@ header h1{
.page-header h1 {
color: #fff;
size:0.8rem;
size: 0.8rem;
}
.page-header img {
......@@ -629,4 +627,52 @@ BS Full screen Modal
bottom: 0;
background-color: rgba(250, 250, 250, .8);
z-index: 1;
}
\ No newline at end of file
}
/*-------------------------------*/
/* Leaflet */
/*-------------------------------*/
/* Leaflet search */
.leaflet-container .leaflet-control-search {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
border: 2px solid rgba(0, 0, 0, 0.4);
box-shadow: 0 0;
}
/*.leaflet-control-search.search-exp { !*expanded*!*/
/*box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);*/
/*}*/
.leaflet-control-search .search-input {
display: block;
float: left;
background: #fff;
border-top:none;
border-left:none;
border-right:none;
border-bottom: 1px solid #777;
/*border-radius: 0px;*/
height: 26px;
font-size: 1.25em;
padding: 0 .125em;
margin: 3px;
padding-right: 30px
}
.leaflet-control-search .search-button, .leaflet-control-search .search-button:hover {
background-image: url(images/search_icons.png);
-webkit-border-radius: 4px;
border-radius: 4px;
background-position: 1px 1px;
width: 30px;
height: 30px;
}
.leaflet-control-search.search-load .search-input {
background: url(images/loader.gif) no-repeat center right #fff
}
......@@ -15,4 +15,74 @@
*
*/
.leaflet-control.leaflet-control-search{z-index:2000}.leaflet-control-search .search-input{display:block;float:left;background:#fff;border:1px solid #666;border-radius:2px;height:24px;font-size:1.25em;padding:0 .125em;margin:3px;padding-right:30px}.leaflet-control-search .search-button,.leaflet-control-search .search-button:hover{background-image:url(../images/search-icon-mobile.png);-webkit-border-radius:4px;border-radius:4px;background-position:1px 1px;width:32px;height:32px}.leaflet-control-search.search-load .search-input{background:url(../images/loader.gif) no-repeat center right #fff}.leaflet-control-search .search-cancel{background-image:url(../images/search-icon-mobile.png);-webkit-border-radius:4px;border-radius:4px;background-position:0 -62px;width:26px;height:26px;right:34px;margin:3px}.leaflet-control-search .search-tooltip{max-height:142px}.leaflet-control-search .search-tip{font-size:1em;margin:2px;padding:2px;display:block;color:#000;background:rgba(255,255,255,.8);border-radius:.25em;text-decoration:none;white-space:nowrap;vertical-align:center}.leaflet-control-search .search-tip .climbo-icon-mini{float:right;display:block;white-space:nowrap}.leaflet-control-search .search-button:hover,.leaflet-control-search .search-tip-select,.leaflet-control-search .search-tip:hover{background-color:#fff}.leaflet-control-search .search-alert{font-size:1.2em}
\ No newline at end of file
.leaflet-control.leaflet-control-search {
z-index: 2000
}
.leaflet-control-search .search-input {
display: block;
float: left;
background: #fff;
border: 1px solid #666;
border-radius: 2px;
height: 24px;
font-size: 1.25em;
padding: 0 .125em;
margin: 3px;
padding-right: 30px
}
.leaflet-control-search .search-button, .leaflet-control-search .search-button:hover {
background-image: url(../images/search-icon-mobile.png);
-webkit-border-radius: 4px;
border-radius: 4px;
background-position: 1px 1px;
width: 32px;
height: 32px
}
.leaflet-control-search.search-load .search-input {
background: url(../images/loader.gif) no-repeat center right #fff
}
.leaflet-control-search .search-cancel {
background-image: url(../images/search-icon-mobile.png);
-webkit-border-radius: 4px;
border-radius: 4px;
background-position: 0 -62px;
width: 26px;
height: 26px;
right: 34px;
margin: 3px
}
.leaflet-control-search .search-tooltip {
max-height: 142px
}
.leaflet-control-search .search-tip {
font-size: 1em;
margin: 2px;
padding: 2px;
display: block;
color: #000;
background: rgba(255, 255, 255, .8);
border-radius: .25em;
text-decoration: none;
white-space: nowrap;
vertical-align: center
}
.leaflet-control-search .search-tip .climbo-icon-mini {
float: right;
display: block;
white-space: nowrap
}
.leaflet-control-search .search-button:hover, .leaflet-control-search .search-tip-select, .leaflet-control-search .search-tip:hover {
background-color: #fff
}
.leaflet-control-search .search-alert {
font-size: 1.2em
}
\ No newline at end of file
......@@ -87,8 +87,12 @@ class PlaceCreate(LoginRequiredMixin, CreateView):
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
......@@ -97,8 +101,21 @@ class PlaceCreate(LoginRequiredMixin, CreateView):
L.control.locate(locateOptions).addTo(map);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// 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'
}));
// Download GeoJSON data with Ajax
fetch(dataurl, {
......
......@@ -31,6 +31,10 @@
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
......@@ -41,8 +45,21 @@
L.control.locate(locateOptions).addTo(map);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// 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'
}));
// Download GeoJSON data with Ajax
fetch(dataurl, {
......@@ -68,6 +85,7 @@
.then(function () {
map.spin(false);
});
});
</script>
{% endblock %}
......@@ -95,6 +95,12 @@
map.spin(true);
// Fonction plein écran
map.addControl(new L.Control.Fullscreen());
// Géolocalisation de l'utilisateur
var locateOptions = {
flyTo: true,
title: 'Ma position',
......@@ -103,7 +109,21 @@
L.control.locate(locateOptions).addTo(map);
map.addControl(new L.Control.Fullscreen());
// 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'
}));
// Download GeoJSON data with Ajax
fetch(dataurl, {
......
Markdown is supported
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