RPJosh
/
nc-gpxedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

merge-requests/1/head
Julien Veyssier 2016-12-06 16:23:14 +01:00
parent bf6c42b3f7
commit bfe39ad302
4 changed files with 111 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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

7
css/gpxedit.css
View File

@ -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');

84
js/gpxedit.js
View File

@ -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();
if (wst === 'tp' || wst === 'p'){
var m = L.marker(latlng, {
icon: L.divIcon({
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);
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);
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.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();
});

13
templates/gpxcontent.php
View File

@ -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/>