Does anyone have some sample code for toggling a KML overlay layer with a checkbox? I can get a kml layer on my map to toggle off when I uncheck the checkbox, but I can't get it to toggle back on. I've viewed all sorts of sample sites and code, but can't get this thing to work. The site in question is at www.fhitestsite.com/mdctest.
Thanks.
1) Your problem is that map var is not defined -
you defined var map inside a one function but trying to call it from other one. Define it outside of the function
...
var map;
var todayLayer;
var todayShown = 1;
var todayWdgt;
...
2) minor error. todayWdgt is NULL. Its just that you try to assign something that doesn't exist yet.
You should run this code after the document is ready.
todayWdgt = document.getElementById("todayBtn");
todayWdgt.checked = true;
Try using firebug.
Related
I'm adding a number of icons created from imageSprite.createFromTemplate() method however sometimes I'm receiving the following error . How to resolve it using "styleimagemissing" event? How to find out which image is missing to add in the callback ?. And the symbol layer created using the icons sometimes overlaps over the bubble layer(cluster layer) too in some clusters. I don't know if that is caused due to missing images. Thanks in advance.
atlas.min.js:55 Image "Scaffold Builder_Inactive_Icon" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
The styleimagemissing event will tell you the ID of the image that is missing. It won't tell you which symbol layer is trying to use that image however as a single image may be used by multiple layers.
Here is an example of how to use this event:
var iconLoaded = {};
//Add an event to handle the situation when an image is missing from the sprite.
map.events.add('styleimagemissing', function (id) {
//Check to see if the image is has been or is being loaded. Don't try and load the image multiple times.
if (!iconLoaded[id]) {
iconLoaded[id] = true;
//Load the custom image icon into the map resources.
map.imageSprite.add(id, '../Common/images/icons/showers.png').then();
}
});
A complete sample is available here: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Symbol%20Layer/Load%20missing%20image%20into%20sprite.html
Listening for the domready event in normal js Google maps is relatively easy
as outlined here :
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
// whatever you want to do once the DOM is ready
});
However it doesn't seem obvious how to do it in angular-google-maps.
Is there a solution ?
The solution when using Angular Google Maps involves using the infowindow control object - see docs.
As noted in this issue - where I first posted this solution - you can create an empty infowindow control object within the main controller :
$scope.infowindowControl = {};
Then you scope bind your new object in the ui-gmap-window directive definition like :
<ui-gmap-window
options="windowOptions"
closeClick="closeClick()"
control="infowindowControl"
>
On infowindow open (actually unsure at what point) - it will pass five functions to the empty object you created within $scope. Some of these functions are noted in the documentation but in a rather haphazard and non-defined way :
getChildWindows()
getGWindows()
getPlurals()
hideWindow()
showWindow()
The one that you need is getGWindows() - which you put inside your marker click event.
This will get you an array of the open infowindows and you can now attach an event listener in the standard google maps fashion, like :
var windows = $scope.infowindowControl.getGWindows();
console.log('inside click after getGWindows ', windows);
google.maps.event.addListener(windows[0], 'domready', function() {
console.log('infowindow domready just fired !!');
});
While it's not an ideal, well documented or easy solution (and took me a number of hours to figure out) - and passing functions to an empty object is frankly counter-intuitive - it does seem to work.
Plunker here.
I have a super specific issue with an app I'm building.
Angular Code:
$scope.step1 = function ()
{
console.log("step1");
var columnDirective = '<ee-col object-ref1="Column1Clicked" object-ref2="Column2Clicked"></ee-col>';
var container = document.getElementById("container");
var angElement = angular.element(container);
angElement.html("");
angElement.append($compile(columnDirective)($scope));
};
$scope.step2 = function ()
{
console.log("step2");
var imageDirective = '<ee-img object-ref1="ImageRef1" ></ee-img>';
var container = document.getElementById("col2");
var angElement = angular.element(container);
angElement.html("");
angElement.append($compile(imageDirective)($scope));
};
$scope.step3 = function (){
console.log("step3");
var myImg ='<img src="https://www.dropbox.com/s/4ztbvr93gb3kllo/testcard.jpg?dl=1"/>'
var container = document.getElementById("ImagePlaceholder");
var angElement = angular.element(container);
angElement.html(myImg);
};
$scope.step4 = function (){
console.log("step4");
var container = document.getElementById("container");
var angElementContainer = angular.element(container);
var copied = document.getElementById("copied");
var angElementCopied = angular.element(copied);
angElementCopied.html(angElementContainer.html());
};
Basically I have an editor where I can drag/drop directives into a container and some of these directives themselves are containers
I have created a fiddle to illustrate this issue (does not use drag/drop)
https://jsfiddle.net/starkx/jehLd5og/
Step1: I add my column directive to a container div. My column directive has two cells and you can see the click events for each of these cells being raised in the console as you click around them
Step2: simulates dragging an image directive (this has an imageContainer) into the right hand cell. now when you click in this cell you get the click event from the image directive, whereas the left hand cell still shows the column click event
Step3:simulates dragging an image into the imageContainer. the click events all still function
In my application I am now at a position where I would save this information and a subsequent reload of this page would pull this data from the database.
I am simulating this in Step4 by copying the contents of the container div to the copied div.
In this copied code the ng-clicks do not work and you get no console output. I have tried compiling this 'copied' code but I have not been able to get the original stuff in steps (1-3) to work at the same time as the code in the 'copied' div.
Such is the nature of this issue that my google-fu has let me down somewhat and I'm suffering from being a relative beginner at angular coding.
(note: the fiddle is not designed so that you can click the steps willy-nilly. they must be done in order and once only. This is also a very simplified example as it is also possible to nest column directives within each other)
any help gratefully received
Edit: I have added a 5th step to $compile the copied code, but whilst the ng-click methods get called, their parameter is passed as 'undefined' in the copied section.
I am new to angularjs, trying to create my first directive. I am creating a directive to load Charts.js2.0(beta) into my application.
I have 2 views managed by angular-route, both html view has ng-included a html page that contains only charts-element.
The problem is the first page properly draws the chart, when i go to other view the charts div is loaded but charts is not re-drawn. And now if i go back to first view its blank.
Link to Plunker
What i am doing wrong? Is there any issue with my directive?
Thanks in advance.
There appears to be an issue with the Charts library modifying the existing object on the root scope, and thereby ignoring it forever afterward. I can't really trace down what is doing it, but here's a fix for you: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8
Here is what you had
scope.$watch('config', function(newVal) {
if(angular.isDefined(newVal)) {
if(charts) {
charts.destroy();
}
var ctx = element[0].getContext("2d");
charts = new Chart(ctx, scope.config);
//scope.$emit('create', charts);
}
});
Above, you can see that you're passing scope.config directly into the charts method. That appears to be modifying the data somehow, and since that's passed by reference, you're actually modifying $rootScope.sales.charts. If you copy that object and use it locally like below, you don't have that problem.
Here's how I fixed it.
scope.$watch('config', function(newVal) {
var config = angular.copy(scope.config);
if(angular.isDefined(newVal)) {
if(charts) {
charts.destroy();
}
var ctx = element[0].getContext("2d");
charts = new Chart(ctx, config);
//scope.$emit('create', charts);
}
});
You can see that instead of passing that object directly in, we use angular to make a copy (angular.copy()), and that's the object we pass in.
I think it has relation with the id of the canvas where you are drawing. I've had this problem too amd it was because i was using the same id for the canvas of two graphs in different views. Be sure that those ids are different and that the javasrcipt of each graph is in the controller of each view or in each view itself.
Taking a look at your pluker I see that you are using the same html for the graph and I guess that when angular moves from one of your views to the other thinks that the graph is already drawn. Differentiating two graphs will solve the problem. I don't know of there is any other approach that allows using the same html for the canvas of the graph.
Hope it helps you solve it
Thanks to #AJoslin I now have a working google map using only AngularUI and AngularJS.
Unfortunately there are two things I can't figure out how to do which may have to do with Google Map API and my lack of understanding of.
When the map initially loads, I already have a location so I wish to load it with a marker already on it. How do I do that?
I also wish to set the ng-click="myMap.panTo(marker.getPosition()) not to a new marker but to the initial location, which is the only marker I would have since I'm removing the add marker functionality out, once I can figure this one out.
Here is the working jsfiddle
http://jsfiddle.net/jorgecas99/xMw6U/
i think it should be achievable by setting the tilesloaded event, but didnt manage that way, so i ended up using a simple "trick", watching for myMap to appear.
$scope.$watch('myMap', function(){
$scope.setHome();
});
$scope.setHome = function() {
$scope.homeMarker = new google.maps.Marker({
map: $scope.myMap,
position: $scope.mapOptions.center
});
}