map color updates

blueprints/api.py

@@ -103,7 +103,7 @@ def create_notepad():
         return jsonify({'error': 'Unauthorized'}), 401
         
     data = request.get_json()
-    new_pad = Notepad(name=data['name'], is_public=data.get('is_public', False), user_id=user_id)
+    new_pad = Notepad(name=data['name'], is_public=data.get('is_public', False), user_id=user_id, color=data.get('color', '#3388ff'))
     db.session.add(new_pad)
     db.session.commit()
     return jsonify(new_pad.to_dict()), 201

models/notepad.py

@@ -18,5 +18,6 @@ class Notepad(db.Model):
             'name': self.name,
             'is_public': self.is_public,
             'owner_id': self.user_id,
+            'color': self.color,
             'note_count': self.notes.filter_by(is_hidden=False).count()
         }

static/assets/css/map.css

@@ -96,4 +96,9 @@
     cursor: pointer;
     margin-top: 5px;
     margin-right: 5px;
+}
+
+.custom-div-icon {
+    background: transparent;
+    border: none;
 }

static/assets/js/actions.js

@@ -116,9 +116,7 @@ window.openEditNoteModal = function(id, currentTitle, currentContent) {
 };
 
 // Helper to open note modal (called from index.js)
-function openCreateNoteModal(notepadId) {
+window.openCreateNoteModal = function(notepadId) {
     activeNotepadId = notepadId;
     document.getElementById('modal-create-note').classList.remove('hidden');
-}
-en');
-}
+};

static/assets/js/map.js

@@ -132,12 +132,14 @@ window.SpotNotes.renderMapMarkers = function() {
             });
             marker = L.marker([note.lat, note.lng], { icon: icon });
         } else {
+            const teardropSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36"><path fill="${padColor}" d="M12 0C5.373 0 0 5.373 0 12c0 8.442 12 24 12 24s12-15.558 12-24c0-6.627-5.373-12-12-12zm0 17c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z" stroke="white" stroke-width="1.5"/></svg>`;
+            
             const svgIcon = L.divIcon({
                 className: 'custom-div-icon',
-                html: `<div style="background-color: ${padColor}; width: 16px; height: 16px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 4px rgba(0,0,0,0.5);"></div>`,
-                iconSize: [20, 20],
-                iconAnchor: [10, 10],
-                popupAnchor: [0, -10]
+                html: teardropSvg,
+                iconSize: [24, 36],
+                iconAnchor: [12, 36],
+                popupAnchor: [0, -36]
             });
             marker = L.marker([note.lat, note.lng], { icon: svgIcon });
             marker.bindPopup(`<b>${window.SpotNotes.escapeHtml(note.title)}</b><br><div style="white-space: pre-wrap;">${window.SpotNotes.escapeHtml(note.content)}</div><span style="font-size:0.7rem; color:#888;">${dateStr}</span><br>${directionsBtn} ${shareBtn} ${actionBtns}`);

static/index.html

@@ -82,6 +82,10 @@
                         <input type="checkbox" id="pad-public" style="width:auto;"> Make Public
                     </label>
                 </div>
+                <div class="form-group">
+                    <label>Marker Color</label>
+                    <input type="color" id="pad-color" value="#3388ff">
+                </div>
                 <button type="submit" class="btn btn-primary">Create</button>
             </form>
         </div>