diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 2d31a501..1e12976d 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -21,11 +21,9 @@ L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { '© OpenStreetMap contributors', }).addTo(map); -// ------------------------------------------------------------ L.control.zoom({ position: "topright" }).addTo(map); -// -------------------------------------------------------------- L.Control.Search = L.Control.extend({ options: { position: "topleft", @@ -38,7 +36,7 @@ L.Control.Search = L.Control.extend({ container.insertAdjacentHTML( "beforeend", `
- +
` ); @@ -48,11 +46,10 @@ L.Control.Search = L.Control.extend({ new L.Control.Search().addTo(map); -// -------------------------------------------------------------- let startPoint, endPoint, polylineGeoJSON; let geojsonarray = []; -function addMarkers(coordinates) { +function addMarkers(coordinates, properties) { let LeafIcon = L.Icon.extend({ options: { iconSize: [40, 40], @@ -68,7 +65,7 @@ function addMarkers(coordinates) { startPoint = L.marker([coordinates[0][1], coordinates[0][0]]); endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]]); - // Adiciona marcadores nos pontos inicial e final + // Adiciona marcadores custom nos pontos inicial e final if (mapWrapper.dataset.mapsIconsPointA) { let startIcon = new LeafIcon({iconUrl: mapWrapper.dataset.mapsIconsPointA}) startPoint = L.marker([coordinates[0][1], coordinates[0][0]], {icon: startIcon}); @@ -78,18 +75,20 @@ function addMarkers(coordinates) { endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]], {icon: endIcon}); } - // Adiciona marcadores ao mapa - startPoint.addTo(map); - endPoint.addTo(map); + [startPoint, endPoint].forEach(marker => { + marker.bindPopup( + `Número: ${properties.ln_codigo}
` + + `Nome: ${properties.title}
` + + `Empresa responsável: ${properties.ln_empresa}
` + ).addTo(map); + }); } function addPolyline(coordinates, properties) { const lineColor = mapWrapper.dataset.mapsLinecolor; - // Remove linha existente if (polylineGeoJSON) map.removeLayer(polylineGeoJSON); - // Adiciona linha ao mapa polylineGeoJSON = L.geoJSON({ type: "LineString", coordinates: coordinates, @@ -101,20 +100,20 @@ function addPolyline(coordinates, properties) { fillOpacity: 0.5, }, onEachFeature: function (feature, layer) { - const linhaNum = properties.ln_codigo.toString(); - const linhaName = properties.title.toString(); - const linhaEmpresa = properties.ln_empresa.toString(); - - layer.bindPopup( - "Número:\n" + linhaNum + "
" + - "Nome:\n" + linhaName + "
" + - "Empresa responsável:\n" + linhaEmpresa + "
" - ); + layer.bindPopup( + `Número: ${properties.ln_codigo}
` + + `Nome: ${properties.title}
` + + `Empresa responsável: ${properties.ln_empresa}
` + ); }, }).addTo(map); } -new Autocomplete("local", { +new Autocomplete("show-all-values", { + clearButton: true, + cache: true, + showAllValues: true, + onSearch: ({ currentValue }) => { const api = mapWrapper.dataset.mapsGeojson; return new Promise((resolve) => { @@ -132,33 +131,18 @@ new Autocomplete("local", { }); resolve(result); }) - .catch((error) => { - console.error(error); - }); + .catch((error) => console.error(error)); }); }, - onResults: ({ matches, template }) => { - return matches === 0 - ? template - : matches - .map((el) => { - return ` -
  • -
    ${el.properties.title}
    -
  • `; - }) - .join(""); - }, + onResults: ({ matches, template }) => + matches === 0 ? template : matches.map((el) => `
  • ${el.properties.title}
  • `).join(""), onSubmit: ({ object }) => { const coordinates = object.geometry.coordinates; const properties = object.properties; - // Adiciona marcadores nos pontos inicial e final - addMarkers(coordinates); - - // Adiciona linha ao mapa + addMarkers(coordinates, properties); addPolyline(coordinates, properties); map.fitBounds(polylineGeoJSON.getBounds(), { padding: [150, 150] }); @@ -167,14 +151,13 @@ new Autocomplete("local", { geojsonarray.push(object.properties.id); }, - noResults: ({ currentValue, template }) => - template(`
  • Sem resultados: "${currentValue}"
  • `), + noResults: ({ currentValue, template }) => template(`
  • Sem resultados: "${currentValue}"
  • `), onReset: () => { // Remove marcadores e linha - if (startPoint) map.removeLayer(startPoint); - if (endPoint) map.removeLayer(endPoint); - if (polylineGeoJSON) map.removeLayer(polylineGeoJSON); + [startPoint, endPoint, polylineGeoJSON].forEach(layer => { + if (layer) map.removeLayer(layer); + }); geojsonarray = []; },