Leaflet Map - Access extends

Question

Leaflet Map - Access extends

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

Hello, I'm using the "Angular Leaflet Directive" directive ( link ) with Leaflet map.

My question is the following, is there the possibility of inserting some variable or scope in this extension?

    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 to change the coordinates as I click on an element in the view and when I insert an "external" variable in this component it simply stops working. Thanks in advance !!

javascript angularjs maps angularjs-directives

asked by anonymous 19.01.2017 / 19:21

2 answers

2

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

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

The functional example below demonstrates the dynamic addition of a new marker to the map. Click Run 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><scriptsrc="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><linkhref="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>

19.01.2017 / 20:28

Functions that are aliases should they be used or not? Leave part of APP in library

score 0 · Accepted Answer

I ended up doing what I wanted. I have a table with the name of the cities and when the user clicks on the city, changes the coordinates of the map 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 receives the values of city and state, converts to lat and lng, then changes the latitude and longitude of the map.