Im trying to work with Angular.js and Mapbox.
The map is loaded, from Mapbox with no problem. But the Zoom Control have problems, in the browser it shows the Zoom Control, but it doesnt appear in the Android Emulator. In the browser and in the emualtor, they dont work: they cant zoom in or zoom out.
I draw another Zoom Control and it happen the same problem, both in the browser appear and both doesnt Zoom in or Zoom out. In the browser they show both zoom control and Android Emulator both Zoom Controller doesnt appear and they doesnt work.
I have try this work Mapbox with no problem outside Angular:
https://www.mapbox.com/mapbox.js/example/v1.0.0/
Could some one could explain me or give me a hand.
thanks in advance
Here is the code that I was working:
.controller('loa', function($scope, $ionicModal) {
// MAPAS ------------------------------------------------------------>
$ionicModal.fromTemplateUrl('templates/calama.html', {
scope: $scope }).then(function(modal) {
$scope.modal1 = modal;
}, {
animation: 'slide-in-down',
focusFirstInput: true,
scope: $scope });
$scope.cierra1 = function() {
$scope.modal1.hide(); };
$scope.mapaCalama = function() {
$scope.modal1.show();
L.mapbox.accessToken = 'pk.xxxxxx';
var map = L.mapbox.map('map')
.setView([-22.4562, -68.9249], 6)
.addLayer(L.mapbox.tileLayer('itelius.xxxxx'));
L.mapbox.featureLayer('itelius.xxxxxx').on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) { clusterGroup.addLayer(layer); });
map.addLayer(clusterGroup);
}); };
I recentley put a zoom-slider object and works, but when I add a zoom control and try it I cant zoom in or zoom out.
Related
Sometimes Map displayed partially gray. google.maps.event.trigger($scope.map, "resize"); doesn't work.
Finally, resolved this issue by resizing map when it gets initialized.
Here is my code.
$scope.$on('mapInitialized', function (event, map)
{
$timeout(function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(newgoogle.maps.LatLng('your latitude','your longitude'));
}, 100);
});
I want to open the popup in Angular Leaflet as a hover and not on click.
I have a markers array initialized and an overlay of a layer on top of the base layer.
I am trying to create a layer where buses and bus stops belong to each other. So each layer belongs to the same type in the overlays.
I am using the code
markers = [];
markers.push(
{ layer : layername,
lat : latitude,
lng : longitude,
message: busNames(data),
icon :{....}
}
});
I have another push marker set on the same layer which builds busStop data.
Now how do I display the popups when mouse is moved over them as hover instead of showing them on click
P.S - I am new to coding and hence please help me with proceeding further.
For each marker you are creating you have to listen to 'mouseover' and 'mouseout' events.
You open the popup when 'mouseover' is sent, close it when 'mouseout' is sent.
var marker = L.marker([51.5, -0.09]).addTo(map);
var tooltipPopup;
marker.on('mouseover', function(e) {
tooltipPopup = L.popup({ offset: L.point(0, -50)});
tooltipPopup.setContent("Hello");
tooltipPopup.setLatLng(e.target.getLatLng());
tooltipPopup.openOn(map);
});
marker.on('mouseout', function(e) {
map.closePopup(tooltipPopup);
});
Here is an example
First, you have to include 'leafletData' to your controller, after that add 'mouseover' and 'mouseout' events to your Marker.
angular
.module('myapp')
.controller("EventsController", [ '$scope', 'leafletData', function($scope, leafletData) {
$scope.$on('leafletDirectiveMarker.mouseover', function(event, args){
console.log('I am over!');
var popup = L.popup({ offset: L.point(0, -28)})
.setLatLng([args.model.lat, args.model.lng])
.setContent(args.model.message)
leafletData.getMap().then(function(map) {
popup.openOn(map);
});
});
$scope.$on('leafletDirectiveMarker.mouseout', function(event){
leafletData.getMap().then(function(map) {
map.closePopup();
});
});
}]);
I'm using the angular leaflet directive. Everything is working properly on my laptop. But on iPad, the double click is working but the click event is not working at all. I have one event handler for click but it doesn't get triggered.
$scope.events = {
map: {
enable: ['mousedown', 'dblclick', 'click'],
logic: 'broadcast'
}
};
$scope.$on('leafletDirectiveMap.mousedown', function(event) {
alert('click');
});
$scope.$on('leafletDirectiveMap.click', function(event) {
alert('click');
});
$scope.$on('leafletDirectiveMap.dblclick', function(event) {
alert('dbclick');
});
Double click event gets triggered but the other ones not. Anything I can try to debug this?
checkout this https://github.com/angular/material/issues/1300.
Having this below code fixed that issue for us,
$mdGestureProvider.skipClickHijack();
I am using ng-Dialog module of angularjs for vehicle trip view map. My angularjs directive for trip-map is working fine and map is loaded with fitbounds in the complete window (not in ng-dialog model popup) but it does not work in ng-dialog popup.
In ng-dialog, the googlemap is loaded but the map is not in fitbounds.
Earlier I thought that the issue was due to googe map fitbound not working fine, So I posted the below question. You can find more detail of my efforts here.
Google map fitBounds not working
ng-dialog call code in controller:
ngDialog.open({
template: 'Views/Main/tripdetail.html',
className: 'ngdialog-theme-plain',
controller: 'tripdetailController',
scope: $scope
});
Map fitbound code:
var marker;
var tripmap = mapService.getTripMap();
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < trips.length; j++) {
var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
bounds.extend(ltlng);
// if (j == 0 || j == trips.length - 1) {
marker = new google.maps.Marker({
position: ltlng,
map: tripmap
});
// }
}
$scope.Bounds = bounds;
tripmap.fitBounds(bounds);
In window it look well as:
In ng-dialog modal popup, it moves to top left corner as:
Please advice me the solution. It will be appreciable.
It was due to map is resized by ngDialog popup directive.
Solved by call fitbounds in map resize callback with as
$scope.$apply(function () {
window.setTimeout(function () {
google.maps.event.trigger(tripmap, 'resize');
tripmap.fitBounds(bounds);
}, 100);
});
Thanks all for help.
I'm building a pretty basic web app with Angular.js and Leaflet.
I'm trying to get the lat/lng info from the clicks on the map and i'm having trouble finding any docs on integrating the event handlers from Leaflet into Angular.
if anyone could point me in the right direction, i'd be stoked.
the code below:
app.controller("eventcrtl", [ '$scope', function($scope) {
$scope.$on('leafletDirectiveMap.click', function(event){
console.log(event.latlng);
});
}]);
doesn't work
To handle events, first define an events object on your scope...
angular.extend($scope, {
events: {
map: {
enable: ['click', 'drag', 'blur', 'touchstart'],
logic: 'emit'
}
},
...
and add it to your leaflet element.
<leaflet event-broadcast="events"></leaflet>
Then, you can access latitude and longitude inside the args parameter of the click handler:
$scope.$on('leafletDirectiveMap.click', function(event, args){
console.log(args.leafletEvent.latlng);
});
Here is a working demo: http://plnkr.co/PxRDhz6S5Svsg9FG4VRk