Début des cartes et du js compliqué
This commit is contained in:
Evarin
parent
6e91b6cebb
commit
8550776fab
11 changed files with 967 additions and 29 deletions
38
avisstage/api.py
Normal file
38
avisstage/api.py
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# coding: utf-8
|
||||
|
||||
from tastypie.resources import ModelResource
|
||||
from avisstage.models import Lieu
|
||||
|
||||
from django.contrib.gis import geos
|
||||
|
||||
class LieuResource(ModelResource):
|
||||
class Meta:
|
||||
queryset = Lieu.objects.all()
|
||||
resource_name = "lieu"
|
||||
|
||||
def build_filters(self, filters=None):
|
||||
if filters is None:
|
||||
filters = {}
|
||||
|
||||
orm_filters = super(LieuResource, self).build_filters()
|
||||
|
||||
if "lng" in filters and "lat" in filters:
|
||||
lat = float(filters['lat'])
|
||||
lng = float(filters['lng'])
|
||||
pt = geos.Point((lng,lat), srid=4326)
|
||||
self.reference_point = pt
|
||||
orm_filters['coord__distance_lte'] = (pt, 50)
|
||||
print orm_filters
|
||||
|
||||
return orm_filters
|
||||
|
||||
def dehydrate(self, bundle):
|
||||
bundle = super(LieuResource, self).dehydrate(bundle)
|
||||
|
||||
obj = bundle.obj
|
||||
bundle.data['coord'] = {'lat': float(obj.coord.y),
|
||||
'lng': float(obj.coord.x)}
|
||||
|
||||
if "lat" in bundle.request.GET and "lng" in bundle.request.GET:
|
||||
bundle.data['distance'] = self.reference_point.distance(bundle.obj.coord)
|
||||
return bundle
|
||||
|
|
@ -361,6 +361,7 @@ select {
|
|||
appearance: none;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea, div.tinymce {
|
||||
|
|
@ -476,3 +477,8 @@ div.as-results {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
#map_addlieu {
|
||||
height: 500px;
|
||||
}
|
||||
|
|
|
|||
624
avisstage/static/css/leaflet.css
Normal file
624
avisstage/static/css/leaflet.css
Normal file
|
|
@ -0,0 +1,624 @@
|
|||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
.leaflet-control-zoom-out {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in {
|
||||
font-size: 22px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
|
@ -428,9 +428,10 @@ select {
|
|||
appearance: none;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 366, ../../sass/screen.scss */
|
||||
/* line 367, ../../sass/screen.scss */
|
||||
textarea, div.tinymce {
|
||||
border: none;
|
||||
border-left: 1px solid #E80051;
|
||||
|
|
@ -439,26 +440,26 @@ textarea, div.tinymce {
|
|||
transition: border 1s ease-out, background 1s ease-out;
|
||||
}
|
||||
|
||||
/* line 374, ../../sass/screen.scss */
|
||||
/* line 375, ../../sass/screen.scss */
|
||||
div.tinymce.mce-edit-focus {
|
||||
background-color: #ffe8f0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* line 379, ../../sass/screen.scss */
|
||||
/* line 380, ../../sass/screen.scss */
|
||||
textarea {
|
||||
height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* line 385, ../../sass/screen.scss */
|
||||
/* line 386, ../../sass/screen.scss */
|
||||
form .field {
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
/* line 391, ../../sass/screen.scss */
|
||||
/* line 392, ../../sass/screen.scss */
|
||||
form .field label, form .field .label {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
|
|
@ -467,33 +468,33 @@ form .field label, form .field .label {
|
|||
padding-top: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* line 399, ../../sass/screen.scss */
|
||||
/* line 400, ../../sass/screen.scss */
|
||||
form .field label {
|
||||
font-family: Podkova, serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* line 403, ../../sass/screen.scss */
|
||||
/* line 404, ../../sass/screen.scss */
|
||||
form .field .help_text {
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
/* line 407, ../../sass/screen.scss */
|
||||
/* line 408, ../../sass/screen.scss */
|
||||
form .field .input {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* line 416, ../../sass/screen.scss */
|
||||
/* line 417, ../../sass/screen.scss */
|
||||
ul.as-selections {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* line 420, ../../sass/screen.scss */
|
||||
/* line 421, ../../sass/screen.scss */
|
||||
ul.as-selections li {
|
||||
display: inline-block;
|
||||
}
|
||||
/* line 424, ../../sass/screen.scss */
|
||||
/* line 425, ../../sass/screen.scss */
|
||||
ul.as-selections .as-selection-item {
|
||||
padding: 0 5px;
|
||||
background: #28BF8A;
|
||||
|
|
@ -502,47 +503,52 @@ ul.as-selections .as-selection-item {
|
|||
border-radius: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* line 432, ../../sass/screen.scss */
|
||||
/* line 433, ../../sass/screen.scss */
|
||||
ul.as-selections .as-selection-item a.as-close {
|
||||
color: #fff;
|
||||
-webkit-cursor: pointer;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* line 439, ../../sass/screen.scss */
|
||||
/* line 440, ../../sass/screen.scss */
|
||||
ul.as-selections .as-selection-item.selected {
|
||||
background: #E80051;
|
||||
}
|
||||
/* line 444, ../../sass/screen.scss */
|
||||
/* line 445, ../../sass/screen.scss */
|
||||
ul.as-selections .as-original {
|
||||
flex-grow: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
/* line 448, ../../sass/screen.scss */
|
||||
/* line 449, ../../sass/screen.scss */
|
||||
ul.as-selections .as-original input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* line 454, ../../sass/screen.scss */
|
||||
/* line 455, ../../sass/screen.scss */
|
||||
div.as-results {
|
||||
position: relative;
|
||||
}
|
||||
/* line 456, ../../sass/screen.scss */
|
||||
/* line 457, ../../sass/screen.scss */
|
||||
div.as-results ul {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid #ff82ae;
|
||||
}
|
||||
/* line 463, ../../sass/screen.scss */
|
||||
/* line 464, ../../sass/screen.scss */
|
||||
div.as-results ul li {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
/* line 469, ../../sass/screen.scss */
|
||||
/* line 470, ../../sass/screen.scss */
|
||||
div.as-results ul li.as-result-item.active {
|
||||
background: #ebfbf5;
|
||||
}
|
||||
/* line 474, ../../sass/screen.scss */
|
||||
/* line 475, ../../sass/screen.scss */
|
||||
div.as-results ul li.as-message {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* line 482, ../../sass/screen.scss */
|
||||
#map_addlieu {
|
||||
height: 500px;
|
||||
}
|
||||
|
|
|
|||
144
avisstage/static/js/leaflet-gplaces-autocomplete.js
Normal file
144
avisstage/static/js/leaflet-gplaces-autocomplete.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
(function () {
|
||||
L.GPlaceAutocomplete = {};
|
||||
|
||||
L.Control.GPlaceAutocomplete = L.Control.extend({
|
||||
options: {
|
||||
position: "topright",
|
||||
prepend: true,
|
||||
collapsed_mode: false,
|
||||
autocomplete_options: {}
|
||||
},
|
||||
|
||||
collapsedModeIsExpanded: true,
|
||||
|
||||
autocomplete: null,
|
||||
icon: null,
|
||||
searchBox: null,
|
||||
|
||||
initialize: function (options) {
|
||||
if (options) {
|
||||
L.Util.setOptions(this, options);
|
||||
}
|
||||
if (!this.options.callback) {
|
||||
this.options.callback = this.onLocationComplete;
|
||||
}
|
||||
this._buildContainer();
|
||||
},
|
||||
|
||||
_buildContainer: function () {
|
||||
|
||||
// build structure
|
||||
this.container = L.DomUtil.create("div", "leaflet-gac-container leaflet-bar");
|
||||
var searchWrapper = L.DomUtil.create("div", "leaflet-gac-wrapper");
|
||||
this.searchBox = L.DomUtil.create("input", "leaflet-gac-control");
|
||||
this.autocomplete = new google.maps.places.Autocomplete(this.searchBox, this.options.autocomplete_options);
|
||||
|
||||
// if collapse mode set - create icon and register events
|
||||
if (this.options.collapsed_mode) {
|
||||
this.collapsedModeIsExpanded = false;
|
||||
|
||||
this.icon = L.DomUtil.create("div", "leaflet-gac-search-btn");
|
||||
L.DomEvent
|
||||
.on(this.icon, "click", this._showSearchBar, this);
|
||||
|
||||
this.icon.appendChild(
|
||||
L.DomUtil.create("div", "leaflet-gac-search-icon")
|
||||
);
|
||||
|
||||
searchWrapper.appendChild(
|
||||
this.icon
|
||||
);
|
||||
L.DomUtil.addClass(this.searchBox, "leaflet-gac-hidden");
|
||||
}
|
||||
|
||||
searchWrapper.appendChild(
|
||||
this.searchBox
|
||||
);
|
||||
// create and bind autocomplete
|
||||
this.container.appendChild(
|
||||
searchWrapper
|
||||
);
|
||||
|
||||
},
|
||||
|
||||
//***
|
||||
// Collapse mode callbacks
|
||||
//***
|
||||
|
||||
_showSearchBar: function () {
|
||||
this._toggleSearch(true);
|
||||
},
|
||||
|
||||
_hideSearchBar: function () {
|
||||
// if element is expanded, we need to change expanded flag and call collapse handler
|
||||
if (this.collapsedModeIsExpanded) {
|
||||
this._toggleSearch(false);
|
||||
}
|
||||
},
|
||||
|
||||
_toggleSearch: function (shouldDisplaySearch) {
|
||||
if (shouldDisplaySearch) {
|
||||
L.DomUtil.removeClass(this.searchBox, "leaflet-gac-hidden");
|
||||
L.DomUtil.addClass(this.icon, "leaflet-gac-hidden");
|
||||
this.searchBox.focus();
|
||||
} else {
|
||||
L.DomUtil.addClass(this.searchBox, "leaflet-gac-hidden");
|
||||
L.DomUtil.removeClass(this.icon, "leaflet-gac-hidden");
|
||||
}
|
||||
this.collapsedModeIsExpanded = shouldDisplaySearch;
|
||||
},
|
||||
|
||||
//***
|
||||
// Default success callback
|
||||
//***
|
||||
|
||||
onLocationComplete: function (place, map) {
|
||||
// default callback
|
||||
if (!place.geometry) {
|
||||
alert("Location not found");
|
||||
return;
|
||||
}
|
||||
map.panTo([
|
||||
place.geometry.location.lat(),
|
||||
place.geometry.location.lng()
|
||||
]);
|
||||
|
||||
},
|
||||
|
||||
onAdd: function () {
|
||||
// stop propagation of click events
|
||||
L.DomEvent.addListener(this.container, 'click', L.DomEvent.stop);
|
||||
L.DomEvent.disableClickPropagation(this.container);
|
||||
if (this.options.collapsed_mode) {
|
||||
// if collapse mode - register handler
|
||||
this._map.on('dragstart click', this._hideSearchBar, this);
|
||||
}
|
||||
return this.container;
|
||||
},
|
||||
|
||||
addTo: function (map) {
|
||||
this._map = map;
|
||||
|
||||
var container = this._container = this.onAdd(map),
|
||||
pos = this.options.position,
|
||||
corner = map._controlCorners[pos];
|
||||
|
||||
L.DomUtil.addClass(container, 'leaflet-control');
|
||||
if (this.options.prepend) {
|
||||
corner.insertBefore(container, corner.firstChild);
|
||||
} else {
|
||||
corner.appendChild(container)
|
||||
}
|
||||
|
||||
var callback = this.options.callback;
|
||||
var _this = this;
|
||||
google.maps.event.addListener(this.autocomplete, "place_changed", function () {
|
||||
callback(_this.autocomplete.getPlace(), map);
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
})();
|
||||
9
avisstage/static/js/leaflet.js
Normal file
9
avisstage/static/js/leaflet.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -15,10 +15,5 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Ajouter un stage</h1>
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
<input type="submit" />
|
||||
</form>
|
||||
{% include "avisstage/formulaires/lieu_raw.html" with form=form %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
70
avisstage/templates/avisstage/formulaires/lieu_raw.html
Normal file
70
avisstage/templates/avisstage/formulaires/lieu_raw.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
{% load staticfiles %}
|
||||
<h1>Ajouter un lieu</h1>
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
{% block extra_head %}
|
||||
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDd4innPShfHcW8KDJB833vZHZSsqt-ACw"></script>
|
||||
<script type="text/javascript" src="{% static "js/leaflet.js" %}"></script>
|
||||
<script type="text/javascript" src="{% static "js/leaflet-gplaces-autocomplete.js" %}"></script>
|
||||
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/leaflet.css" %}" />
|
||||
{% endblock %}
|
||||
|
||||
<div id="map_addlieu"></div>
|
||||
<div id="candidats"></div>
|
||||
|
||||
{% for field in form %}
|
||||
{{ field.errors }}
|
||||
<div class="field">
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
<div class="input">
|
||||
{{ field }}
|
||||
{% if field.help_text %}
|
||||
<p class="help_text">{{ field.help_text }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<input type="submit" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var map = L.map('map_addlieu').setView([51.505, -0.09], 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);
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</form>
|
||||
|
|
@ -87,6 +87,7 @@
|
|||
<h1>{% if creation %}Nouveau stage{% else %}Modification d'un stage{% endif %}</h1>
|
||||
<form action="" method="post" id="stageform">
|
||||
{% csrf_token %}
|
||||
{# Général #}
|
||||
<h2>Informations générales</h2>
|
||||
{{ form.non_field_errors }}
|
||||
{% for field in form %}
|
||||
|
|
@ -101,6 +102,17 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{# Lieux #}
|
||||
<div class="field">
|
||||
<label>Lieux du stage</label>
|
||||
<div class="input">
|
||||
{% for fform in avis_lieu_formset %}
|
||||
{{ fform.lieu }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Avis - général #}
|
||||
<h2>Commentaires sur le stage</h2>
|
||||
{{ avis_stage_form.non_field_errors }}
|
||||
{% for field in avis_stage_form %}
|
||||
|
|
@ -121,8 +133,11 @@
|
|||
{% for fform in avis_lieu_formset %}
|
||||
<h2>Commentaire sur le lieu</h2>
|
||||
{{ fform.non_field_errors }}
|
||||
{% for field in fform %}
|
||||
{% if true or not field.name == "lieu" %}
|
||||
{% for field in fform.hidden_fields %}
|
||||
{{ field }}
|
||||
{% endfor %}
|
||||
{% for field in fform.visible_fields %}
|
||||
{% if not field.name == "lieu" %}
|
||||
{{ field.errors }}
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
|
|
@ -138,6 +153,31 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<div id="avis_lieu_vide">
|
||||
{% with avis_lieu_formset.empty_form as fform %}
|
||||
<h2>Commentaire sur le lieu</h2>
|
||||
{{ fform.non_field_errors }}
|
||||
{% for field in fform.hidden_fields %}
|
||||
{{ field }}
|
||||
{% endfor %}
|
||||
{% for field in fform.visible_fields %}
|
||||
{% if not field.name == "lieu" %}
|
||||
{{ field.errors }}
|
||||
<div class="field">
|
||||
<div class="label">
|
||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{% if field.help_text %}
|
||||
<p class="help_text">{{ field.help_text }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="input">
|
||||
{{ field }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<input type="submit" value="Enregistrer" />
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
from django.conf.urls import include, url
|
||||
from . import views
|
||||
from . import views, api
|
||||
from tastypie.api import Api
|
||||
|
||||
v1_api = Api(api_name='v1')
|
||||
v1_api.register(api.LieuResource())
|
||||
|
||||
urlpatterns = [
|
||||
url(r'^$', views.index, name='index'),
|
||||
|
|
@ -14,4 +18,5 @@ urlpatterns = [
|
|||
url(r'^profil/edit/$', views.ProfilEdit.as_view(), name='profil_edit'),
|
||||
url(r'^recherche/$', views.recherche, name='recherche'),
|
||||
url(r'^feedback/$', views.feedback, name='feedback'),
|
||||
url(r'^api/', include(v1_api.urls)),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ INSTALLED_APPS = (
|
|||
'django.contrib.staticfiles',
|
||||
'django.contrib.gis',
|
||||
|
||||
'tastypie',
|
||||
'django_cas_ng',
|
||||
'braces',
|
||||
'tinymce',
|
||||
|
|
|
|||
Loading…
Reference in a new issue