Subversion Repositories eFlore/Applications.cel

import {NOMINATIM_OSM_URL,TbPlaces} from "./modules/Locality.js";

const tileLayers = {
    googleHybrid: [
        'https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
        {
            attribution: '<a href="https://www.google.com" target="_blank">\xa9 Google Maps</a>',
            subdomains: ["mt0","mt1","mt2","mt3"],
            maxZoom: 20
        }
    ],
    osm: [
        'https://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png',
        {
            attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
            maxZoom: 18
        }
    ]
};
const defaultPosition = {
    lat: 47.0504,
    lng: 2.2347
};
const defaultCityZoom = 12;
const defaultZoom = 4;
const geometryFilterDefault = 'point';
const defaultMapIdAttr = 'tb-geolocation';
const markerImgBaseUrl = URL_BASE +'js/tb-geoloc/img/';
const markerIcon = L.Icon.extend({
    options: {
        shadowUrl: markerImgBaseUrl +'marker-shadow.png',
        iconAnchor: new L.Point(12, 40),//correctly replaces the dot of the pointer
        iconSize: new L.Point(24,40),
        iconUrl: markerImgBaseUrl +'marker-icon.png',
    }
});
const defaultPolylineOptions = {
    shapeOptions: {
        weight: 5
    },
    showLength: true,
    repeatMode: false
};

const drawLocale = {
    edit: {
        handlers: {
            edit: {
                tooltip: {
                    subtext: 'Cliquer sur annuler pour supprimer les changements',
                    text: 'Déplacez les marqueurs pour modifier leur position'
                }
            },
            remove: {
                tooltip: {
                    text: 'cliquer sur une ligne pour supprimer'
                }
            }
        },
        toolbar: {
            actions: {
                cancel: {
                    text: 'Annuler',
                    title: 'Annuler'
                },
                clearAll: {
                    text: 'Effacer',
                    title: 'Tout effacer'
                },
                save: {
                    text: 'Sauvegarder',
                    title: 'Sauvegarder les changements'
                }
            },
            buttons: {
                edit: 'Editer',
                editDisabled: 'Rien à editer',
                remove: 'Supprimer',
                removeDisabled: 'Rien à supprimer'
            }
        }
    },
    draw : {
        toolbar: {
            actions: {
                text: 'Annuler',
                title: 'Annuler'
            },
            buttons: {
                polyline: 'Dessiner une ligne',
                marker: 'Pointer une position'
            },
            finish: {
                text: 'Terminer',
                title: 'Terminer'
            },
            undo: {
                text: 'Supprimer',
                title: 'Supprimer le dernier point'
            }
        },
        handlers: {
            polyline: {
                tooltip: {
                    start: 'Cliquer sur la carte pour placer le début de la ligne',
                    cont: 'Positionner le prochain point et cliquer',
                    end: 'Re-cliquer sur le dernier point pour finir la ligne'
                }
            },
            marker: {
                tooltip: {
                    start: 'Cliquer sur la carte pour placer le marqueur'
                }
            },
            rectangle: {tooltip: {}},
            simpleshape: {tooltip: {}},
            circle: {tooltip: {}},
            circlemarker: {tooltip: {}}
        }
    }
};

/***************************************************/

export function Geoloc() {
    this.map = {};
    this.coordinates = defaultPosition;
    this.geojson = {};
    this.editableLayers = {};
    this.defaultDrawControlOptions = {};
    this.drawControl = {};
    this.defaultEditOptions = false;
    this.layer = {};
};

Geoloc.prototype.init = function(suffix = '') {
    this.mapIdAttr = defaultMapIdAttr + suffix;
    this.geolocLabel = document.getElementById('geoloc-label' + suffix);
    this.initForm();
    this.initEvts();
};

Geoloc.prototype.initForm = function() {
    this.mapEl = document.getElementById(this.mapIdAttr);
    this.zoom = this.mapEl.dataset.zoom || defaultZoom;
    this.geometryFilter = this.mapEl.dataset.typeLocalisation || geometryFilterDefault;

    const formSuffix = this.mapEl.dataset.formSuffix;

    this.latitudeEl = document.getElementById('latitude' + formSuffix);
    this.longitudeEl = document.getElementById('longitude' + formSuffix);
};

Geoloc.prototype.initEvts = function() {
    this.initMap();
    this.initMapCoordinates();
    this.initSearchLocality();
};

Geoloc.prototype.initMap = function() {
    this.map = this.createLocationMap();

    // interactions with map
    this.map.on(L.Draw.Event.CREATED, evt => {
        this.layer = evt.layer;

        // created marker or polyline with drawControl
        // no more need this drawcontrol: remove
        // (polyline: another one will be added with only edit toolbar)
        this.map.removeControl(this.drawControl);

        if ('marker' === evt.layerType) {
            this.onMarkerCreated();
        } else if ('polyline' === evt.layerType) {
            this.handlePolylineEvents();
        }
    });

    this.map.on(L.Draw.Event.EDITED, evt => {
        const layers = evt.layers;

        this.map.removeLayer(this.layer);

        layers.eachLayer(layer => {
            this.layer = layer;
            this.handlePolylineEvents(false);
        });
    });

    this.map.on(L.Draw.Event.DELETED, evt => {
        this.reSetDrawControl();
    });
};

Geoloc.prototype.initMapCoordinates = function() {
    if (!!this.latitudeEl.value && !!this.longitudeEl.value) {
        this.setMapCoordinates({
            'lat': this.latitudeEl.value,
            'lng': this.longitudeEl.value
        });
    }
    this.onCoordinates();
};

Geoloc.prototype.reSetDrawControl = function() {
    this.map.removeLayer(this.layer);
    this.map.removeControl(this.drawControl);
    this.setDrawControl(this.map);
};

Geoloc.prototype.createLocationMap = function() {
    const lthis = this,
        map = L.map(this.mapIdAttr, {zoomControl: true, gestureHandling: true}).setView([this.coordinates.lat, this.coordinates.lng], this.zoom),
        tileLayer = this.mapEl.dataset.layer || 'osm';

    L.tileLayer(...tileLayers[tileLayer]).addTo(map);

    this.editableLayers = new L.FeatureGroup();
    map.addLayer(this.editableLayers);

    this.setDrawControl(map);

    return map;
};

Geoloc.prototype.setDrawControl = function(map) {
    this.defaultDrawControlOptions = this.generateDrawControlOptions();
    this.drawControl = this.generateDrawControl(...Object.values(this.defaultDrawControlOptions));
    map.addControl(this.drawControl);
};

Geoloc.prototype.generateDrawControlOptions = function() {
    const options = {
        editOptions: false,
        markerOptions: false,
        polylineOptions: false
    };

    this.defaultEditOptions = {
        featureGroup: this.editableLayers,// REQUIRED!!
        remove: true
    }

    switch (this.geometryFilter) {
        case 'point':
            options.markerOptions = {
                icon: new markerIcon(),
                repeatMode: false
            };
            break;
        case 'rue':
            options.polylineOptions = defaultPolylineOptions;
            break;
        default:
            break;
    }

    return options;
};

Geoloc.prototype.generateDrawControl = function(
    editOptions,
    markerOptions = false,
    polylineOptions = false
) {
    L.drawLocal = drawLocale;

    return new L.Control.Draw({
        position: 'topleft',
        draw: {
            polyline: polylineOptions,
            polygon: false,
            circle: false,
            rectangle: false,
            marker: markerOptions,
            circlemarker: false
        },
        edit: editOptions
    });
};

Geoloc.prototype.onMarkerCreated = function() {
    const coordinates = this.layer.getLatLng();

    this.handleNewLocation(coordinates);
};

Geoloc.prototype.handleMarkerEvents = function() {
    if(this.map) {
        const lthis = this;
        // move marker on click
        $(this.map).off('click').on('click', function(evt) {
            lthis.handleNewLocation(evt.originalEvent.latlng);
        });
        // move marker on drag
        $(this.map.marker).off('dragend').on('dragend', function() {
            lthis.handleNewLocation(lthis.map.marker.getLatLng());
        });
    }
};

Geoloc.prototype.handlePolylineEvents = function(requiresNewEditDrawControl = true) {
    const latLngs = this.layer.getLatLngs(),
        polyline = this.formatPolyline(latLngs),
        coordinates = this.layer.getBounds().getCenter();


    if (requiresNewEditDrawControl) {
        this.drawControl = this.generateDrawControl(this.defaultEditOptions);
        this.map.addControl(this.drawControl);
    }

    // make polyline removable
    this.editableLayers.addLayer(L.polyline(latLngs));

    this.map.addLayer(this.layer);
    this.handleNewLocation(coordinates, polyline);
};

/**
 * triggers location event
 * @param coordinates.
 * @param coordinates.lat latitude.
 * @param coordinates.lng longitude.
 * @param {array||null} polyline array of coordinates object
 */
Geoloc.prototype.handleNewLocation = function (coordinates, polyline = []) {
    coordinates = this.formatCoordinates(coordinates);

    if(!!coordinates && !!coordinates.lat && coordinates.lng) {
        this.zoom = 20;
        this.setMapCoordinates(coordinates);

        if('point' === this.geometryFilter) {
            this.createDraggableMarker();
            this.handleMarkerEvents();
        }

        if (
            ('rue' === this.geometryFilter && 0 < polyline.length) ||
            ('point' === this.geometryFilter && 0 === polyline.length)
        ) {
            this.getLocationInfo(coordinates, polyline);
        }
    }
};

Geoloc.prototype.formatCoordinates = function (coordinates) {
    coordinates.lat = Number.parseFloat(coordinates.lat);
    coordinates.lng = Number.parseFloat(coordinates.lng);

    if(Number.isNaN(coordinates.lat) || Number.isNaN(coordinates.lng)) {
        return null;
    }

    return coordinates;
};

Geoloc.prototype.formatPolyline = function (latLngs) {
    const polyline = [];

    latLngs.forEach(coordinates => polyline.push(Object.values(coordinates)));

    return polyline;
};

Geoloc.prototype.setMapCoordinates = function (coordinates) {
    this.coordinates = coordinates;
    // updates map
    this.map.setView(coordinates,this.zoom);
};

Geoloc.prototype.createDraggableMarker = function() {
    if (undefined === this.map.marker) {
        // after many attempts, did not manage
        // to make marker from draw control draggable
        // solution: replace it
        if(this.layer) {
            this.map.removeLayer(this.layer);
        }
        this.map.marker = new L.Marker(this.coordinates, {
            draggable: true,
            icon: new markerIcon()
        });
        this.layer = this.map.marker;
        this.map.addLayer(this.map.marker);
        if(this.drawControl) {
            this.map.removeControl(this.drawControl);
        }
    }

    this.map.marker.setLatLng(this.coordinates, {draggable: 'true'});
};

Geoloc.prototype.getLocationInfo = function(coordinates, polyline) {
    const lthis = this,
        url = NOMINATIM_OSM_URL+'reverse',
        params = {
            'format': 'json',
            'lat': coordinates.lat,
            'lon': coordinates.lng
        };

    this.geolocLabel.classList.add('loading');

    $.ajax({
        method: "GET",
        url: url,
        data: params,
        success: function(locationData) {
            locationData.centroid = lthis.formatPointTypeCoordinates(coordinates);
            locationData.geojson = 'rue' === lthis.geometryFilter ? {type: 'LineString', coordinates: polyline} : locationData.centroid;
            lthis.loadGeolocation(coordinates,locationData);
        },
        error: (err) => {
            console.warn(err);
            lthis.geolocLabel.classList.remove('loading');
        }
    });
};

Geoloc.prototype.formatPointTypeCoordinates = function(coordinates) {
    return {type : 'Point', coordinates: Object.values(coordinates)};
};

Geoloc.prototype.loadGeolocation = function(coordinates,locationData) {
    const lthis = this,
        query = {
            'lat': coordinates.lat,
            'lon': coordinates.lng
        };

    $.ajax({
        method: "GET",
        url: URL_GEOLOC_SERVICE,
        data: query,
        success: function (geoLocationData) {
            lthis.triggerLocationEvent(
                lthis.formatLocationEventObject(locationData,geoLocationData)
            );
            lthis.geolocLabel.classList.remove('loading');
        },
        error:  (err) => {
            console.warn(err);
            lthis.geolocLabel.classList.remove('loading');
        }
    });
};

Geoloc.prototype.triggerLocationEvent = function(locationDataObject) {
    const locationEvent = new CustomEvent('location', {detail: locationDataObject});

    this.mapEl.dispatchEvent(locationEvent);
};

Geoloc.prototype.formatLocationEventObject = function(locationData,geoLocationData) {
    const detail = {
        centroid: locationData.centroid,
        geometry: locationData.geojson,
        elevation: geoLocationData.altitude,
        inseeData: {
            code: geoLocationData.code_zone,
            nom: geoLocationData.nom
        },
        osmCountry: locationData.address.country,
        osmCountryCode: geoLocationData.code_pays,
        osmCounty: locationData.address.county,
        osmPostcode: locationData.address.postcode,
        locality: this.getLocalityFromData(locationData),
        locality: geoLocationData.nom,
        osmRoad: locationData.address.road,
        osmState: locationData.address.state,
        osmId: locationData.osm_id,
        osmPlaceId: locationData.place_id
    };

    return detail;
};

Geoloc.prototype.handleCoordinates = function() {
    if (!!this.latitudeEl.value && !!this.longitudeEl.value) {
        this.handleNewLocation({
            'lat': this.latitudeEl.value,
            'lng': this.longitudeEl.value
        });
    }
};

Geoloc.prototype.onCoordinates = function() {
    [this.latitudeEl,this.longitudeEl].forEach(coordinate =>
        coordinate.addEventListener('blur', function() {
            this.handleCoordinates();
        }.bind(this))
    );
};

Geoloc.prototype.initSearchLocality = function() {
    const placesZone = document.getElementById('tb-places-zone');

    if(placesZone) {
        placesZone.classList.remove('hidden');
        this.tbPlaces = new TbPlaces(this.tbPlacesCallback.bind(this));
        this.tbPlaces.init();
    }
};

Geoloc.prototype.tbPlacesCallback = function(localityData) {
    const locality = this.getLocalityFromData(localityData);

    if(!!locality) {
        const coordinates = this.formatCoordinates({
            'lat' : localityData.lat,
            'lng' : localityData.lon
        });

        if(!!coordinates && !!coordinates.lat && !!coordinates.lng) {
            this.zoom = 20;
            this.setMapCoordinates(coordinates);

            if('point' === this.geometryFilter) {
                this.map.removeControl(this.drawControl);
                this.createDraggableMarker();
                this.handleMarkerEvents();
            }

            localityData.centroid = this.formatPointTypeCoordinates(coordinates);
            if('rue' !== this.geometryFilter && 'Polygon' === localityData.geojson.type ) {
                localityData.geojson = localityData.centroid;
            }
            this.loadGeolocation(coordinates,localityData);
        }
    }
};

Geoloc.prototype.getLocalityFromData = function(localityData) {
    const addressData = localityData.address,
        locationNameType = ['village', 'city', 'locality', 'municipality', 'county'].find(locationNameType => addressData[locationNameType] !== undefined);

    if (!locationNameType) {
        return;
    }

    return addressData[locationNameType];
};

Geoloc.prototype.closeMap = function () {
    // reset map
    this.map = L.DomUtil.get(this.mapIdAttr);
    if (this.map != null) {
        this.map._leaflet_id = null;
    }
};