Show and hide drawcontrols in NgMap - Google Maps - javascript

I want to let a user click a button, to show the draw controls on a map. Once a circle, marker etc has been added, the draw controls are hidden again.
I am building an Angular app and I am using the NgMap directive (https://ngmap.github.io/)
My example code looks like this:
html:
<ng-map id="myMap">
<drawing-manager
on-overlaycomplete="ctrl.onMapOverlayCompleted()"
drawingControl="ctrl.showDrawControl">
</drawing-manager>
</ng-map>
Controller:
vm.showDrawControl = true;
NgMap.getMap({ id: 'myMap' }).then(function (map) {
vm.onMapOverlayCompleted = function (event) {
vm.showDrawControl = false;
alert(vm.showDrawControl);
}
});
The function is called on overlayComplete, but the controls are not hidden?

Examining the source code of ng-map I've seen that the observer to drawingControl attribute is missing, so it can't be updated after initial setup using Angular binding.
Two alternatives to resolve the issue:
1) patching ng-map.js adding the following code to drawingManager directive:
attrs.$observe('drawingcontrol', function (newValue) {
drawingManager.setOptions({
drawingControl: (newValue=="true" ? true : false)
});
});
2) using directly Google maps API as stated here
map.mapDrawingManager[0].setOptions({drawingControl:false/true})
Check my plunker for option 2:
http://plnkr.co/edit/KUCMVdgRZ3TsN9P0FlZR
P.S.: in the Plunker above you can see also a patched version of ng-map (however not used but tested as working).

Related

ng-show only working when set to true from the beginning

I am creating a map-based application using the angularjs library ng-map and have encountered a rather strange bug.
I have the following code:
script.js
vm.showMarker = true //Boolean to toggle marker
vm.toggleMarker = function(){
if(vm.map.getZoom()>=12){
vm.showMarker = true;
} else {
vm.showMarker = false;
}
$scope.$apply();
}
html
<ng-map on-zoom-changed="vm.toggleMarker()" zoom="9">
<custom-marker>
<div ng-show="vm.showMarker">
...
</div>
</custom-marker>
</ng-map>
The idea is that the marker should only be visible if the map is zoomed enough.
If vm.showMarker is set to true from the beginning like above, the marker is first visible when the page is loaded, it then dissapears when zooming until zoom is >= 12 as expected.
However if i set vm.showMarker to false so that it is not visible from the beginning, it does not become visible either when zooming in.
Any idea on what might be causing this behaviour?
Try using ng-if instead:
<custom-marker ng-if="vm.showMarker">

angular leaflet directive customized popup

I have a question about angular leaflet directive customized popup using compile template.
I am using ionic 1.2.4, angular leaflet directive 0.10.0 and leaflet 1.0.0rc-1.
In the controller, I wrote the following code.
var marker = {
type: markerType,
lat: myLatlng[0],
lng: myLatlng[1],
id: id,
getMessageScope: function () { return $scope; },
message: "<a ng-click=\"alert()\">howdy</a>",
compileMessage: true
};
$scope.markersArray.push(marker);
$scope.alert = function(){
console.log("hahahahaha[");
}
Here is the fiddle link: http://jsfiddle.net/caiczcz/m7g8Le0L/1/
Although the link is presented in the popup, but the click event is never triggered, I think that the problem might come from the compile process. Any advice is appreciated. THX.
In Angular-leaflet-directive,
$timeout(function(){
$compile(marker._popup._contentNode)(markerScope);
});
this will introduce a flicker issue, which can be resolved by adding a timeout to the popup's showing up or adding some animation, .etc.

How to change map zoomlevel on buttonclick without using dijit?

I am working with the esri javascript API to create a webmap. I want to have a button next to the map to allow me to zoom-in/out (not the standard esri button). Now, I found a lot of examples doing this using dijit (https://developers.arcgis.com/javascript/jssamples/toolbar_navigation.html) but I just want to use a simple html button like: Zoom in and then in the script part say something like:
function zoomin(){map.setZoom()}
Now my problem is that I don't know how to make that work. I guess the problem is that after the buttonclick it can't find the zoomin function since it's inside the require([...]),function(){} But I can't put it outside neither since the code depends on the require.
So, it would be great if you could tell me what to do.
For zooming in on the map, use the setZoom method incrementing the current zoom level to zoom in and decreasing to zoom out. For example:
//zoom out:
map.setZoom(map.getZoom()-1);
//zoom in:
map.setZoom(map.getZoom()+1);
As an example, using the sandbox of the Esri sample above:
http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=toolbar_navigation
...replace line 85 to 91 with this:
registry.byId("zoomin").on("click", function () {
//navToolbar.activate(Navigation.ZOOM_IN);
map.setZoom(map.getZoom()+1);
});
registry.byId("zoomout").on("click", function () {
//navToolbar.activate(Navigation.ZOOM_OUT);
map.setZoom(map.getZoom()-1);
});
This will allow the Zoom In and Zoom Out buttons to control the map.
Hope this helps.

Zooms events in Polymer Google Map

I am working on an app that will dynamically load in markers based on a users location. The map should add events to the map if a user zooms out. For the map we are using Polymer's Google Map. I am having a hard time finding out how to react to the zoom event. We added a map to the page with:
<google-map latitude="45" longitude="-73" zoom="15" mouseEvents="true" clickEvents="true"></google-map>
I have tried several different js eventhandlers such as:
<script>
var map = document.querySelector("google-map");
console.log(map);
map.addEventListener("bounds_changed", function() {
alert(map.zoom);
});
</script>
I can't even get events such as "google-map-click" to fire. The only one that seems to work is "google-map-ready".
Please help.
Try adding event listener to map property instead of google-map element.
Something like this gives you all zoom changes
<script type="text/javascript">
var mapElement = document.querySelector("google-map");
mapElement.addEventListener('api-load', function(e) {
google.maps.event.addListener(this.map, 'zoom_changed', function() {
// handle zoom event...
});
});
</script>

Using angular-google-maps can't bind click event to a markers for displaying single window

I'm receiving a JSON object as Data source for my markers. After that I'm binding Click/Close functions for each marker
Plunk: http://plnkr.co/edit/A9IbIFpj3d9tH6z9NYjf?p=preview
angular.forEach(tmp, function(value, key){
value.onClick = function(){
console.log("Clicked!");
$scope.selected.show = false;
$scope.selected = value;
$scope.selected.show = !$scope.selected.show;
$scope.$apply();
};
value.CloseClick = function() {
$scope.selected.show = false;
console.log("CloseClicked");
$scope.$apply();
};
this.push(value);
}, $scope.markers);
and then drawing markers on a Google Map using Angular Google Maps
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-markers models="markers" fit="true" coords="'self'" click="onClick">
</ui-gmap-markers>
<ui-gmap-window coords="selected" show="selected.show" closeClick="closeClick"><div>aga</div></ui-gmap-window>
</ui-gmap-google-map>
but when I click on a marker, the function onClick does not trigger. I'm new in Angular.js, but it seems I have an issue with it (or maybe worse for me - with JavaScript itself), not with Angular Google Maps, but I'm not sure. Thanks for any help.
[UPDATE] Problem solved by using click="'onClick'" instead of click="onClick"
You could also add parentheses () to the methods, e.g. click="onClick()"

Categories

Resources