Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Refatora uso de marcadores e linha para adequar as configs de iOS #138

Merged
merged 6 commits into from
Oct 26, 2023
Merged

Fix: Refatora uso de marcadores e linha para adequar as configs de iOS #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63d1f5d
fix: add console.log on map
miguelzinh3 Oct 24, 2023
2020c8c
fix: remove autopan and scrollwheel
miguelzinh3 Oct 24, 2023
0ff94b4
fix: refactor map popuptext and addto value
miguelzinh3 Oct 24, 2023
393a7e3
fix: test example from geojson
miguelzinh3 Oct 24, 2023
64eded7
fix: add markers default
miguelzinh3 Oct 24, 2023
5dab260
fix: add custom markers
miguelzinh3 Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/contrib/frontend/maps/static/maps/css/maps.css
View file
Open in desktop
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
Open in desktop
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 = [];
},
});
});
}
Loading