refs #6 load symbol ok, a few symbols known

css/gpxedit.css

@@ -476,6 +476,40 @@ input[type=checkbox]
     width: 25px !important;
     height: 41px !important;
 }
+.flag-blue
+{
+    background-image: url('images/symbols/flag-blue.png') !important;
+    width: 18px !important;
+    height: 25px !important;
+}
+.flag-red
+{
+    background-image: url('images/symbols/flag-red.png') !important;
+    width: 18px !important;
+    height: 25px !important;
+}
+.flag-green
+{
+    background-image: url('images/symbols/flag-green.png') !important;
+    width: 18px !important;
+    height: 25px !important;
+}
+/*
+Block, Blue
+Blue Diamond
+City (Capitol)
+Flag, Blue
+Multi-cache
+Parking Area
+Pin, Blue
+Residence
+Traditional Cache
+Trailhead
+Unknown Cache
+Virtual Cache
+Event Cache
+Waypoint
+ */
 
 .popupImage{
     width: 80px;

js/gpxedit.js

@@ -10,6 +10,21 @@ var gpxedit = {
     layersData: {}
 };
 
+var symbolIcons = {
+    'Flag, Green': L.divIcon({
+        className: 'flag-green',
+        iconAnchor: [1, 25]
+    }),
+    'Flag, Red': L.divIcon({
+        className: 'flag-red',
+        iconAnchor: [1, 25]
+    }),
+    'Flag, Blue': L.divIcon({
+        className: 'flag-blue',
+        iconAnchor: [1, 25]
+    }),
+}
+
 function load_map() {
   var layer = getUrlParameter('layer');
   console.log('layer '+layer);
@@ -371,26 +386,26 @@ function generateGpx(){
 }
 
 // adds a marker and initialize its data
-function drawMarker(latlng, name, desc, cmt){
+function drawMarker(latlng, name, desc, cmt, sym){
     var wst = $('#markerstyleselect').val();
-    if (wst === 'tp' || wst === 'p'){
+    var symboo = $('#symboloverwrite').is(':checked');
-        var m = L.marker(latlng, {
+    var m = L.marker(latlng);
-              icon: L.divIcon({
+    if (symboo && sym !== '' && symbolIcons.hasOwnProperty(sym)){
+        m.setIcon(symbolIcons[sym]);
+    }
+    else if (wst === 'tp' || wst === 'p'){
+        m.setIcon(L.divIcon({
             className: 'leaflet-div-icon2',
             iconAnchor: [5, 30]
-              })
+        }));
-        });
     }
     else if (wst === 'ts' || wst === 's'){
-        var m = L.marker(latlng, {
+        m.setIcon(L.divIcon({
-            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);
     if (name !== ''){
@@ -404,6 +419,7 @@ function drawMarker(latlng, name, desc, cmt){
     gpxedit.layersData[layer.gpxedit_id].name = name;
     gpxedit.layersData[layer.gpxedit_id].comment = cmt;
     gpxedit.layersData[layer.gpxedit_id].description = desc;
+    gpxedit.layersData[layer.gpxedit_id].symbol = sym;
 }
 
 // adds a polyline and initialize its data
@@ -437,12 +453,13 @@ function parseGpx(xml){
         var name = $(this).find('name').text();
         var cmt = $(this).find('cmt').text();
         var desc = $(this).find('desc').text();
+        var sym = $(this).find('sym').text();
         var ele = $(this).find('ele').text();
         if (ele !== ''){
-            drawMarker([lat, lon, ele], name, desc, cmt);
+            drawMarker([lat, lon, ele], name, desc, cmt, sym);
         }
         else{
-            drawMarker([lat, lon], name, desc, cmt);
+            drawMarker([lat, lon], name, desc, cmt, sym);
         }
     });
     dom.find('trk').each(function(){
@@ -639,12 +656,20 @@ function updateLeafletDrawMarkerStyle(){
             icon: theicon
         }
     });
+
+    var symboo = $('#symboloverwrite').is(':checked');
     gpxedit.editableLayers.eachLayer(function(layer){
         var id = layer.gpxedit_id;
         var name = gpxedit.layersData[id].name;
+        var symbol = gpxedit.layersData[id].symbol;
         if (layer.type === 'marker'){
+            if (symboo && symbol !== '' && symbolIcons.hasOwnProperty(symbol)){
+                layer.setIcon(symbolIcons[symbol]);
+            }
+            else{
                 layer.setIcon(theicon);
             }
+        }
         if (name !== ''){
             layer.unbindTooltip();
             if (wst === 'tm' || wst === 'tp' || wst === 'ts'){
@@ -680,12 +705,16 @@ function restoreOptions(){
 	if (optionsValues.clearbeforeload !== undefined){
         $('#clearbeforeload').prop('checked', optionsValues.clearbeforeload);
     }
+	if (optionsValues.symboloverwrite !== undefined){
+        $('#symboloverwrite').prop('checked', optionsValues.symboloverwrite);
+    }
 }
 
 function saveOptions(){
     var optionsValues = {};
     optionsValues.markerstyle = $('#markerstyleselect').val();
 	optionsValues.clearbeforeload = $('#clearbeforeload').is(':checked');
+	optionsValues.symboloverwrite = $('#symboloverwrite').is(':checked');
     //alert('to save : '+JSON.stringify(optionsValues));
 
     var req = {
@@ -714,6 +743,10 @@ $(document).ready(function(){
         updateLeafletDrawMarkerStyle();
 		saveOptions();
     });
+    $('body').on('change','#symboloverwrite', function() {
+        updateLeafletDrawMarkerStyle();
+		saveOptions();
+    });
     // to set the draw style
     updateLeafletDrawMarkerStyle();
 	$('body').on('change','#clearbeforeload', function() {

templates/gpxcontent.php

@@ -75,6 +75,8 @@ echo '</p>'."\n";
 	<option value="m"><?php p($l->t('marker')); ?></option>
 </select>
 <br/>
+<input id="symboloverwrite" type="checkbox"></input>
+<label for="symboloverwrite">Use gpx symbol if set</label>
 <br/>
 <hr/>
 <br/>