Develop Reference

How to setVisibility to a particular layer when clicked?- Openlayers

I have more than 10 layers , where i have to set one layer to visibility when clicked , I tried a code and its not working. I dont know how to make it better.
var mapClick = [layer1,layer2,layer3......]
if (mapClick == 'layer1'){
layer.setVisibility(true)
}
else {
layer.setVisibility(false)
}

You can modify layer visibility with layer.setVisible(true/false), not setVisibility.
Here the API reference: https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html#setVisible

AddThis Layers in Full Screen mode

I'm making a slideshow with full screen functionality (FancyBox 3), it's using the RequestFullScreen method on the container div, which means any other element in the body is not accessible in full screen mode. (correct me if i'm wrong)
I would like to include an AddThis Expanding Share button in the slideshow, but because it's created dynamically by the AddThis js, it appends the Smart Layers before the end of the body, not at the end of the slideshow container div therefore it's not included in the full screen slideshow.
I couldn't find any info on Smart Layers DOM placement in the AddThis API.
What I've tried is seems like a bad idea, to manually appendTo the necessary divs to the slideshow container after the divs are created by AddThis, I managed to "cut and paste" the '.at-expanding-share-button' and it's working so far, but I can't "catch" the '#at-expanded-menu-host' (which is the layer created by AddThis for more sharing options, with the dark background), and I'm not even sure if this method will work properly...
Any help would be appreciated.

I figured it out! :) I thought I share my experience/solution, if anyone has similar difficulties.
What won't work and why:
First I've tried to communicate with the AddThis API to tell it to put its layers to a premade container, which looks like impossible and the AddThis team also told me that there is no solution for manual layer DOM placement, it's always appending those to the end of the body (at least for now, maybe they will implement this option into their API).
Then I've tried to manually append those layers to the Fancy-Box container, which was a dead end because when the slideshow closes, it removes its container from the markup, so the AddThis layers disappeared and I couldn't reinit it (maybe others have some solution for that, but I just couldn't figure it out).
By the way, the "More Sharing Options" layer is created when the share + button is clicked.
My solution:
Instead of appending the layers to the dynamic slideshow container, I've created a static div at the end of the body, appended the layers to it when they are created, and set the Fancy-Box parent div to my container (note that Fancy-Box full screen functionality makes its own div into full screen, so I had to use my own full screen function for the container with the layers and the slideshow).
I've used sindresorhus's screenfull for easier/cross-browser full screen functions.
var FullScreenContainer = $('#container');
// Check if AddThis Layers are ready
var checkLayers = setInterval(function() { appendLayers(); }, 1000);
// Append the layers to FullScreenContainer
function appendLayers() {
var layers = $('.at-expanding-share-button, #_atssh');
if(layers.length > 0){
addthis.layers.refresh();
layers.appendTo(FullScreenContainer);
clearInterval(checkLayers);
console.log('layers added');
}
else {
console.log('not found')
}
}
// Check for more layers when the share icon clicked
$(document).on('click', ".at-expanding-share-button-toggle", function() {
var checkMoreLayers = setInterval(function() { catchLayers(); }, 1000);
function catchLayers() {
var morelayers = $('#at-expanded-menu-host');
if(morelayers.length > 0){
morelayers.appendTo(FullScreenContainer);
clearInterval(checkMoreLayers);
console.log('more layers added');
}
else {
console.log('did not found more')
}
}
});
// Don't forget to disable the full screen function in Fancy-Box,
// then call them when necessary (onInit, clickSlide, clickOutside
// and the close button)
function enterFullscreen() {
screenfull.request($('#container')[0]);
}
function exitFullscreen() {
if (screenfull.isFullscreen) {
screenfull.exit();
$.fancybox.getInstance().close();
}
if (!screenfull.isFullscreen) {
$.fancybox.getInstance().close();
}
}
And you are good to go. I hope this helps for anybody else! :)

Show and hide drawcontrols in NgMap - Google Maps

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).

OpenLayers zoom scroll events are ignored if no layers are visible

I've noticed that if all OpenLayers.Layers have visibility set to false, I can no longer zoom in and out using my mousewheel. I can still use the OpenLayers.Control.Zoom buttons, but no longer the mouse wheel.
Is there anyway to disable this 'feature'?
Edit:
Here is a jsfiddle link. Set the layer to invisible, then scroll, then set it back to visible. It doesn't change. Now set it invisible, use the zoom control button, then set it back visible.
http://jsfiddle.net/a8kK4/56/
Here's some code for how the map is instantiated because SO won't let me post jsfiddle without it:
var map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
layers: [ new OpenLayers.Layer.OSM() ]
});

The issue is to do with the onWheelEvent of the MouseWheel handler, see the code here on github. The issue arises with the lines
if (!overScrollableDiv && overMapDiv) {
if (allowScroll) {
as with the map hidden, you will never get it so that all of these conditions are met and therefore the call to this.wheelZoom(e) which actually does the zoom in/out never gets called. The behavior you are seeing is, therefore, by design.
One, somewhat crude way to fix this, is to override the whole function and just set the line where allowScroll is initialized to true, ie, you put the the whole function into your code, after the main OpenLayers.js has downloaded, and just change that one line
OpenLayers.Handler.MouseWheel.prototype.onWheelEvent= function(e){
if (!this.map || !this.checkModifiers(e)) {
return;
}
var overScrollableDiv = false;
//CHANGE THIS LINE TO TRUE
var allowScroll = true;
var overMapDiv = false;
//rest of function .......
};
The problem of doing this is that a scroll will now happen if you use the mouse wheel anywhere. There is probably a more elegant way by changing the conditions under which the values of overMapDiv and allowScroll and overScrollableDiv get set. I could not get this to work on jsFiddle (I think due to version conflicts), but locally it worked as expected. I hope this helps.

appcelerator orientationchange navbar image hide / show

I'm building an app with some tabs for the iPhone.
rephrased the question in the appcelerator website here
When i change from portrait to landscape i want to hide the navbar.
it works fine if i don't switch to another tab.
But when i view 1 tab in portrait,
switch to another tab, change to landscape view,
switch back to the first tab,
and then change to back portrait
the navbar (window.barImage) is all stretched out ( to the size of a landscape navBar )
Also when i remove all my code for hiding the navbar the same problem occurs.
I've tried setting the barImage again on orientationchange but that does not help either.
a site note: I'm using the same image on every tab for the navBar could that be the problem?
I marked in green the navbar image, the blue part is where the image normally should be.
Also note that the image is the right size for a portrait view of the navbar.
code:
var windowWidth = Ti.Platform.displayCaps.platformWidth;
var catWin = Ti.UI.createWindow({
title:'',
barImage: 'images/barImage.png',
url:'vacancies/categories.js',
width: windowWidth
});
catWin.orientationModes = [
Titanium.UI.PORTRAIT,
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT
];
Titanium.Gesture.addEventListener('orientationchange', function(e) {
if(e.orientation == Titanium.UI.LANDSCAPE_RIGHT){
catWin.hideNavBar();
} else if(e.orientation == Titanium.UI.LANDSCAPE_LEFT){
catWin.hideNavBar();
} else if(e.orientation == Titanium.UI.PORTRAIT){
catWin.showNavBar();
}
});

You really need to post more code, for example I have no idea if you are using Ti.UI.currentWindow.hideNavBar(); or if you are using just the .hide(); and .show();?
From what I can tell you're problem however possibly lies with the the width. Trying setting it to '100%' instead of using the platformWidth. Once again without all the relevant code such as your orientationchange event this is best advice I can give. Hope it helps.
THIRD COMMENT: possibly
Titanium.Gesture.addEventListener('orientationchange', function(e) {
if(e.source.isLandscape()){
catWin.hideNavBar();
} else {
catWin.barImage = 'images/barImage.png';
catWin.showNavBar();
}
});
Just somewhere in there or the tab events. I would play around with that idea and see if it gets you any further?

While this is not the best solution because it still looks a bit odd ( but way better then before, ) this is the best solution until now.
I have found some kind of solution by using the following code:
I've set the barImage in the createWindow code so at least at the beginning it looks OK:
var jbWin = Ti.UI.createWindow({
title: '',
url:'homePage.js',
barImage: 'images/jobbroker_bar.png'
});
Then on orientationchange I unset the barImage and start using the titleImage:
Titanium.Gesture.addEventListener('orientationchange', function(e){
if(e.source.isLandscape()){
catWin.titleImage = '';
catWin.barImage = '';
catWin.hideNavBar();
else if( e.orientation != Ti.UI.FACE_UP && e.orientation != Ti.UI.FACE_DOWN ) {
catWin.titleImage = 'images/jobbroker_bar.png';
catWin.showNavBar();
}
}

have you tried using the "titleControl" on the Navbar to set the image instead of the barImage control?
also can you post a small apps.js file with the associated image somewhere? it is difficult to full grasp the problem without running the project