up emojis

static/map_by_what.css

@@ -0,0 +1,148 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+#map {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.map-overlay {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    z-index: 1;
+}
+
+.filter-overlay {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 250px;
+    max-height: 80vh;
+    overflow-y: auto;
+    z-index: 1;
+}
+
+.filter-overlay h3 {
+    margin-top: 0;
+    color: #0078ff;
+}
+
+.filter-overlay button {
+    margin: 5px 5px 10px 0;
+    padding: 5px 10px;
+    background: #0078ff;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.filter-overlay button:hover {
+    background: #0056b3;
+}
+
+.filter-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.filter-list li {
+    margin-bottom: 8px;
+}
+
+.filter-list input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+.filter-list label {
+    cursor: pointer;
+    font-size: 14px;
+}
+
+/* Styles pour les marqueurs personnalisés avec forme de goutte */
+.custom-marker {
+    cursor: pointer;
+    user-select: none;
+}
+
+.marker-drop {
+    width: 36px;
+    height: 46px;
+    position: relative;
+    background: #0078ff;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.marker-drop:after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+}
+
+.marker-emoji {
+    font-size: 18px;
+    transform: rotate(45deg);
+    z-index: 2;
+    position: relative;
+    line-height: 1;
+}
+
+.custom-marker:hover .marker-drop {
+    transform: rotate(-45deg) scale(1.1);
+    transition: transform 0.2s ease;
+}
+
+.event-popup {
+    max-width: 300px;
+}
+
+.event-popup h3 {
+    margin-top: 0;
+    color: #0078ff;
+}
+
+.event-popup p {
+    margin: 8px 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .map-overlay, .filter-overlay {
+        position: static;
+        max-width: none;
+        margin-bottom: 10px;
+    }
+
+    .filter-overlay {
+        max-height: 200px;
+    }
+}