CODEWITHSUNDEEP
javascripthtmlcssleafletzooming
Jackson_Stake
Jackson_Stake

Reputation: 239

how to change opacity of zoom buttons on leaflet?

I am trying to change the opacity of the zoom control buttons that I have positioned at the top right of my leaflet map. I tried doing "mymap.zoomControl.setPosition('topright').setOpacity(0.5);" in the last line but it causes the whole map to disappear when I load the page. If you know the code to change the opacity of the zoom buttons on the map such that users are able to see through do let me know. 

var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
var mymap = L.map('map', {
    center: [20.594, 78.962],
    maxBounds: bounds, // set max bounds for the world map
    zoom: 4, // default zoom level when the web is initiated
    zoomSnap: 0.25, // map's zoom level must be in multiple of this
    zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
    minZoom: 3.25, // min zoom level the user can zoom out
    maxZoom: 6, // max zoom level the user can zoom in
    zoomControl: true, // allow zooming
});
mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
var MapAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>';
var DarkMatterUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
var PositronUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap); 
// Array of marker coordinates
var markers = [
{
    coords:[4.21, 101.97],
    country:'Malaysia',
    label:'Malaysia',
},
{
    coords:[20.594, 78.962],
    country:'India',
    label:'India',
},
{
    coords:[35.861, 104.195],
    country:'China',
    label:'China',
},
{
    coords:[23.421, 53.8478],
    country:'UAE',
    label:'UAE',
},
{
    coords:[23.6978, 120.9605],
    country:'Taiwan',
    label:'Taiwan',
},
{
    coords:[0.7892, 113.9213],
    country:'Indonesia',
    label:'Indonesia',
},
];
// Edit marker icons
var myIcon = L.icon({
    iconUrl: 'yellowcircle.png',
    iconSize: [40, 40], // size of the icon
    // iconAnchor: [],
    // popupAnchor: [],
});
// Loop through markers
for(var i = 0; i<markers.length; i++){
    addMarker(markers[i]);
}
// To add the marker coordinates
function addMarker(props){
    var marker = L.marker(props.coords, {icon:     myIcon}).bindTooltip(props.country).addTo(mymap);
marker.on('mouseover', function(e){
    marker.openPopup(); 
});
marker.on('mouseout', function(e){
    marker.closePopup();
});

}

Upvotes: 1

Views: 2373

Answers (2)

mehta Pratik
mehta Pratik

Reputation: 49

    <!doctype html>
    <html ng-app="App">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
      <script type="text/javascript" src="script.js"></script>
       <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>

    #map {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }

    </style>

    </head>
    <body>
      <div ng-controller="Ctrl">
    <div id="map"></div>
      </div>
    <script>

      console.log(L.map)
      var mymap = L.map('map', {
      center: [23.022505, 72.571365],
      zoom: 4,
      zoomSnap: 0.25,
      zoomDelta: 0.25,
      minZoom: 3.25,
      maxZoom: 6,
      zoomControl: true
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);
    mymap.zoomControl.setPosition('topright');
    L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.5);
    </script>
    </body>
    </html>

You have to add titleLayer into the L-map. can you please refer my code. You can use the plunker link for check my code: Plunker Link:http://embed.plnkr.co/daSnET/ copy above code and paste into HTML file you can view a map and you can change opacity and check.

Upvotes: -1

User863
User863

Reputation: 20039

setOpacity() is from Dom Util

https://leafletjs.com/reference-1.6.0.html#domutil-setopacity

var mymap = L.map('map', {
  center: [20.594, 78.962],
  zoom: 4,
  zoomSnap: 0.25,
  zoomDelta: 0.25,
  minZoom: 3.25,
  maxZoom: 6,
  zoomControl: true
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);


mymap.zoomControl.setPosition('topright');

L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.5);
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map"></div>

Upvotes: 3

Related Questions