Skip to content

Commit

Permalink
Merge pull request #138 from nossas/fix/map-ios-bug
Browse files Browse the repository at this point in the history 
Fix: Refatora uso de marcadores e linha para adequar as configs de iOS
  • Loading branch information
@miguelzinh3
miguelzinh3 authored Oct 26, 2023
2 parents 790acb5 + 5dab260 commit 269e317
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 90 deletions.
3 changes: 3 additions & 0 deletions app/contrib/frontend/maps/static/maps/css/maps.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.leaflet-pane .leaflet-map-pane {
will-change: transform;
}
174 changes: 84 additions & 90 deletions app/contrib/frontend/maps/static/maps/js/maps.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
/* eslint-disable no-undef */
/**
* autocomplete with geojson
*/

let config = {
minZoom: 7,
maxZoom: 18,
zoomControl: false,
autoPan: false,
scrollWheelZoom: false
scrollWheelZoom: false,
dragging: false,
tap: false
};

const zoom = 18;
Expand All @@ -13,10 +19,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:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
Expand All @@ -38,7 +42,7 @@ if (mapWrapper) {
container.insertAdjacentHTML(
"beforeend",
`<div class="auto-search-wrapper loupe">
<input type="text" id="show-all-values" autocomplete="off" placeholder="${searchPlaceholder}" />
<input type="text" id="local" autocomplete="off" placeholder="${searchPlaceholder}" />
</div>`
);

Expand All @@ -48,85 +52,21 @@ if (mapWrapper) {

new L.Control.Search().addTo(map);

let startPoint, endPoint, polylineGeoJSON;
let geojsonarray = [];

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);

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});
}

let popupText = (properties) => {
let ifObsProperty = !!properties?.observacoes ? `<span><strong>Obs:</strong> ${properties.observacoes}</span><br>` : "";

[startPoint, endPoint].forEach(marker => {
marker.bindPopup(
`<span><strong>Número:</strong> ${properties.ln_codigo}</span><br>` +
`<span><strong>Nome:</strong> ${properties.title}</span><br>` +
`<span><strong>Empresa responsável:</strong> ${properties.ln_empresa}</span><br>` +
`<span><strong>Viagens em 2019:</strong> ${properties.viagens_em_2019}</span><br>` +
`<span><strong>Viagens em 2023:</strong> ${properties.viagens_em_2023}</span><br>` +
`<span><strong>Variação da linha:</strong> ${properties.reducao_linha}%</span><br>` +
ifObsProperty
).addTo(map);
});
}

function addPolyline(coordinates, properties) {
const lineColor = mapWrapper.dataset.mapsLinecolor;
let ifObsProperty = !!properties?.observacoes ? `<span>Obs: ${properties.observacoes}</span><br>` : "";

if (polylineGeoJSON) map.removeLayer(polylineGeoJSON);

polylineGeoJSON = L.geoJSON({
type: "LineString",
coordinates: coordinates,
}, {
style: {
color: lineColor || "red",
weight: 3,
opacity: 1,
fillOpacity: 0.5,
},
onEachFeature: function (feature, layer) {
layer.bindPopup(
`<span><strong>Número:</strong> ${properties.ln_codigo}</span><br>` +
`<span><strong>Nome:</strong> ${properties.title}</span><br>` +
`<span><strong>Empresa responsável:</strong> ${properties.ln_empresa}</span><br>` +
`<span><strong>Viagens em 2019:</strong> ${properties.viagens_em_2019}</span><br>` +
`<span><strong>Viagens em 2023:</strong> ${properties.viagens_em_2023}</span><br>` +
`<span><strong>Variação da linha:</strong> ${properties.reducao_linha}%</span><br>` +
ifObsProperty
);
},
}).addTo(map);
return `<span><strong>Número:</strong> ${properties.ln_codigo}</span><br>` +
`<span><strong>Nome:</strong> ${properties.title}</span><br>` +
`<span><strong>Empresa responsável:</strong> ${properties.ln_empresa}</span><br>` +
`<span><strong>Viagens em 2019:</strong> ${properties.viagens_em_2019}</span><br>` +
`<span><strong>Viagens em 2023:</strong> ${properties.viagens_em_2023}</span><br>` +
`<span><strong>Variação da linha:</strong> ${properties.reducao_linha}%</span><br>` +
ifObsProperty;
}

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) => {
Expand Down Expand Up @@ -155,31 +95,85 @@ if (mapWrapper) {
});
},

onResults: ({ matches, template }) =>
matches === 0 ? template : matches.map((el) => `<li><div class="title">${el.properties.ln_codigo} - ${el.properties.title}</div></li>`).join(""),
onResults: ({ matches, template }) => {
return matches === 0
? template
: matches
.map((el) => {
return `
<li>
<div class="title">${el.properties.ln_codigo} - ${el.properties.title}</div>
</li>`;
})
.join("");
},

onSubmit: ({ 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));
},
});

addMarkers(coordinates, 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) {
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) {
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);
}

[startPoint, endPoint].forEach(marker => {
marker.bindPopup(popupText(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);

geojsonmarkers(properties, coordinates);
geojsonlayer.addTo(map);
},

noResults: ({ currentValue, template }) => template(`<li>Sem resultados: "${currentValue}"</li>`),
noResults: ({ currentValue, template }) =>
template(`<li>Sem resultados: "${currentValue}"</li>`),

onReset: () => {
// Remove marcadores e linha
[startPoint, endPoint, polylineGeoJSON].forEach(layer => {
if (layer) map.removeLayer(layer);
map.eachLayer(function (layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
}
});

geojsonarray = [];
},
});
});
}

0 comments on commit 269e317

Please sign in to comment.