@osimatic/helpers-js 1.5.18 → 1.5.20

package/contact_details.js

@@ -56,10 +56,6 @@ class TelephoneNumber {
 		TelephoneNumber.localCountryCode = countryCode;
 	}
 
-	static setIntlTelInputUtilsPath(path) {
-		TelephoneNumber.intlTelInputUtilsPath = path;
-	}
-
 	static getCountryIsoCode(phoneNumber, localCountryIsoCode=TelephoneNumber.localCountryCode) {
 		try {
 			const number = libphonenumber.parsePhoneNumber(phoneNumber, localCountryIsoCode.toUpperCase());
@@ -172,12 +168,10 @@ class TelephoneNumber {
 
 	static setIntlTelInput(input, placeholderNumberType) {
 		TelephoneNumber.localCountryCode = typeof TelephoneNumber.localCountryCode != 'undefined' ? TelephoneNumber.localCountryCode : null;
-		TelephoneNumber.intlTelInputUtilsPath = typeof TelephoneNumber.intlTelInputUtilsPath != 'undefined' ? TelephoneNumber.intlTelInputUtilsPath : null;
 
 		return intlTelInputLib(input[0], {
 			initialCountry: null != TelephoneNumber.localCountryCode ? TelephoneNumber.localCountryCode.toLowerCase() : null, // depuis version 19.x, le code pays doit être en minuscule
 			placeholderNumberType: placeholderNumberType || 'FIXED_LINE_OR_MOBILE',
-			utilsScript: TelephoneNumber.intlTelInputUtilsPath
 		});
 	}
 

package/location.js

@@ -17,6 +17,9 @@ class Country {
 
 	static fillCountrySelect(select, defaultValue=null, countriesList=null, addNoneValue=false, noneLabel='- Aucun -') {
 		select = toEl(select);
+		if (!select) {
+			return;
+		}
 		if (select.children.length === 0) {
 			if (addNoneValue) {
 				select.insertAdjacentHTML('beforeend', '<option value="">'+noneLabel+'</option>');

package/open_street_map.js

@@ -1,4 +1,5 @@
 const L = require('leaflet');
+require('leaflet-draw');
 const { toEl } = require('./util');
 
 /**
@@ -7,27 +8,6 @@ const { toEl } = require('./util');
  * https://www.openstreetmap.org/help
  */
 class OpenStreetMap {
-
-	constructor(mapContainer, options={}) {
-		mapContainer = toEl(mapContainer);
-		/*let [lat, lng] = button.data('coordinates').split(',');
-		let map = L.map('modal_map_canvas2').setView([lat, lng], 17);
-
-		L.marker([lat, lng], {
-			icon: L.icon({iconUrl: getIconOfMapMarker(button.data('type_marker'))}),
-			title: popoverContent.title
-			//popupopen: setTimeout(displayEmployeesAndCompaniesAndTasks, 250)
-		}).addTo(map)
-			.bindPopup(popoverContent.content)
-			//.openPopup()
-		;*/
-
-		this.markers = [];
-		this.locations = [];
-
-		this.map = OpenStreetMap.createMap(mapContainer, options);
-	}
-
 	static createMap(mapContainer, options={}) {
 		mapContainer = toEl(mapContainer);
 		if (!mapContainer) {
@@ -51,6 +31,58 @@ class OpenStreetMap {
 		return map;
 	}
 
+	/**
+	 * Initialize a draw control on a Leaflet map.
+	 * @param {L.Map} map
+	 * @param {object} options
+	 * @param {boolean} options.polygonAllowed
+	 * @param {function} options.onCreated  - callback(type: 'point'|'polygon', data: {lat,long}|{latlngs})
+	 * @param {function} options.onDeleted  - callback()
+	 * @param {function} options.onEdited   - callback(type, data)
+	 * @returns {L.Control.Draw}
+	 */
+	static initDrawControl(map, options = {}) {
+		if (!map) {
+			return null;
+		}
+		
+		const { polygonAllowed = false, onCreated, onDeleted, onEdited } = options;
+
+		const drawn = new L.FeatureGroup().addTo(map);
+		const drawControl = new L.Control.Draw({
+			draw: {
+				polygon: polygonAllowed ? { allowIntersection: false, showArea: true } : false,
+				polyline: false, rectangle: false, circle: false, circlemarker: false,
+				marker: true
+			},
+			edit: { featureGroup: drawn, remove: true }
+		});
+		map.addControl(drawControl);
+
+		if (typeof onCreated === 'function') {
+			map.on('draw:created', (e) => {
+				if (e.layerType === 'marker') {
+					const { lat, lng: long } = e.layer.getLatLng();
+					onCreated('point', { lat, long }, e.layer);
+				} else if (polygonAllowed && e.layerType === 'polygon') {
+					onCreated('polygon', { latlngs: e.layer.getLatLngs()[0] }, e.layer);
+				}
+				drawn.addLayer(e.layer);
+			});
+		}
+		if (typeof onDeleted === 'function') {
+			map.on('draw:deleted', () => onDeleted());
+		}
+		if (typeof onEdited === 'function') {
+			map.on('draw:edited', (e) => {
+				// pass raw event for flexibility
+				onEdited(e);
+			});
+		}
+
+		return drawControl;
+	}
+
 	static getUrl(latitude, longitude) {
 		return 'https://www.openstreetmap.org/?mlat='+latitude+'&mlon='+longitude+'#map=17/'+latitude+'/'+longitude+'&layers=N';
 		//return 'https://www.openstreetmap.org/#map=17/'+latitude+'/'+longitude+'';
@@ -61,57 +93,261 @@ class OpenStreetMap {
 		return OpenStreetMap.getUrl(parseFloat(locationCoordinates[0]), parseFloat(locationCoordinates[1]));
 	}
 
-	setZoom(zoom) {
-		this.map.setZoom(zoom);
+	static centerOnFrance(map) {
+		if (!map) {
+			return;
+		}
+		
+		map.setView([46.52863469527167, 2.43896484375], 6);
 	}
 
-	deleteMarkers() {
-		this.locations = [];
+	static getCountryBoundingBoxes() {
+		return {
+			// Europe
+			"fr": [[41.333, -5.142], [51.091, 9.559]], // France,
+			"de": [[47.270, 5.866], [55.058, 15.041]], // Germany
+			"es": [[27.642, -18.167], [43.792, 4.327]], // Spain incl. Canaries (approx)
+			"it": [[36.619, 6.627], [47.095, 18.520]], // Italy
+			"pt": [[36.840, -9.500], [42.280, -6.190]], // Portugal
+			"be": [[49.497, 2.545], [51.505, 6.407]], // Belgium
+			"nl": [[50.753, 3.358], [53.555, 7.227]], // Netherlands
+			"ch": [[45.818, 5.957], [47.808, 10.492]], // Switzerland
+			"at": [[46.372, 9.530], [49.021, 17.162]], // Austria
+			"gb": [[49.959, -8.649], [59.478, 1.759]], // United Kingdom,
+			"ie": [[51.390, -10.480], [55.387, -5.432]], // Ireland
+			"pl": [[49.003, 14.123], [54.836, 24.145]], // Poland
+			"se": [[55.340, 11.112], [69.061, 24.177]], // Sweden
+			"no": [[57.980, 4.500], [71.188, 31.078]], // Norway (Mainland approx)
+			"fi": [[59.810, 20.556], [70.092, 31.586]], // Finland
+			"dk": [[54.560, 8.089], [57.752, 12.690]], // Denmark
+
+			// Afrique / Moyen-Orient
+			"ma": [[27.662, -13.172], [35.922, -0.996]], // Morocco
+			"dz": [[18.976, -8.669], [37.093, 11.999]], // Algeria
+			"tn": [[30.233, 7.524], [37.544, 11.598]], // Tunisia
+			"eg": [[21.725, 24.700], [31.667, 36.895]], // Egypt
+			"za": [[-34.833, 16.470], [-22.126, 32.893]], // South Africa
+			"sa": [[15.615, 34.495], [32.154, 55.666]], // Saudi Arabia
+			"ae": [[22.634, 51.570], [26.084, 56.383]], // United Arab Emirates
+			"il": [[29.487, 34.268], [33.277, 35.876]], // Israel
 
-		//this.markers.forEach(marker => marker.setMap(null));
+			// Amériques
+			"us": [[24.396, -124.848], [49.384, -66.885]], // United States (Contiguous)
+			"ca": [[41.675, -141.000], [83.113, -52.648]], // Canada
+			"mx": [[14.538, -118.365], [32.720, -86.711]], // Mexico
+			"br": [[-33.751, -73.987], [5.271, -34.729]], // Brazil
+			"ar": [[-55.051, -73.582], [-21.781, -53.591]], // Argentina
 
-		this.markers.length = 0;
-		this.markers = [];
+			// Asie / Océanie
+			"cn": [[18.159, 73.499], [53.560, 134.772]], // China (mainland approx)
+			"in": [[6.554, 68.176], [35.674, 97.402]], // India
+			"jp": [[24.249, 122.938], [45.557, 153.987]], // Japan
+			"au": [[-43.740, 112.921], [-10.668, 153.639]], // Australia
+			"nz": [[-47.290, 166.509], [-34.392, 178.517]], // New Zealand
+		};
 	}
 
-	addMarkers(listLocations, icon) {
-		if (listLocations.length === 0) {
+	static getCountryBoundingBox(countryIsoCode) {
+		if (!countryIsoCode) {
+			return null;
+		}
+
+		const key = countryIsoCode.toLowerCase().trim();
+		const countryBox = OpenStreetMap.getCountryBoundingBoxes()[key];
+		return countryBox ? countryBox : null;
+	}
+
+	static centerMapOnCountry(map, countryIsoCode, opts = {}) {
+		if (!map) {
+			return;
+		}
+
+		const boundingBox = OpenStreetMap.getCountryBoundingBox(countryIsoCode);
+		if (null === boundingBox) {
 			return;
 		}
 
-		listLocations.forEach(location => this.addMarker(location, icon));
+		const padding = Array.isArray(opts.padding) ? opts.padding : [20, 20];
+		const minZoom = Number.isFinite(opts.minZoom) ? opts.minZoom : 3;
+		const maxZoomSmall = Number.isFinite(opts.maxZoomSmall) ? opts.maxZoomSmall : 10;
+		const maxZoomTiny  = Number.isFinite(opts.maxZoomTiny)  ? opts.maxZoomTiny  : 12;
+
+		// Estimation de "taille" en degrés
+		const [[S, W], [N, E]] = boundingBox;
+		const latSpan = Math.max(0.0001, Math.abs(N - S));
+		const lonSpan = Math.max(0.0001, Math.abs(E - W));
+		const areaDeg = latSpan * lonSpan;
+
+		// Heuristique de zoom maximal selon la taille du pays (en degrés²)
+		// (fitBounds choisira le zoom, plafonné par maxZoom ci-dessous)
+		let maxZoom;
+		if (areaDeg > 200) {        // très grand (US, CA, AU, BR, CN)
+			maxZoom = 7;
+		} else if (areaDeg > 50) {  // grand
+			maxZoom = 8;
+		} else if (areaDeg > 20) {  // moyen+
+			maxZoom = 9;
+		} else if (areaDeg > 5) {   // moyen/petit
+			maxZoom = maxZoomSmall;   // ~10
+		} else {                    // petit/micro-état
+			maxZoom = maxZoomTiny;    // ~12
+		}
+
+		// fitBounds avec maxZoom pour éviter d'over-zoomer les petits pays
+		const bounds = L.latLngBounds([ [S, W], [N, E] ]);
+		map.fitBounds(bounds, { padding, maxZoom });
+		if (map.getZoom() < minZoom) {
+			map.setZoom(minZoom);
+		}
 	}
 
-	addMarker(coordinates, options) {
+	static centerMapToLocations(map, locationsList, padding=[20,20], maxZoom=18) {
+		if (!map || locationsList.length === 0) {
+			return;
+		}
+
+		map.invalidateSize(false);
+
+		const bounds = L.latLngBounds(locationsList);
+		map.fitBounds(bounds, { padding: padding });
+		if (map.getZoom() > maxZoom) {
+			map.setZoom(maxZoom);
+		}
+	}
+
+	static centerMapToGooglePlace(map, place) {
+		if (place && place.geometry && place.geometry.location) {
+			const loc = place.geometry.location;
+			OpenStreetMap.centerMapToCoordinates(map, loc.lat(), loc.lng());
+		}
+	}
+
+	static centerMapToCoordinates(map, lat, long) {
+		if (!map) {
+			return;
+		}
+		map.setView([lat, long], Math.max(map.getZoom(), 15));
+	}
+
+	static clearSelections(map) {
+		if (map) {
+			map.eachLayer((layer) => {
+				if (layer instanceof L.Marker) {
+					layer.remove();
+				}
+			});
+		}
+	}
+
+	static addTempMarker(map, lat, lon, onDragEnd) {
+		const tempLayer = L.marker([lat, lon], { draggable: true });
+		map.addLayer(tempLayer);
+		if (typeof onDragEnd === 'function') {
+			tempLayer.on('dragend', function(e) {
+				onDragEnd(e.target);
+			});
+		}
+		return tempLayer;
+	}
+
+	static resetTempSelection(map, tempLayer) {
+		if (tempLayer && map) {
+			map.removeLayer(tempLayer);
+		}
+	}
+
+	static destroyMap(map) {
+		if (!map) {
+			return;
+		}
+		
+		map.off();
+		map.remove();
+	}
+
+	static setZoom(map, zoom) {
+		if (!map) {
+			return;
+		}
+		
+		map.setZoom(zoom);
+	}
+
+	static setView(map, location, zoom) {
+		if (!map) {
+			return;
+		}
+		
+		map.setView(location, zoom);
+	}
+
+	static addMarker(map, coordinates, options) {
+		if (!map) {
+			return null;
+		}
+		
 		let locationCoordinates = coordinates.split(',');
 		let latitude = parseFloat(locationCoordinates[0]);
 		let longitude = parseFloat(locationCoordinates[1]);
 
-		let marker = L.marker([latitude, longitude], {
-			icon: L.icon({
+		const markerOptions = {};
+		if (options['icon']) {
+			markerOptions.icon = L.icon({
 				iconUrl: options['icon'],
-				iconSize: [22, 32],
-			}),
-			title: options['title'],
-		});
+				iconSize: [22, 32]
+			});
+		}
+		if (options['title']) {
+			markerOptions.title = options['title'];
+		}
 
-		//marker.on('click', () => {
-		marker.on('popupopen', () => {
-			//console.log('popupopen');
-			if (typeof options['on_click'] == 'function') {
-				options['on_click']();
-			}
-			return false;
-		});
-		marker.addTo(this.map);
-		marker.bindPopup(options['popup']);
+		let marker = L.marker([latitude, longitude], markerOptions);
 
-		this.markers.push(marker);
-		this.locations.push([latitude, longitude]);
+		if (options['on_click'] || options['popupopen']) {
+			marker.on('popupopen', () => {
+				if (typeof options['on_click'] == 'function') {
+					options['on_click']();
+				}
+				if (typeof options['popupopen'] == 'function') {
+					options['popupopen']();
+				}
+				return false;
+			});
+		}
+
+		marker.addTo(map);
+
+		if (options['popup']) {
+			marker.bindPopup(options['popup']);
+		}
+
+		return marker;
 	}
 
-	addGeoJson(geoJson, options) {
-		OpenStreetMap.displayGeoJSONOnMap(this.map, geoJson, options);
+	static addMarkers(map, listLocations, icon) {
+		if (!map || listLocations.length === 0) {
+			return [];
+		}
+		return listLocations.map(location => OpenStreetMap.addMarker(map, location, icon));
+	}
+
+	static connectMarkers(map, locations) {
+		if (!map || locations.length === 0) {
+			return;
+		}
+
+		let prevLocation = null;
+		let listLineCoordinates = [];
+		locations.forEach(location => {
+			if (prevLocation != null) {
+				listLineCoordinates.push([prevLocation, location]);
+			}
+			prevLocation = location;
+		});
+
+		listLineCoordinates.forEach(line => {
+			L.polyline(line, {color: '#728bec'}).addTo(map);
+		});
 	}
 
 	/**
@@ -199,7 +435,7 @@ class OpenStreetMap {
 				console.warn('displayGeoJSONOnMap: Polygon invalide');
 				return null;
 			}
-			// Leaflet accepte un tableau d’anneaux pour L.polygon
+			// Leaflet accepte un tableau d'anneaux pour L.polygon
 			const poly = L.polygon(rings, polygonStyle);
 			addLayer(poly);
 
@@ -215,168 +451,102 @@ class OpenStreetMap {
 		return null;
 	}
 
-	setView(location, zoom) {
-		this.map.setView(location, zoom);
-	}
+}
 
-	centerOnFrance() {
-		OpenStreetMap.centerOnFrance(this.map);
-	}
+class OsmMap {
 
-	static centerOnFrance(map) {
-		map.setView([46.52863469527167, 2.43896484375], 6);
+	constructor(mapContainer, options={}) {
+		mapContainer = toEl(mapContainer);
+		this.markers = [];
+		this.locations = [];
+		this.tempSelection = null;
+		this.tempLayer = null;
+		this.map = OpenStreetMap.createMap(mapContainer, options);
 	}
 
-	static getCountryBoundingBoxes() {
-		return {
-			// Europe
-			"fr": [[41.333, -5.142], [51.091, 9.559]], // France,
-			"de": [[47.270, 5.866], [55.058, 15.041]], // Germany
-			"es": [[27.642, -18.167], [43.792, 4.327]], // Spain incl. Canaries (approx)
-			"it": [[36.619, 6.627], [47.095, 18.520]], // Italy
-			"pt": [[36.840, -9.500], [42.280, -6.190]], // Portugal
-			"be": [[49.497, 2.545], [51.505, 6.407]], // Belgium
-			"nl": [[50.753, 3.358], [53.555, 7.227]], // Netherlands
-			"ch": [[45.818, 5.957], [47.808, 10.492]], // Switzerland
-			"at": [[46.372, 9.530], [49.021, 17.162]], // Austria
-			"gb": [[49.959, -8.649], [59.478, 1.759]], // United Kingdom,
-			"ie": [[51.390, -10.480], [55.387, -5.432]], // Ireland
-			"pl": [[49.003, 14.123], [54.836, 24.145]], // Poland
-			"se": [[55.340, 11.112], [69.061, 24.177]], // Sweden
-			"no": [[57.980, 4.500], [71.188, 31.078]], // Norway (Mainland approx)
-			"fi": [[59.810, 20.556], [70.092, 31.586]], // Finland
-			"dk": [[54.560, 8.089], [57.752, 12.690]], // Denmark
+	setZoom(zoom) {
+		OpenStreetMap.setZoom(this.map, zoom);
+	}
 
-			// Afrique / Moyen-Orient
-			"ma": [[27.662, -13.172], [35.922, -0.996]], // Morocco
-			"dz": [[18.976, -8.669], [37.093, 11.999]], // Algeria
-			"tn": [[30.233, 7.524], [37.544, 11.598]], // Tunisia
-			"eg": [[21.725, 24.700], [31.667, 36.895]], // Egypt
-			"za": [[-34.833, 16.470], [-22.126, 32.893]], // South Africa
-			"sa": [[15.615, 34.495], [32.154, 55.666]], // Saudi Arabia
-			"ae": [[22.634, 51.570], [26.084, 56.383]], // United Arab Emirates
-			"il": [[29.487, 34.268], [33.277, 35.876]], // Israel
+	deleteMarkers() {
+		this.locations = [];
+		this.markers.length = 0;
+		this.markers = [];
+	}
 
-			// Amériques
-			"us": [[24.396, -124.848], [49.384, -66.885]], // United States (Contiguous)
-			"ca": [[41.675, -141.000], [83.113, -52.648]], // Canada
-			"mx": [[14.538, -118.365], [32.720, -86.711]], // Mexico
-			"br": [[-33.751, -73.987], [5.271, -34.729]], // Brazil
-			"ar": [[-55.051, -73.582], [-21.781, -53.591]], // Argentina
+	clearSelections() {
+		OpenStreetMap.clearSelections(this.map);
+	}
 
-			// Asie / Océanie
-			"cn": [[18.159, 73.499], [53.560, 134.772]], // China (mainland approx)
-			"in": [[6.554, 68.176], [35.674, 97.402]], // India
-			"jp": [[24.249, 122.938], [45.557, 153.987]], // Japan
-			"au": [[-43.740, 112.921], [-10.668, 153.639]], // Australia
-			"nz": [[-47.290, 166.509], [-34.392, 178.517]], // New Zealand
-		};
+	addTempMarker(lat, lon) {
+		this.tempLayer = OpenStreetMap.addTempMarker(this.map, lat, lon, (selection) => {
+			const ll = selection.getLatLng();
+			this.tempSelection = { type: 'point', lat: ll.lat, long: ll.lng };
+		});
 	}
 
-	static getCountryBoundingBox(countryIsoCode) {
-		if (!countryIsoCode) {
-			return null;
-		}
+	resetTempSelection() {
+		this.tempLayer = OpenStreetMap.resetTempSelection(this.map, this.tempLayer);
+		this.tempSelection = null;
+	}
 
-		const key = countryIsoCode.toLowerCase().trim();
-		const countryBox = OpenStreetMap.getCountryBoundingBoxes()[key];
-		return countryBox ? countryBox : null;
+	addMarkers(listLocations, icon) {
+		OpenStreetMap.addMarkers(this.map, listLocations, icon).forEach(marker => {
+			const { lat, lng } = marker.getLatLng();
+			this.markers.push(marker);
+			this.locations.push([lat, lng]);
+		});
 	}
 
-	static centerMapOnCountry(map, countryIsoCode, opts = {}) {
-		if (!map) {
+	addMarker(coordinates, options) {
+		const marker = OpenStreetMap.addMarker(this.map, coordinates, options);
+		if (!marker) {
 			return;
 		}
+		const { lat, lng } = marker.getLatLng();
+		this.markers.push(marker);
+		this.locations.push([lat, lng]);
+	}
 
-		const boundingBox = OpenStreetMap.getCountryBoundingBox(countryIsoCode);
-		if (null === boundingBox) {
-			return;
-		}
+	addGeoJson(geoJson, options) {
+		OpenStreetMap.displayGeoJSONOnMap(this.map, geoJson, options);
+	}
 
-		const padding = Array.isArray(opts.padding) ? opts.padding : [20, 20];
-		const minZoom = Number.isFinite(opts.minZoom) ? opts.minZoom : 3;
-		const maxZoomSmall = Number.isFinite(opts.maxZoomSmall) ? opts.maxZoomSmall : 10;
-		const maxZoomTiny  = Number.isFinite(opts.maxZoomTiny)  ? opts.maxZoomTiny  : 12;
+	destroyMap() {
+		OpenStreetMap.destroyMap(this.map);
+	}
 
-		// Estimation de "taille" en degrés
-		const [[S, W], [N, E]] = boundingBox;
-		const latSpan = Math.max(0.0001, Math.abs(N - S));
-		const lonSpan = Math.max(0.0001, Math.abs(E - W));
-		const areaDeg = latSpan * lonSpan;
+	setView(location, zoom) {
+		OpenStreetMap.setView(this.map, location, zoom);
+	}
 
-		// Heuristique de zoom maximal selon la taille du pays (en degrés²)
-		// (fitBounds choisira le zoom, plafonné par maxZoom ci-dessous)
-		let maxZoom;
-		if (areaDeg > 200) {        // très grand (US, CA, AU, BR, CN)
-			maxZoom = 7;
-		} else if (areaDeg > 50) {  // grand
-			maxZoom = 8;
-		} else if (areaDeg > 20) {  // moyen+
-			maxZoom = 9;
-		} else if (areaDeg > 5) {   // moyen/petit
-			maxZoom = maxZoomSmall;   // ~10
-		} else {                    // petit/micro-état
-			maxZoom = maxZoomTiny;    // ~12
-		}
+	centerOnFrance() {
+		OpenStreetMap.centerOnFrance(this.map);
+	}
 
-		// fitBounds avec maxZoom pour éviter d'over-zoomer les petits pays
-		const bounds = L.latLngBounds([ [S, W], [N, E] ]);
-		map.fitBounds(bounds, { padding, maxZoom });
-		if (map.getZoom() < minZoom) {
-			map.setZoom(minZoom);
-		}
+	centerOnCountry(countryIsoCode, opts) {
+		OpenStreetMap.centerMapOnCountry(this.map, countryIsoCode, opts);
 	}
 
 	centerOnMarkers(padding) {
 		OpenStreetMap.centerMapToLocations(this.map, this.locations, padding);
 	}
 
-	static centerMapToLocations(map, locationsList, padding=[20,20], maxZoom=18) {
-		if (!map || locationsList.length === 0) {
-			return;
-		}
-
-		map.invalidateSize(false);
-
-		const bounds = L.latLngBounds(locationsList);
-		map.fitBounds(bounds, { padding: padding });
-		if (map.getZoom() > maxZoom) {
-			map.setZoom(maxZoom);
-		}
+	centerOnGooglePlace(place) {
+		OpenStreetMap.centerMapToGooglePlace(this.map, place);
 	}
 
-	static centerMapToGooglePlace(map, place) {
-		if (place && place.geometry && place.geometry.location) {
-			const loc = place.geometry.location;
-			OpenStreetMap.centerMapToCoordinates(map, loc.lat(), loc.lng());
-		}
+	centerOnCoordinates(lat, long) {
+		OpenStreetMap.centerMapToCoordinates(this.map, lat, long);
 	}
 
-	static centerMapToCoordinates(map, lat, long) {
-		if (!map) {
-			return;
-		}
-		map.setView([lat, long], Math.max(map.getZoom(), 15));
+	initDrawControl(options) {
+		return OpenStreetMap.initDrawControl(this.map, options);
 	}
 
 	connectMarkers() {
-		if (this.locations.length === 0) {
-			return;
-		}
-
-		let prevLocation = null;
-		let listLineCoordinates = [];
-		this.locations.forEach(location => {
-			if (prevLocation != null) {
-				listLineCoordinates.push([prevLocation, location]);
-			}
-			prevLocation = location;
-		});
-
-		listLineCoordinates.forEach(line => {
-			L.polyline(line, {color: '#728bec'}).addTo(this.map);
-		});
+		OpenStreetMap.connectMarkers(this.map, this.locations);
 	}
 }
 
-module.exports = { OpenStreetMap };
+module.exports = { OpenStreetMap, OsmMap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.5.18",
+  "version": "1.5.20",
   "main": "main.js",
   "scripts": {
     "test": "jest",
@@ -21,11 +21,14 @@
   "peerDependencies": {
     "intl-tel-input": ">=19.0",
     "leaflet": ">=1.9",
+    "leaflet-draw": ">=1.0",
     "papaparse": ">=5.0"
   },
   "devDependencies": {
     "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0"
+    "jest-environment-jsdom": "^30.2.0",
+    "leaflet-draw": "^1.0.4",
+    "papaparse": "^5.5.3"
   },
   "publishConfig": {
     "access": "public"

package/paging.js

@@ -133,7 +133,14 @@ class Pagination {
 
 class Navigation {
 	static activateTab(a) {
+		a = toEl(a);
+		if (!a) {
+			return;
+		}
 		let ulNav = a.closest('.nav');
+		if (!ulNav) {
+			return;
+		}
 		let tabContent = ulNav.parentElement.querySelector('.tab-content');
 
 		ulNav.querySelectorAll('a.nav-link').forEach(navLink => {

package/tests/contact_details.test.js

@@ -179,13 +179,6 @@ describe('TelephoneNumber', () => {
 		});
 	});
 
-	describe('setIntlTelInputUtilsPath', () => {
-		test('should set intl tel input utils path', () => {
-			const path = '/path/to/utils.js';
-			TelephoneNumber.setIntlTelInputUtilsPath(path);
-			expect(TelephoneNumber.intlTelInputUtilsPath).toBe(path);
-		});
-	});
 
 	describe('getCountryIsoCode', () => {
 		test('should return country code for valid phone number', () => {