Extract functions to get coordinates in map JS
We had 130 lines long function, and we're trying to reduce its size so it's easier to follow the code.
This commit is contained in:
@@ -18,45 +18,13 @@
|
|||||||
App.Map.maps = [];
|
App.Map.maps = [];
|
||||||
},
|
},
|
||||||
initializeMap: function(element) {
|
initializeMap: function(element) {
|
||||||
var addMarkerInvestments, clearFormfields, createMarker, dataCoordinates, editable, formCoordinates,
|
var addMarkerInvestments, centerData, clearFormfields, createMarker,
|
||||||
getPopupContent, latitudeInputSelector, longitudeInputSelector, map, mapAttribution, mapCenterLatLng,
|
editable, getPopupContent, markerData, map, mapAttribution,
|
||||||
mapCenterLatitude, mapCenterLongitude, mapTilesProvider, marker, markerIcon, markerLatitude,
|
mapCenterLatLng, mapTilesProvider, marker, markerIcon, moveOrPlaceMarker,
|
||||||
markerLongitude, moveOrPlaceMarker, openMarkerPopup, removeMarker, removeMarkerSelector,
|
openMarkerPopup, removeMarker, removeMarkerSelector, updateFormfields;
|
||||||
updateFormfields, zoom, zoomInputSelector;
|
|
||||||
App.Map.cleanInvestmentCoordinates(element);
|
App.Map.cleanInvestmentCoordinates(element);
|
||||||
mapTilesProvider = $(element).data("map-tiles-provider");
|
mapTilesProvider = $(element).data("map-tiles-provider");
|
||||||
mapAttribution = $(element).data("map-tiles-provider-attribution");
|
mapAttribution = $(element).data("map-tiles-provider-attribution");
|
||||||
latitudeInputSelector = $(element).data("latitude-input-selector");
|
|
||||||
longitudeInputSelector = $(element).data("longitude-input-selector");
|
|
||||||
zoomInputSelector = $(element).data("zoom-input-selector");
|
|
||||||
formCoordinates = {
|
|
||||||
lat: $(latitudeInputSelector).val(),
|
|
||||||
long: $(longitudeInputSelector).val(),
|
|
||||||
zoom: $(zoomInputSelector).val()
|
|
||||||
};
|
|
||||||
dataCoordinates = {
|
|
||||||
lat: $(element).data("marker-latitude"),
|
|
||||||
long: $(element).data("marker-longitude")
|
|
||||||
};
|
|
||||||
if (App.Map.validCoordinates(formCoordinates)) {
|
|
||||||
markerLatitude = formCoordinates.lat;
|
|
||||||
markerLongitude = formCoordinates.long;
|
|
||||||
mapCenterLatitude = formCoordinates.lat;
|
|
||||||
mapCenterLongitude = formCoordinates.long;
|
|
||||||
} else if (App.Map.validCoordinates(dataCoordinates)) {
|
|
||||||
markerLatitude = dataCoordinates.lat;
|
|
||||||
markerLongitude = dataCoordinates.long;
|
|
||||||
mapCenterLatitude = dataCoordinates.lat;
|
|
||||||
mapCenterLongitude = dataCoordinates.long;
|
|
||||||
} else {
|
|
||||||
mapCenterLatitude = $(element).data("map-center-latitude");
|
|
||||||
mapCenterLongitude = $(element).data("map-center-longitude");
|
|
||||||
}
|
|
||||||
if (App.Map.validZoom(formCoordinates.zoom)) {
|
|
||||||
zoom = formCoordinates.zoom;
|
|
||||||
} else {
|
|
||||||
zoom = $(element).data("map-zoom");
|
|
||||||
}
|
|
||||||
removeMarkerSelector = $(element).data("marker-remove-selector");
|
removeMarkerSelector = $(element).data("marker-remove-selector");
|
||||||
addMarkerInvestments = $(element).data("marker-investments-coordinates");
|
addMarkerInvestments = $(element).data("marker-investments-coordinates");
|
||||||
editable = $(element).data("marker-editable");
|
editable = $(element).data("marker-editable");
|
||||||
@@ -97,14 +65,18 @@
|
|||||||
updateFormfields();
|
updateFormfields();
|
||||||
};
|
};
|
||||||
updateFormfields = function() {
|
updateFormfields = function() {
|
||||||
$(latitudeInputSelector).val(marker.getLatLng().lat);
|
var inputs = App.Map.coordinatesInputs(element);
|
||||||
$(longitudeInputSelector).val(marker.getLatLng().lng);
|
|
||||||
$(zoomInputSelector).val(map.getZoom());
|
inputs.lat.val(marker.getLatLng().lat);
|
||||||
|
inputs.long.val(marker.getLatLng().lng);
|
||||||
|
inputs.zoom.val(map.getZoom());
|
||||||
};
|
};
|
||||||
clearFormfields = function() {
|
clearFormfields = function() {
|
||||||
$(latitudeInputSelector).val("");
|
var inputs = App.Map.coordinatesInputs(element);
|
||||||
$(longitudeInputSelector).val("");
|
|
||||||
$(zoomInputSelector).val("");
|
inputs.lat.val("");
|
||||||
|
inputs.long.val("");
|
||||||
|
inputs.zoom.val("");
|
||||||
};
|
};
|
||||||
openMarkerPopup = function(e) {
|
openMarkerPopup = function(e) {
|
||||||
marker = e.target;
|
marker = e.target;
|
||||||
@@ -119,15 +91,19 @@
|
|||||||
getPopupContent = function(data) {
|
getPopupContent = function(data) {
|
||||||
return "<a href='/budgets/" + data.budget_id + "/investments/" + data.investment_id + "'>" + data.investment_title + "</a>";
|
return "<a href='/budgets/" + data.budget_id + "/investments/" + data.investment_id + "'>" + data.investment_title + "</a>";
|
||||||
};
|
};
|
||||||
mapCenterLatLng = new L.LatLng(mapCenterLatitude, mapCenterLongitude);
|
|
||||||
map = L.map(element.id, { scrollWheelZoom: false }).setView(mapCenterLatLng, zoom);
|
centerData = App.Map.centerData(element);
|
||||||
|
mapCenterLatLng = new L.LatLng(centerData.lat, centerData.long);
|
||||||
|
map = L.map(element.id, { scrollWheelZoom: false }).setView(mapCenterLatLng, centerData.zoom);
|
||||||
map.attributionControl.setPrefix(App.Map.attributionPrefix());
|
map.attributionControl.setPrefix(App.Map.attributionPrefix());
|
||||||
App.Map.maps.push(map);
|
App.Map.maps.push(map);
|
||||||
L.tileLayer(mapTilesProvider, {
|
L.tileLayer(mapTilesProvider, {
|
||||||
attribution: mapAttribution
|
attribution: mapAttribution
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
if (markerLatitude && markerLongitude && !addMarkerInvestments) {
|
|
||||||
marker = createMarker(markerLatitude, markerLongitude);
|
markerData = App.Map.markerData(element);
|
||||||
|
if (markerData.lat && markerData.long && !addMarkerInvestments) {
|
||||||
|
marker = createMarker(markerData.lat, markerData.long);
|
||||||
}
|
}
|
||||||
if (editable) {
|
if (editable) {
|
||||||
$(removeMarkerSelector).on("click", removeMarker);
|
$(removeMarkerSelector).on("click", removeMarker);
|
||||||
@@ -148,6 +124,65 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
markerData: function(element) {
|
||||||
|
var dataCoordinates, formCoordinates, inputs, latitude, longitude;
|
||||||
|
inputs = App.Map.coordinatesInputs(element);
|
||||||
|
|
||||||
|
dataCoordinates = {
|
||||||
|
lat: $(element).data("marker-latitude"),
|
||||||
|
long: $(element).data("marker-longitude")
|
||||||
|
};
|
||||||
|
formCoordinates = {
|
||||||
|
lat: inputs.lat.val(),
|
||||||
|
long: inputs.long.val(),
|
||||||
|
zoom: inputs.zoom.val()
|
||||||
|
};
|
||||||
|
if (App.Map.validCoordinates(formCoordinates)) {
|
||||||
|
latitude = formCoordinates.lat;
|
||||||
|
longitude = formCoordinates.long;
|
||||||
|
} else if (App.Map.validCoordinates(dataCoordinates)) {
|
||||||
|
latitude = dataCoordinates.lat;
|
||||||
|
longitude = dataCoordinates.long;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
lat: latitude,
|
||||||
|
long: longitude,
|
||||||
|
zoom: formCoordinates.zoom
|
||||||
|
};
|
||||||
|
},
|
||||||
|
centerData: function(element) {
|
||||||
|
var markerCoordinates, latitude, longitude, zoom;
|
||||||
|
|
||||||
|
markerCoordinates = App.Map.markerData(element);
|
||||||
|
|
||||||
|
if (App.Map.validCoordinates(markerCoordinates)) {
|
||||||
|
latitude = markerCoordinates.lat;
|
||||||
|
longitude = markerCoordinates.long;
|
||||||
|
} else {
|
||||||
|
latitude = $(element).data("map-center-latitude");
|
||||||
|
longitude = $(element).data("map-center-longitude");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (App.Map.validZoom(markerCoordinates.zoom)) {
|
||||||
|
zoom = markerCoordinates.zoom;
|
||||||
|
} else {
|
||||||
|
zoom = $(element).data("map-zoom");
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
lat: latitude,
|
||||||
|
long: longitude,
|
||||||
|
zoom: zoom
|
||||||
|
};
|
||||||
|
},
|
||||||
|
coordinatesInputs: function(element) {
|
||||||
|
return {
|
||||||
|
lat: $($(element).data("latitude-input-selector")),
|
||||||
|
long: $($(element).data("longitude-input-selector")),
|
||||||
|
zoom: $($(element).data("zoom-input-selector"))
|
||||||
|
};
|
||||||
|
},
|
||||||
cleanInvestmentCoordinates: function(element) {
|
cleanInvestmentCoordinates: function(element) {
|
||||||
var clean_markers, markers;
|
var clean_markers, markers;
|
||||||
markers = $(element).attr("data-marker-investments-coordinates");
|
markers = $(element).attr("data-marker-investments-coordinates");
|
||||||
|
|||||||
Reference in New Issue
Block a user