Map Leaflet - Access extends

Asked

Viewed 739 times

2

Hello, I’m using the directive "Angular Leaflet Directive" (http://tombatossals.github.io/angular-leaflet-directive/#!/) next to the Leaflet map.

My question is the following, there is the possibility to insert some variable or Scope in that extend? 

    angular.extend(vm, { // ESTENDE AS PROPRIEDADES DO MAP (MARCADORES, LOCALIZAÇÃO INCIAL..)
        center: { // LOCALIZAÇÃO INICIAL  .
            lat:  -15.25241,
            lng: -52.21115241,
            zoom: 4
        },
        markers: vm.markers,
        defaults: {
            tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            tileLayerOptions: {
                detectRetina: true,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">Funil PRÓ</a>'
            },
        }
    });

What I need to do is change the coordinates as I click on an element in the view and when I insert an "external" variable into this component it simply stops working. Thank you in advance!!

javascript angularjs angularjs-directives maps

2 answers

2

Question - is there any specific reason why you are using angular.extend()?

You can implement a solution simply using simple objects - scope properties, for example.

The functional example below demonstrates the dynamic addition of a new marker to the map. Click Execute to see it in action.

var app = angular.module('demoapp',['leaflet-directive']);

app.controller('DemoController', function($scope, leafletData) {

  $scope.config = { // Contém toda a configuração para a diretiva [leaflet].
    center : {
      lat:  -15.25241,
      lng: -52.21115241,
      zoom: 4
    },
    markers: [], // coleção de marcadores.
    defaults: {
      tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      tileLayerOptions: {
        detectRetina: true,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">Funil PRÓ</a>'
      },
    }
  };

  $scope.addMarker = function(){
    var marker =  { // define um novo marcador...
      lat:  -15.25241 + ( Math.random() * 10 -5 ),
      lng: -52.21115241 + ( Math.random() * 10 -5 ),
      message: "Marcador adicionado!",
      focus: true,
      draggable: false
    } 
    $scope.config.markers.push(marker); // ...e o adiciona ao mapa
  }




});
.angular-leaflet-map {
    width: 640px;
    height: 280px;
}
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" rel="stylesheet"/>


<body ng-app='demoapp'>
  <div ng-controller="DemoController" ng-click="addMarker()">
    <button>Adicionar marcador</button>
    
    <leaflet markers="config.markers" center="config.center"></leaflet>
  </div>
</body>

  • Hello! So, I was using the angular.extend because in all the examples I found also used, as it worked I have not changed that hehe. I will edit my question and post the whole code of the map, to be less confused.

0


I was able to do what I wanted. I have a table with the name of the cities and when the user clicks on the city, changes the map coordinates to the selected city.

This is my click function: 

    vm.converterCidadeEstado = function(cidade) {
        vm.cidadeEstado = cidade.cidade + ', ' + cidade.estado;
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "address": vm.cidadeEstado }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                var localizacao = results[0].geometry.location,
                    lat = localizacao.lat(),
                    lng = localizacao.lng();
                vm.latitudeCidadeUf = lat;
                vm.longitudeCidadeUf = lng;
                $timeout(function() {
                    vm.center = {
                        lat: vm.latitudeCidadeUf,
                        lng: vm.longitudeCidadeUf,
                        zoom: 11
                    }
                });
            }
        });
    }

The function takes the values of city and state, converts to lat and lng, after that changes the latitude and longitude of the map.

Browser other questions tagged javascript angularjs angularjs-directives maps

You are not signed in. Login or sign up in order to post.