Commit a3e5f2152be4534a8f8d28ad6d9b1684c73ea9da
1 parent
17144b6f0a
Exists in
master
agrego mapa con marcador draggable
Showing
5 changed files
with
96 additions
and
12 deletions
Show diff stats
index.html
| ... | ... | @@ -0,0 +1,38 @@ |
| 1 | +<html ng-app="focaModalPuntoDescarga"> | |
| 2 | + <head> | |
| 3 | + <meta charset="UTF-8"/> | |
| 4 | + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| 5 | + | |
| 6 | + <!--CSS--> | |
| 7 | + <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> | |
| 8 | + <link href="node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/> | |
| 9 | + <style> | |
| 10 | + osm>div { | |
| 11 | + width: 100%; | |
| 12 | + height: 576px; | |
| 13 | + } | |
| 14 | + </style> | |
| 15 | + | |
| 16 | + <!--VENDOR JS--> | |
| 17 | + <script src="node_modules/jquery/dist/jquery.min.js"></script> | |
| 18 | + <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> | |
| 19 | + <script src="node_modules/angular/angular.min.js"></script> | |
| 20 | + <script src="node_modules/angular-route/angular-route.min.js"></script> | |
| 21 | + <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> | |
| 22 | + <script src="node_modules/leaflet/dist/leaflet.js"></script> | |
| 23 | + | |
| 24 | + <!-- BUILD --> | |
| 25 | + <script src="src/js/app.js"></script> | |
| 26 | + <script src="src/js/controller.js"></script> | |
| 27 | + <script src="src/js/route.js"></script> | |
| 28 | + <script src="src/js/service.js"></script> | |
| 29 | + <script src="src/js/osm-directive.js"></script> | |
| 30 | + <!-- /BUILD --> | |
| 31 | + | |
| 32 | + <!-- CONFIG PARA DEVELOP --> | |
| 33 | + <script src="src/etc/develop.js"></script> | |
| 34 | + </head> | |
| 35 | + <body> | |
| 36 | + <div ng-view class="container-fluid"></div> | |
| 37 | + </body> | |
| 38 | +</html> |
package.json
src/js/controller.js
| ... | ... | @@ -17,7 +17,9 @@ angular.module('focaModalPuntoDescarga') |
| 17 | 17 | $scope.puntoDescarga = { |
| 18 | 18 | id: 0, |
| 19 | 19 | id_cliente: filters.idCliente, |
| 20 | - id_da_config_0: filters.idDomicilio | |
| 20 | + id_da_config_0: filters.idDomicilio, | |
| 21 | + latitud: -32.89214159952345, | |
| 22 | + longitud: -68.84572999101856 | |
| 21 | 23 | }; |
| 22 | 24 | $scope.articulos = angular.copy(filters.articulos); |
| 23 | 25 | $scope.articulos.map(function(articulo) { |
src/js/osm-directive.js
| ... | ... | @@ -0,0 +1,39 @@ |
| 1 | +angular.module('focaLogisticaPedidoRuta').directive('osma', function() { | |
| 2 | + return { | |
| 3 | + restrict: 'E', | |
| 4 | + link: function(scope, el, attrs) { | |
| 5 | + var contenedor = document.createElement('div'); | |
| 6 | + contenedor.className = 'w-100 h-50 mt-3'; | |
| 7 | + el.append(contenedor); | |
| 8 | + scope.map = L.map(contenedor).setView([-32.89214159952345, -68.84572999101856], attrs.zoom); | |
| 9 | + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map); | |
| 10 | + }, | |
| 11 | + controller: ['$scope', '$timeout', function($scope, $timeout) { | |
| 12 | + //resuelve bug mapa gris | |
| 13 | + $timeout(function() { | |
| 14 | + $scope.map.invalidateSize(); | |
| 15 | + }, 1000); | |
| 16 | + | |
| 17 | + $scope.markers = []; | |
| 18 | + $scope.$watchGroup(['latitud', 'longitud'], function() { | |
| 19 | + for(var i in $scope.markers) { | |
| 20 | + $scope.map.removeLayer($scope.markers[i]); | |
| 21 | + } | |
| 22 | + $scope.markers.push( | |
| 23 | + L.marker([$scope.latitud, $scope.longitud], {draggable:'true'}) | |
| 24 | + .addTo($scope.map) | |
| 25 | + .on('dragend', function() { | |
| 26 | + $scope.latitud = this.getLatLng().lat; | |
| 27 | + $scope.longitud = this.getLatLng().lng; | |
| 28 | + $scope.$apply(); | |
| 29 | + }) | |
| 30 | + ); | |
| 31 | + }); | |
| 32 | + }], | |
| 33 | + scope: { | |
| 34 | + latitud: '=', | |
| 35 | + longitud: '=', | |
| 36 | + zoom: '=' | |
| 37 | + } | |
| 38 | + }; | |
| 39 | +}); |
src/views/modal-punto-descarga.html
| ... | ... | @@ -67,6 +67,16 @@ |
| 67 | 67 | </table> |
| 68 | 68 | <form ng-show="ingreso"> |
| 69 | 69 | <div class="row"> |
| 70 | + <div class="col-12"> | |
| 71 | + <label>Descripción</label> | |
| 72 | + <input | |
| 73 | + type="text" | |
| 74 | + class="form-control form-control-sm" | |
| 75 | + ng-model="puntoDescarga.descripcion" | |
| 76 | + uppercase-only> | |
| 77 | + </div> | |
| 78 | + </div> | |
| 79 | + <div class="row"> | |
| 70 | 80 | <div class="col-6"> |
| 71 | 81 | <label>Latitud</label> |
| 72 | 82 | <input |
| ... | ... | @@ -86,17 +96,11 @@ |
| 86 | 96 | /> |
| 87 | 97 | </div> |
| 88 | 98 | </div> |
| 89 | - <div class="row"> | |
| 90 | - <div class="col-12"> | |
| 91 | - <label>Descripción</label> | |
| 92 | - <textarea | |
| 93 | - class="form-control form-control-sm text-uppercase" | |
| 94 | - cols="30" | |
| 95 | - rows="5" | |
| 96 | - ng-model="puntoDescarga.descripcion"> | |
| 97 | - </textarea> | |
| 98 | - </div> | |
| 99 | - </div> | |
| 99 | + <osma | |
| 100 | + latitud="puntoDescarga.latitud" | |
| 101 | + longitud="puntoDescarga.longitud" | |
| 102 | + zoom="14" | |
| 103 | + /> | |
| 100 | 104 | </form> |
| 101 | 105 | <div ng-show="cargaArticulos"> |
| 102 | 106 | <div ng-show="articulos.length === 0"> |