CRM/jscss/gmap.js

const acess_token = 'pk.eyJ1IjoibW9oYW1lZHNlZGlrIiwiYSI6ImNrY20zbWY3cDBtcnAyenJ6cjBjdHF5MXEifQ.mn5aYu5MQpUnRm-yzNurKA';
const map_box_url = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token='+acess_token;
//const geocode_url = 'http://nominatim.openstreetmap.org/search?format=json&q=';


const lines_styles = [ [{color: 'green', opacity: 1, weight: 3}], [{color: 'red', opacity: 1, weight: 3}], [{color: 'blue', opacity: 1, weight: 3}], [{color: '#ebc634', opacity: 1, weight: 3}], [{color: '#eb6534', opacity: 1, weight: 3}], [{color: 'black', opacity: 1, weight: 3}], [{color: '#34eb46', opacity: 1, weight: 3}], [{color: '#eb7a34', opacity: 1, weight: 3}], [{color: '#cc34eb', opacity: 1, weight: 3}], [{color: '#cc34eb', opacity: 1, weight: 3}], [{color: '#eb6534', opacity: 1, weight: 3}], [{color: '#14A0D9', opacity: 1, weight: 3}], [{color: '#eb34a4', opacity: 1, weight: 3}] ];

const $latname = 'cf_986';
const $longname = 'cf_988';
const $messagebox = 'accountname';
const $idbox = 'accountid';

const gps_track_url = "gps_track.php";
const err_gps_track = "Veuillez vérifier votre connexion réseau";


var current_positionIcon = L.icon({
    iconUrl: window.location.protocol+"//"+window.location.hostname+"/sophalcrm/jscss/local.png",
    iconSize: [25, 25]
    });

var saveTrack = false;
function setParameters(psavetrack) {
    saveTrack = psavetrack;
}

function initMap(routes, userid) {

    var map = L.map('map').setView([34, 2], 6);

    L.tileLayer(map_box_url, {
        tileSize: 512,
        zoomOffset: -1,
        id: 'mapbox/streets-v11'
    }).addTo(map);

    parsed_json = JSON.parse(routes);

    k = 0
    parsed_json.forEach(element => {
    
            var waypoints = [];
            var new_pramassages = [];
            pramassages = element['pramassages'];
            pramassages.forEach(selement => {
                
                if(selement[$latname] != null && selement[$longname] != null && selement[$latname] != '' && selement[$longname] != '') {
                    waypoints.push(L.latLng(selement[$latname], selement[$longname]));
                    new_pramassages.push(selement);
                }
            });
        
            draw_route(map, waypoints, new_pramassages, k);
        
        k++;
    });

    var current_position;
    var msg = document.getElementById('msg');
    var gpsControl = new GPSControl({
	active: true,
        precision: 5,
        track: true,
        activeCallback: function(active) {
            msg.innerHTML += 'GPS tracking is active ? ' + active + '<br/>';
          },
        successCallback: latlng => {
            msg.innerHTML += 'GPS locating : ' + latlng + '<br/>';
            map.setView(latlng, 11);

            if (current_position) {
                map.removeLayer(current_position);
            }
            current_position = L.marker(latlng, {icon: current_positionIcon}).addTo(map);
            
            account = closeTo(parsed_json, latlng);
            if(saveTrack && account != null) {

                $.ajax({
                    url: gps_track_url,
                    type: 'POST',
                    data: {
                        gpslat: latlng.lat,
                        gpslng: latlng.lng,
                        userid: userid
                    },
                }).done(function (data) {
                    //alert(data);
                }).fail(function (jqXHR, textStatus) {
                    alert(err_gps_track);
                });
            }

        },
        errorCallback: error => {
            msg.innerHTML += 'GPS locating failed : ' + error.message + '<br/>';
        }
      }).addTo(map);
}


function closeTo(parsed_jsonp, position) {

    parsed_jsonp.forEach(element => {
        
        pramassages = element['pramassages'];
        pramassages.forEach(selement => {
            
            if(selement[$latname] != null && selement[$longname] != null && selement[$latname] != '' && selement[$longname] != '') {
                
                point = L.latLng(selement[$latname], selement[$longname]);
                distance = position.distanceTo(point);
                if(distance < 1000) {
                    return selement[$idbox];
                }
            }
        });
    
    });

    return null;
}


function draw_route(map, waypoints, new_pramassages, k) {
    

    var routingControl= L.Routing.control({
        waypoints: waypoints, 
        router: L.Routing.mapbox(acess_token),
        plan: L.Routing.plan(waypoints, {
            createMarker: function(i, wp) {
                
                if(waypoints[0]) {

                    var pramassage = new_pramassages[i][$messagebox];
                    var pramassageid = new_pramassages[i][$idbox];
                   /*
                    var employes = new_pramassages[i]['employes'];
                         
                    var allemployes = "";
                    if(employes && employes != "") {
                        employes.forEach(element => {
                            allemployes = allemployes+"</br>"+element["fullname"];
                        });
                    }
                        
                    marker = L.marker(wp.latLng, { draggable: false }).bindPopup('<button style="background: transparent; border-style: none;" id='+pramassageid+' onclick="openPosting(this.id)">'+pramassage+'</br>'+allemployes+'</button>').openPopup();*/
                    marker = L.marker(wp.latLng, { draggable: false }).bindPopup('<button style="background: transparent; border-style: none;" id='+pramassageid+' onclick="openPosting(this.id)">'+pramassage+'</br>'+'</button>').openPopup();
                    /*
                    marker.on('click', function onClick(e) {
                        var popup = e.target.getPopup();
                        var content = popup.getContent();
                    });*/

                 return marker;
                }
            },
        }),
        lineOptions: {
            styles: lines_styles[k]
        },fitSelectedRoutes: false
        
        /*
        routeLine: function(route) {
            var line = L.Routing.line(route, {
                addWaypoints: false,
                extendToWaypoints: false,
                routeWhileDragging: false,
                //autoRoute: true,
                useZoomParameter: false,
                draggableWaypoints: false,
                styles:lines_styles[k]
            });
            line.on('click',function(e) {
                alert('e');
            });
            console.log(line);
            return line;
        },
        router: L.Routing.mapbox(acess_token),
        routeWhileDragging: false,
        //autoRoute: true,
        useZoomParameter: false,
        draggableWaypoints: false,
        show:false,
        addWaypoints:false*/
    });

    routingControl.addTo(map);
}


function openPosting(p) {
    //alert(p);
}