refs #2 add option to change marker style and tooltip visibility

CHANGELOG.md

@@ -11,7 +11,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - ability to load jpg files as markers, conversion with gpsbabel like kml and csv
   [#3](https://gitlab.com/eneiluj/gpxedit-oc/issues/3) @eneiluj
 - custom tile server management
-  [#4](https://gitlab.com/eneiluj/gpxedit-oc/issues/3) @eneiluj
+  [#4](https://gitlab.com/eneiluj/gpxedit-oc/issues/4) @eneiluj
+- option to change marker style and tooltip visibility
+  [#2](https://gitlab.com/eneiluj/gpxedit-oc/issues/2) @eneiluj
 
 ### Fixed
 - remove $.parseXML, apparently useless and producing errors

css/gpxedit.css

@@ -463,6 +463,13 @@ input[type=checkbox]
     height: 30px !important;
 }
 
+.leaflet-marker-blue
+{
+    background-image: url('images/marker-icon.png') !important;
+    width: 25px !important;
+    height: 41px !important;
+}
+
 .leaflet-marker-red
 {
     background-image: url('images/marker-icon-red.png');

js/gpxedit.js

@@ -4,6 +4,7 @@
 var gpxedit = {
     map: {},
     baseLayers: null,
+    drawControl: null,
     id: 0,
     // indexed by gpxedit_id
     layersData: {}
@@ -183,10 +184,6 @@ function load_map() {
   ).addTo(gpxedit.map);
   gpxedit.minimapControl._toggleDisplayButtonClicked();
 
-  //gpxedit.map.on('moveend',updateTrackListFromBounds);
-  //gpxedit.map.on('zoomend',updateTrackListFromBounds);
-  //gpxedit.map.on('baselayerchange',updateTrackListFromBounds);
-
   gpxedit.editableLayers = new L.FeatureGroup();
   gpxedit.map.addLayer(gpxedit.editableLayers);
 
@@ -215,6 +212,7 @@ function load_map() {
   };
 
   var drawControl = new L.Control.Draw(options);
+  gpxedit.drawControl = drawControl;
   gpxedit.map.addControl(drawControl);
 
   // when something is created, we generate popup content
@@ -374,15 +372,35 @@ function generateGpx(){
 
 // adds a marker and initialize its data
 function drawMarker(latlng, name, desc, cmt){
-    // to add a marker
+    var wst = $('#markerstyleselect').val();
-    var m = L.marker(latlng, {
+    if (wst === 'tp' || wst === 'p'){
-          icon: L.divIcon({
+        var m = L.marker(latlng, {
-              className: 'leaflet-div-icon2',
+              icon: L.divIcon({
-              iconAnchor: [5, 30]
+                  className: 'leaflet-div-icon2',
-          })
+                  iconAnchor: [5, 30]
-    });
+              })
+        });
+    }
+    else if (wst === 'ts' || wst === 's'){
+        var m = L.marker(latlng, {
+            icon: L.divIcon({
+                iconSize:L.point(6,6),
+                html:'<div></div>'
+            })
+        });
+    }
+    else if (wst === 'tm' || wst === 'm'){
+        var m = L.marker(latlng);
+    }
     var layer = onCreated('marker', m);
-    m.bindTooltip(name, {sticky:true});
+    if (name !== ''){
+        if (wst === 'tm' || wst === 'tp' || wst === 'ts'){
+            m.bindTooltip(name, {permanent:true});
+        }
+        else{
+            m.bindTooltip(name, {sticky:true});
+        }
+    }
     gpxedit.layersData[layer.gpxedit_id].name = name;
     gpxedit.layersData[layer.gpxedit_id].comment = cmt;
     gpxedit.layersData[layer.gpxedit_id].description = desc;
@@ -390,12 +408,20 @@ function drawMarker(latlng, name, desc, cmt){
 
 // adds a polyline and initialize its data
 function drawLine(latlngs, name, desc, cmt){
+    var wst = $('#markerstyleselect').val();
     var p = L.polyline(latlngs, {
                   color: '#f357a1',
                   weight: 7
     });
     var layer = onCreated('polyline', p);
-    p.bindTooltip(name, {sticky:true});
+    if (name !== ''){
+        if (wst === 'tm' || wst === 'tp' || wst === 'ts'){
+            p.bindTooltip(name, {permanent:true});
+        }
+        else{
+            p.bindTooltip(name, {sticky:true});
+        }
+    }
     gpxedit.layersData[layer.gpxedit_id].name = name;
     gpxedit.layersData[layer.gpxedit_id].comment = cmt;
     gpxedit.layersData[layer.gpxedit_id].description = desc;
@@ -445,6 +471,7 @@ function parseGpx(xml){
 function clear(){
     var layersToRemove = [];
     gpxedit.editableLayers.eachLayer(function (layer) {
+          layer.unbindTooltip();
           delete gpxedit.layersData[layer.gpxedit_id];
           layersToRemove.push(layer);
     });
@@ -584,21 +611,68 @@ function addTileServer(){
     });
 }
 
+function updateLeafletDrawMarkerStyle(){
+    var wst = $('#markerstyleselect').val();
+    if (wst === 'tp' || wst === 'p'){
+        gpxedit.drawControl.setDrawingOptions({
+            marker: {
+                icon: L.divIcon({
+                    className: 'leaflet-div-icon2',
+                    iconAnchor: [5, 30]
+                })
+            }
+        });
+    }
+    else if (wst === 'ts' || wst === 's'){
+        gpxedit.drawControl.setDrawingOptions({
+            marker: {
+                icon: L.divIcon({
+                    iconSize:L.point(6,6),
+                    html:'<div></div>'
+                })
+            }
+        });
+    }
+    else if (wst === 'tm' || wst === 'm'){
+        gpxedit.drawControl.setDrawingOptions({
+            marker: {
+                icon: L.divIcon({
+                    className: 'leaflet-marker-blue',
+                    iconAnchor: [12, 41]
+                })
+            }
+        });
+    }
+}
+
 $(document).ready(function(){
     gpxedit.username = $('p#username').html();
     load_map();
 	document.onkeydown = checkKey;
 
+    $('select#markerstyleselect').change(function(e){
+        updateLeafletDrawMarkerStyle();
+    });
+    updateLeafletDrawMarkerStyle();
     $('body').on('click','button.popupOkButton', function(e) {
         var id = parseInt($(this).attr('layerid'));
         var name = $(this).parent().find('.layerName').val();
         var description = $(this).parent().find('.layerDesc').val();
         var comment = $(this).parent().find('.layerCmt').val();
+        var wst = $('#markerstyleselect').val();
 
         gpxedit.layersData[id].name = name;
         gpxedit.layersData[id].description = description;
         gpxedit.layersData[id].comment = comment;
-        gpxedit.layersData[id].layer.bindTooltip(name, {sticky:true});
+        gpxedit.layersData[id].layer.unbindTooltip();
+        if (name !== ''){
+            if (wst === 'tm' || wst === 'tp' || wst === 'ts'){
+                gpxedit.layersData[id].layer.bindTooltip(name, {permanent:true});
+            }
+            else{
+                gpxedit.layersData[id].layer.bindTooltip(name, {sticky:true});
+            }
+        }
 
         gpxedit.map.closePopup();
     });

templates/gpxcontent.php

@@ -64,6 +64,19 @@ echo '</p>'."\n";
 <div class="sidebar-pane" id="settings">
 <h1 class="sectiontitle"><?php p($l->t('Settings and extra actions')); ?></h1>
 <hr/>
+<br/>
+<label>Waypoint style:</label>
+<select id="markerstyleselect">
+	<option value="ts"><?php p($l->t('text+point')); ?></option>
+	<option value="s"><?php p($l->t('point')); ?></option>
+	<option value="tp"><?php p($l->t('text+pin')); ?></option>
+	<option value="p"><?php p($l->t('pin')); ?></option>
+	<option value="tm"><?php p($l->t('text+marker')); ?></option>
+	<option value="m"><?php p($l->t('marker')); ?></option>
+</select>
+<br/>
+<br/>
+<hr/>
 <br/>
     <h3 class="sectiontitle"><?php p($l->t('Custom tile servers')); ?></h3>
     <br/>