From 63d1f5d7033ff574aa1ef1184c8a222dc865536b Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Tue, 24 Oct 2023 15:28:20 -0300 Subject: [PATCH 1/6] fix: add console.log on map --- app/contrib/frontend/maps/static/maps/js/maps.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 5fd22690..4be3bda4 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -159,6 +159,7 @@ if (mapWrapper) { matches === 0 ? template : matches.map((el) => `
  • ${el.properties.ln_codigo} - ${el.properties.title}
    • `).join(""), onSubmit: ({ object }) => { + console.log("maps on submit", object) const coordinates = object.geometry.coordinates; const properties = object.properties; From 2020c8c33e73353279891e4619957b0101eb08a6 Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Tue, 24 Oct 2023 15:56:34 -0300 Subject: [PATCH 2/6] fix: remove autopan and scrollwheel --- app/contrib/frontend/maps/static/maps/css/maps.css | 3 +++ app/contrib/frontend/maps/static/maps/js/maps.js | 2 -- 2 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 app/contrib/frontend/maps/static/maps/css/maps.css diff --git a/app/contrib/frontend/maps/static/maps/css/maps.css b/app/contrib/frontend/maps/static/maps/css/maps.css new file mode 100644 index 00000000..a9c472e2 --- /dev/null +++ b/app/contrib/frontend/maps/static/maps/css/maps.css @@ -0,0 +1,3 @@ +.leaflet-pane .leaflet-map-pane { + will-change: transform; +} diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 4be3bda4..7719eb4a 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -2,8 +2,6 @@ let config = { minZoom: 7, maxZoom: 18, zoomControl: false, - autoPan: false, - scrollWheelZoom: false }; const zoom = 18; From 0ff94b468ffea8c1f6c12ddf28bdb3e7e9d06346 Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Tue, 24 Oct 2023 16:29:23 -0300 Subject: [PATCH 3/6] fix: refactor map popuptext and addto value --- .../frontend/maps/static/maps/js/maps.js | 69 +++++++++---------- 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 7719eb4a..76b858fd 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -46,9 +46,21 @@ if (mapWrapper) { new L.Control.Search().addTo(map); - let startPoint, endPoint, polylineGeoJSON; + let startPoint, endPoint, geojsonLayer, markersGeoJSON; let geojsonarray = []; + let popupText = (properties) => { + let ifObsProperty = !!properties?.observacoes ? `Obs: ${properties.observacoes}
    ` : ""; + + return `Número: ${properties.ln_codigo}
    ` + + `Nome: ${properties.title}
    ` + + `Empresa responsável: ${properties.ln_empresa}
    ` + + `Viagens em 2019: ${properties.viagens_em_2019}
    ` + + `Viagens em 2023: ${properties.viagens_em_2023}
    ` + + `Variação da linha: ${properties.reducao_linha}%
    ` + + ifObsProperty; + } + function addMarkers(coordinates, properties) { let LeafIcon = L.Icon.extend({ options: { @@ -62,41 +74,27 @@ if (mapWrapper) { if (startPoint) map.removeLayer(startPoint); if (endPoint) map.removeLayer(endPoint); - startPoint = L.marker([coordinates[0][1], coordinates[0][0]]); - endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]]); - - // 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}); - } - if (mapWrapper.dataset.mapsIconsPointB) { - let endIcon = new LeafIcon({iconUrl: mapWrapper.dataset.mapsIconsPointB}) - endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]], {icon: endIcon}); + function createMarker(iconUrl, coordinates) { + const icon = iconUrl ? new LeafIcon({ iconUrl }) : null; + return L.marker([coordinates[1], coordinates[0]], { icon }); } - let ifObsProperty = !!properties?.observacoes ? `Obs: ${properties.observacoes}
    ` : ""; + startPoint = createMarker(mapWrapper.dataset.mapsIconsPointA, coordinates[0]); + + endPoint = createMarker(mapWrapper.dataset.mapsIconsPointB, coordinates[coordinates.length -1]) + [startPoint, endPoint].forEach(marker => { - marker.bindPopup( - `Número: ${properties.ln_codigo}
    ` + - `Nome: ${properties.title}
    ` + - `Empresa responsável: ${properties.ln_empresa}
    ` + - `Viagens em 2019: ${properties.viagens_em_2019}
    ` + - `Viagens em 2023: ${properties.viagens_em_2023}
    ` + - `Variação da linha: ${properties.reducao_linha}%
    ` + - ifObsProperty - ).addTo(map); + marker.bindPopup(popupText(properties)) }); } function addPolyline(coordinates, properties) { const lineColor = mapWrapper.dataset.mapsLinecolor; - let ifObsProperty = !!properties?.observacoes ? `Obs: ${properties.observacoes}
    ` : ""; - if (polylineGeoJSON) map.removeLayer(polylineGeoJSON); + if (geojsonLayer) map.removeLayer(geojsonLayer); - polylineGeoJSON = L.geoJSON({ + geojsonLayer = L.geoJSON({ type: "LineString", coordinates: coordinates, }, { @@ -107,17 +105,9 @@ if (mapWrapper) { fillOpacity: 0.5, }, onEachFeature: function (feature, layer) { - layer.bindPopup( - `Número: ${properties.ln_codigo}
    ` + - `Nome: ${properties.title}
    ` + - `Empresa responsável: ${properties.ln_empresa}
    ` + - `Viagens em 2019: ${properties.viagens_em_2019}
    ` + - `Viagens em 2023: ${properties.viagens_em_2023}
    ` + - `Variação da linha: ${properties.reducao_linha}%
    ` + - ifObsProperty - ); + layer.bindPopup(popupText(properties)); }, - }).addTo(map); + }) } new Autocomplete("show-all-values", { @@ -161,20 +151,23 @@ if (mapWrapper) { const coordinates = object.geometry.coordinates; const properties = object.properties; - addMarkers(coordinates, properties); addPolyline(coordinates, properties); - map.fitBounds(polylineGeoJSON.getBounds(), { padding: [150, 150] }); + map.fitBounds(geojsonLayer.getBounds(), { padding: [150, 150] }); if (geojsonarray.includes(object.properties.id)) return; geojsonarray.push(object.properties.id); + + geojsonLayer.addTo(map); + // startPoint.addTo(map); + // endPoint.addTo(map); }, noResults: ({ currentValue, template }) => template(`
  • Sem resultados: "${currentValue}"
    • `), onReset: () => { // Remove marcadores e linha - [startPoint, endPoint, polylineGeoJSON].forEach(layer => { + [startPoint, endPoint, geojsonLayer].forEach(layer => { if (layer) map.removeLayer(layer); }); From 393a7e35de3967f346b4dda0fece076a3096498c Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Tue, 24 Oct 2023 17:12:40 -0300 Subject: [PATCH 4/6] fix: test example from geojson --- .../frontend/maps/static/maps/js/maps.js | 148 +++++++++--------- 1 file changed, 76 insertions(+), 72 deletions(-) diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 76b858fd..87a505ff 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -1,3 +1,8 @@ +/* eslint-disable no-undef */ +/** + * autocomplete with geojson + */ + let config = { minZoom: 7, maxZoom: 18, @@ -11,10 +16,8 @@ const lng = -46.63366; const mapWrapper = document.querySelector("#map"); if (mapWrapper) { - // Adiciona o mapa const map = L.map("map", config).setView([lat, lng], zoom); - // Carrega e mostra o layer L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors', @@ -36,7 +39,7 @@ if (mapWrapper) { container.insertAdjacentHTML( "beforeend", `
    - +
    ` ); @@ -46,11 +49,10 @@ if (mapWrapper) { new L.Control.Search().addTo(map); - let startPoint, endPoint, geojsonLayer, markersGeoJSON; let geojsonarray = []; let popupText = (properties) => { - let ifObsProperty = !!properties?.observacoes ? `Obs: ${properties.observacoes}
    ` : ""; + let ifObsProperty = !!properties?.observacoes ? `Obs: ${properties.observacoes}
    ` : ""; return `Número: ${properties.ln_codigo}
    ` + `Nome: ${properties.title}
    ` + @@ -61,60 +63,9 @@ if (mapWrapper) { ifObsProperty; } - function addMarkers(coordinates, properties) { - let LeafIcon = L.Icon.extend({ - options: { - iconSize: [40, 40], - iconAnchor: [22, 50], - popupAnchor: [-3, -76] - } - }); - - // Remove marcadores existentes - if (startPoint) map.removeLayer(startPoint); - if (endPoint) map.removeLayer(endPoint); - - function createMarker(iconUrl, coordinates) { - const icon = iconUrl ? new LeafIcon({ iconUrl }) : null; - return L.marker([coordinates[1], coordinates[0]], { icon }); - } - - startPoint = createMarker(mapWrapper.dataset.mapsIconsPointA, coordinates[0]); - - endPoint = createMarker(mapWrapper.dataset.mapsIconsPointB, coordinates[coordinates.length -1]) - - - [startPoint, endPoint].forEach(marker => { - marker.bindPopup(popupText(properties)) - }); - } - - function addPolyline(coordinates, properties) { - const lineColor = mapWrapper.dataset.mapsLinecolor; - - if (geojsonLayer) map.removeLayer(geojsonLayer); - - geojsonLayer = L.geoJSON({ - type: "LineString", - coordinates: coordinates, - }, { - style: { - color: lineColor || "red", - weight: 3, - opacity: 1, - fillOpacity: 0.5, - }, - onEachFeature: function (feature, layer) { - layer.bindPopup(popupText(properties)); - }, - }) - } - new Autocomplete("show-all-values", { - clearButton: true, - cache: true, - showAllValues: true, + new Autocomplete("local", { onSearch: ({ currentValue }) => { const api = mapWrapper.dataset.mapsGeojson; return new Promise((resolve) => { @@ -143,35 +94,88 @@ if (mapWrapper) { }); }, - onResults: ({ matches, template }) => - matches === 0 ? template : matches.map((el) => `
  • ${el.properties.ln_codigo} - ${el.properties.title}
    • `).join(""), + onResults: ({ matches, template }) => { + return matches === 0 + ? template + : matches + .map((el) => { + return ` +
  • +
    ${el.properties.ln_codigo} - ${el.properties.title}
    +
    • `; + }) + .join(""); + }, onSubmit: ({ object }) => { - console.log("maps on submit", object) - const coordinates = object.geometry.coordinates; const properties = object.properties; + const coordinates = object.geometry.coordinates; + const lineColor = mapWrapper.dataset.mapsLinecolor; + + const geojsonlayer = L.geoJSON(object, { + style: function (feature) { + return { + color: lineColor || "red", + weight: 7, + opacity: 1, + fillOpacity: 0.7, + }; + }, + onEachFeature: function (feature, layer) { + layer.bindPopup(popupText(properties)); + }, + }); - addPolyline(coordinates, properties); + const geojsonmarkers = (properties, coordinates) => { + + let LeafIcon = L.Icon.extend({ + options: { + iconSize: [40, 40], + iconAnchor: [22, 50], + popupAnchor: [-3, -76] + } + }); + + if (mapWrapper.dataset.mapsIconsPointA) { + const startIcon = new LeafIcon({ iconUrl: mapWrapper.dataset.mapsIconsPointA }); + startPoint = L.marker([coordinates[0][1], coordinates[0][0]], { icon: startIcon }).addTo(map); + } else { + startPoint = L.marker([coordinates[0][1], coordinates[0][0]]).addTo(map); + } + + if (mapWrapper.dataset.mapsIconsPointB) { + const endIcon = new LeafIcon({ iconUrl: mapWrapper.dataset.mapsIconsPointB }).addTo(map); + endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]], { icon: endIcon }).addTo(map); + } else { + endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]]).addTo(map); + } + + [startPoint, endPoint].forEach(marker => { + marker.bindPopup(popupText(properties)) + }); + } - map.fitBounds(geojsonLayer.getBounds(), { padding: [150, 150] }); + map.fitBounds(geojsonlayer.getBounds(), { padding: [150, 150] }); if (geojsonarray.includes(object.properties.id)) return; geojsonarray.push(object.properties.id); - geojsonLayer.addTo(map); - // startPoint.addTo(map); - // endPoint.addTo(map); + + geojsonmarkers(properties, coordinates); + geojsonlayer.addTo(map); }, - noResults: ({ currentValue, template }) => template(`
  • Sem resultados: "${currentValue}"
    • `), + noResults: ({ currentValue, template }) => + template(`
  • Sem resultados: "${currentValue}"
    • `), onReset: () => { - // Remove marcadores e linha - [startPoint, endPoint, geojsonLayer].forEach(layer => { - if (layer) map.removeLayer(layer); + // remove all layers + map.eachLayer(function (layer) { + if (!!layer.toGeoJSON) { + map.removeLayer(layer); + } }); - geojsonarray = []; }, - }); + }); } From 64eded714f6b2e1fef4a3fc1e5d5273caa1d9fa8 Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Tue, 24 Oct 2023 18:08:16 -0300 Subject: [PATCH 5/6] fix: add markers default --- app/contrib/frontend/maps/static/maps/js/maps.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 87a505ff..17915272 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -63,8 +63,6 @@ if (mapWrapper) { ifObsProperty; } - - new Autocomplete("local", { onSearch: ({ currentValue }) => { const api = mapWrapper.dataset.mapsGeojson; @@ -127,7 +125,6 @@ if (mapWrapper) { }); const geojsonmarkers = (properties, coordinates) => { - let LeafIcon = L.Icon.extend({ options: { iconSize: [40, 40], @@ -160,7 +157,6 @@ if (mapWrapper) { if (geojsonarray.includes(object.properties.id)) return; geojsonarray.push(object.properties.id); - geojsonmarkers(properties, coordinates); geojsonlayer.addTo(map); }, @@ -169,7 +165,6 @@ if (mapWrapper) { template(`
  • Sem resultados: "${currentValue}"
    • `), onReset: () => { - // remove all layers map.eachLayer(function (layer) { if (!!layer.toGeoJSON) { map.removeLayer(layer); From 5dab260a3f9885e2a413cfccbc2267996f5106b4 Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Wed, 25 Oct 2023 11:23:53 -0300 Subject: [PATCH 6/6] fix: add custom markers --- app/contrib/frontend/maps/static/maps/js/maps.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 17915272..fc6fa8a5 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -7,6 +7,9 @@ let config = { minZoom: 7, maxZoom: 18, zoomControl: false, + scrollWheelZoom: false, + dragging: false, + tap: false }; const zoom = 18; @@ -134,15 +137,15 @@ if (mapWrapper) { }); if (mapWrapper.dataset.mapsIconsPointA) { - const startIcon = new LeafIcon({ iconUrl: mapWrapper.dataset.mapsIconsPointA }); - startPoint = L.marker([coordinates[0][1], coordinates[0][0]], { icon: startIcon }).addTo(map); + let startIcon = new LeafIcon({iconUrl: mapWrapper.dataset.mapsIconsPointA}) + startPoint = L.marker([coordinates[0][1], coordinates[0][0]], {icon: startIcon}).addTo(map); } else { startPoint = L.marker([coordinates[0][1], coordinates[0][0]]).addTo(map); } - + if (mapWrapper.dataset.mapsIconsPointB) { - const endIcon = new LeafIcon({ iconUrl: mapWrapper.dataset.mapsIconsPointB }).addTo(map); - endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]], { icon: endIcon }).addTo(map); + let endIcon = new LeafIcon({iconUrl: mapWrapper.dataset.mapsIconsPointB}) + endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]], {icon: endIcon}).addTo(map); } else { endPoint = L.marker([coordinates[coordinates.length - 1][1], coordinates[coordinates.length - 1][0]]).addTo(map); }