Hide Layer Control Element

[datalyze-solutions]

I played a bit with the development branch, especially with the baselayer/overlay feature. Is it possible to hide the layers control? I want to hide it and use my own controls.

Greetings

[JaumeFigueras]

Hi, as everything in programming, yes it's possible. But at this moment I don't figure out how. There is a custom control parameter, but is not linked with the layers control ant it does not have a custom model. As controls are objects I don't know how I can test if a control is capable to deal with layers. One possibility is to create a model, something like:

controls: {
  control1: {
    type:'layers',
    control: new L.Control.layers(...) // or your own control
  },
  control2: {
    type: 'zoom',
    control: new L.Control.zoom(...) // or your own control
  }
}

But this will break backward compatibility, and I do not know how to do it without breaking backward compatibility. Any hint?

[arbox0]

Hello! I need to hide the layers control. Is this already possible?. I think it could be possible just with a boolean option to avoid creating the control.

regards

[JaumeFigueras]

It's not possible at this moment. But feel free to add it to the directive and create a PR with this improvement. Yours, Jaume.

[arbox0]

Ok! Thanks!!!

I have one more doubt about the source code, in particular with this part:

scope: { center: '=center', maxBounds: '=maxbounds', bounds: '=bounds', marker: '=marker', markers: '=markers', legend: '=legend', geojson: '=geojson', defaults: '=defaults', paths: '=paths', tiles: '=tiles', events: '=events', layers: '=layers', customControls: '=customControls', leafletMap: '=leafletmap' }, template: '<div class="angular-leaflet-map"></div>', link: function ($scope, element, attrs /, ctrl /) {....}

The "link" function has $scope injected, and I wonder if It should be scope (the variable declared just before the "link" function) instead of $scope which is the "$scope" of my View-Controller in angular.

Thanks again!!!

[tombatossals]

Hi, the "link" function you refer to is the function needed by the directive to register the DOM listeners, and it needs an isolated scope as the first parameter, which will be the scope you defined previously (the one you are refering) with the inherited properties of the main scope defined there.

So, the $scope injected is the isolated scope you need. Take a look at the AngularJS documentation about directives: http://docs.angularjs.org/guide/directive

[arbox0]

Hi, Thanks for your answer, but there is something that doesn't match for me, and angular documentation doesn't seems to refuse what I have said in my previous message. Perhaps I am not explaining myself well or I have misunderstood. (I'm not English Speaker). This is the case that I have found: If you set leaflet defaults using: --->MapView.html: <leaflet markers=... layers=.... defaults="mydefaults"/>

-->MapsController.js:

'use strict';

/* Map controller _/ function MapController($scope, .........) { $scope.myDefaults={ /_My own map defaults*/ }; ... }

when you reach this part of the angular-leaflet-directive.js: if ($scope.defaults && $scope.defaults.controlLayersPosition) { layers.controls.layers.setPosition($scope.defaults.controlLayersPosition); }

$scope.defaults is "undefined" because it is looking $scope.defaults in my source code MapsController.js instead of the variable name (myDefaults) that I have "linked" in the html. Is this behaviour right?

Thanks again, and I'm sorry for my poor English

[tombatossals]

Hi @arbox0, don't worry about your english, it's better than mine for sure. :)

I think that the $scope inside the link function is the isolated scope, with the binded variables defined previously, but let me implement it with a jsfiddle example to be able to determine it. I will post it later to comment it with you.

Thanks for the reporting.

[tombatossals]

Hi @arbox0 , I have made the jsfiddle with an example of your issue, but I didn't notice the beahaviour you explain. I have renamed the variables on the scope, but I'm being able of reference them with the $scope.center and $scope.defaults inside the directive. Please, could you modify and share the link so we can see your issue?

http://jsfiddle.net/tombatossals/6KCBP/

[arbox0]

Hi tombatossals!!!,

You were right!!!

I have tried with the jsfiddle and it is impossible to reproduce the behaviour. It is really surprising, so I am trying several configurations in a web project in my eclipse. If I find out the cause of the behaviour which I explained in my previous message I'll let you know!.

Thanks for your patience!!

[arbox0]

Hi Again!!

I have detected that in the angular-leaflet-directive.js that I was working with wasn't included the ng-transclude directive this could be the key to my problem. I am going to check it and I'll tell you my conclusions.

EDITED: It wasn't that either, I am really confused because I am unable to reproduce the behaviour even in the cases I previously did.

Thanks again, and I'm sorry, I'll be more careful next time.

[tombatossals]

Don't worry, thanks to you for reporting . Maybe it was an older version on the directive like you say.

[tombatossals]

Hi @arbox0, I have finally opted to rename the $scope variable of the link function to "scope" as you said. I think that this doesn't affected the behaviour but avoids confusing the $scope object.

I have seen this naming convention on the official directive documentation and of one of the egghead tutorials here:

http://docs.angularjs.org/guide/directive http://egghead.io/lessons/angularjs-scope-vs-scope

Thanks again for reporting.

[skalb]

It looks like if you define a baseLayer, it will always add the layer control, even if there is only 1 baseLayer and nothing to toggle between.

Looking at the code, handling this seems tricky since you'd have to add and remove the control itself from the map as layers are added (I think).

Alternatively, a dirty fix is to just hide it with css.

.leaflet-control-layers.leaflet-control { display: none; }

[gianvi]

Hi Guys, I was looking for a solution to hide the layer control. Thanks to your solution @skalb I can hidden it from the css.... I just want to know if there is some improvements to disable it from the defaults properties: I mean something like defaults{ ... zoomControl: false, layerControl: false }

Thanks in advance

[jimmygeorgethomas]

Any updates on disabling layerControl?

[nmccready]

@gianvi @jimmygeorgethomas can you make a new issue since this is closed. Also an example via plnkr or jsfiddle would help showing your problem.