From c6f6982d13ec8a5be9d32b70b91478898c9e5e41 Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Fri, 6 Oct 2023 03:39:18 -0300 Subject: [PATCH 1/2] fix: add popup on marker in Map plugin --- .../frontend/maps/static/maps/js/maps.js | 73 +++++++------------ 1 file changed, 28 insertions(+), 45 deletions(-) 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 = []; }, From 71d0e35eecbee8f105c0c6912981bd750ba4bf3a Mon Sep 17 00:00:00 2001 From: miguelzinh3 Date: Fri, 6 Oct 2023 04:01:00 -0300 Subject: [PATCH 2/2] feat: add custom placeholder to Map plugin --- .../migrations/0004_maps_search_placeholder.py | 18 ++++++++++++++++++ app/contrib/frontend/maps/models.py | 1 + .../frontend/maps/static/maps/js/maps.js | 3 ++- .../maps/templates/maps/plugins/map.html | 1 + 4 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 app/contrib/frontend/maps/migrations/0004_maps_search_placeholder.py diff --git a/app/contrib/frontend/maps/migrations/0004_maps_search_placeholder.py b/app/contrib/frontend/maps/migrations/0004_maps_search_placeholder.py new file mode 100644 index 00000000..988d28c8 --- /dev/null +++ b/app/contrib/frontend/maps/migrations/0004_maps_search_placeholder.py @@ -0,0 +1,18 @@ +# Generated by Django 3.2 on 2023-10-06 06:51 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('maps', '0003_auto_20231005_1327'), + ] + + operations = [ + migrations.AddField( + model_name='maps', + name='search_placeholder', + field=models.CharField(blank=True, max_length=80, verbose_name='Placeholder do Campo de Busca'), + ), + ] diff --git a/app/contrib/frontend/maps/models.py b/app/contrib/frontend/maps/models.py index 80971811..e919b31a 100644 --- a/app/contrib/frontend/maps/models.py +++ b/app/contrib/frontend/maps/models.py @@ -26,3 +26,4 @@ class Maps(CMSPlugin): ) point_a = models.FileField(upload_to="maps/icons/", blank=True, null=True) point_b = models.FileField(upload_to="maps/icons/", blank=True, null=True) + search_placeholder = models.CharField("Placeholder do Campo de Busca", max_length=80, blank=True) diff --git a/app/contrib/frontend/maps/static/maps/js/maps.js b/app/contrib/frontend/maps/static/maps/js/maps.js index 1e12976d..a192aead 100644 --- a/app/contrib/frontend/maps/static/maps/js/maps.js +++ b/app/contrib/frontend/maps/static/maps/js/maps.js @@ -30,13 +30,14 @@ L.Control.Search = L.Control.extend({ }, onAdd: function () { const container = L.DomUtil.create("div", "autocomplete-container"); + const searchPlaceholder = mapWrapper.dataset.mapsSearchplaceholder; L.DomEvent.disableClickPropagation(container); container.insertAdjacentHTML( "beforeend", `
    - +
    ` ); diff --git a/app/contrib/frontend/maps/templates/maps/plugins/map.html b/app/contrib/frontend/maps/templates/maps/plugins/map.html index 850daa77..ae2cbed3 100644 --- a/app/contrib/frontend/maps/templates/maps/plugins/map.html +++ b/app/contrib/frontend/maps/templates/maps/plugins/map.html @@ -12,6 +12,7 @@ data-maps-geojson="{{ instance.geojson.url }}" {% if instance.point_a %}data-maps-icons-point-A="{{ instance.point_a.url }}"{% endif %} {% if instance.point_b %}data-maps-icons-point-B="{{ instance.point_b.url }}"{% endif %} + data-maps-searchplaceholder="{{ instance.search_placeholder }}" data-maps-linecolor="{{ instance.line_color }}">