How to create a simple button that changes the layer between map and satellite?

[ivanssa]

Hello the days I'm looking for a solution to create a button to toggle between map and satellite layers all I want is a style toggle button that switches between the map layers and satelite I found an example as http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/layers/dynamic-addition-example but it deletes the layer map and all I want is just to change as it is made by the leaflet-control-layer selector someone could help create that switch style?

[IvanSanchez]

Duplicate of Leaflet/Leaflet#4195

[ivanssa]

I could settle with the function found here https://github.com/angular-ui/ui-leaflet/issues/22 was all he needed to create my custom layer switch following code

Function

// Toggle Layer
$ Scope.layer = true;
$ Scope.change baselayer = function (key) {$ scope.layer = $ scope.layer!; leafletData.getMap () then (function (map) {leafletData.getLayers () then (function (layers) {_.each (layers.baselayers, function (layer) {map.removeLayer (layer);..}); map .addLayer (layers.baselayers [key]);});});
};

Html

<a ng-if="layer" ng-click="change BaseLayer('google Hybrid')" class="leaflet-control-layers-toggle radar" href="#" title="Layers"> </a>
<a ng-if="!layer" ng-click="changeBaseLayer('googleRoadmap')" class="leaflet-control-layers-toggle mapa" href="#" title="Layers"> </a>

Result: :-)

[hpandelo]

has possibility to do it without andgular?

[ivanssa]

hello @neomacedo yes you can do with simple javascript, creates a variable to control the corresponding button action display state through jquery style and use the onclick to define the action to change the google map layer.