Customize Zoom In/Out Button in Leaflet.Js

Customize Zoom in/out button in leaflet.js

Your zoom in/out controls are wrapped with absolutely positioned element with left:0 (due to .leaflet-left class), so float:left wouldn't help, you could align it to right by overriding left:0 by right:0, or changing .leaflet-left class to .leaflet-right

But more correct way would be to use provided api.

//disable zoomControl when initializing map (which is topleft by default)
var map = L.map("map", {
    zoomControl: false
    //... other options
});

//add zoom control with your options
L.control.zoom({
     position:'topright'
}).addTo(map);

see updated fiddle

api reference for the library you use can be found here

how to change opacity of zoom buttons on leaflet?

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: '© <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/leaflet@1.3.1/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<div id="map"></div>

Custom zoom buttons for Leaflet don't work

That's one interesting way of attaching an eventhandler. Normally one would use addEventListener:

The EventTarget.addEventListener() method adds the specified EventListener-compatible object to the list of event listeners for the specified event type on the EventTarget on which it is called. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

Reference: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Example:

document.getElementById('zoomIn').addEventListener('click', function () {
    map.setZoom(map.getZoom() + 1);
});

document.getElementById('zoomOut').addEventListener('click', function () {
    map.setZoom(map.getZoom() - 1);
});

Since you're using Leaflet, the easiest way to attach events to DOM elements is to use L.DomEvent:

Utility functions to work with the DOM events

Reference: http://leafletjs.com/reference-1.2.0.html#domevent

Also Leaflet has a function for getting DOM elements by ID: L.DomUtil.get so you do not need to use document.getElementById:

Returns an element given its DOM id

Reference: http://leafletjs.com/reference-1.2.0.html#domutil-get

L.DomEvent.on(L.DomUtil.get('zoomIn'), 'click', function () {
    map.setZoom(map.getZoom() + 1);
});

L.DomEvent.on(L.DomUtil.get('zoomOut'), 'click', function () {
    map.setZoom(map.getZoom() - 1);
});

Extending L.control.zoom with custom button

While not being explicit in the Leaflet class customization tutorial, there is a subtle distinction between factories, which are lowerCased and that you cannot extend, and Classes, which are PascalCased and on which you can use Leaflet extend mechanism:

var MyNewZoomControl = L.Control.Zoom.extend({
  onAdd: function (map) {
    // your new method content
  }
}

That being said, if your new button does not really share functionality with the zoom buttons or is not "merged" with them, you could simply make a separate Control and insert it in the same corner position. There is also Leaflet EasyButton plugin which can help in this regard.

How do I change the color of links in a leaflet container, without changing the zoom buttons' color

The simpelst way would be to apply the a style only to childs of the section.

In your html add a class or id to the section element: <section id="wrapper"> and then apply the styles only to the #wrapper childs:

#wrapper {
    (styling for the container)
}
#wrapper a:link {
    color:gold;
}
#wrapper a:visited {
    color:pink;
}

Another way would be to overwrite the zoom button styles:

.leaflet-control-zoom  a:link, .leaflet-control-zoom  a:visited {
   color: black;
}

Helpful Docs: Selectors Explained, All Selectors

Change the default position of zoom control in leaflet map of Shiny app

I figure out how to change the position of zoomControl. You can find this feature from my fork of leaflet package: https://github.com/byzheng/leaflet/commit/fdf9fb159adbc0e36cc2bd7d7b33c72c17c468f6

This is an minimum example to use it:

library(shiny)
library(leaflet)

ui <- fluidPage(
  leafletOutput("mymap")
)

server <- function(input, output, session) {
  output$mymap <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%

      zoomControlPosition('topright')
  })
}

shinyApp(ui, server)

How to locate leaflet zoom control in a desired position

We can create additional Control placeholder(s), besides the 4 provided corners by default.

A nice advantage is that it allows putting several Controls in one of those placeholders. They will stack without overlapping, as in the standard corners.

JavaScript:

// Create additional Control placeholders
function addControlPlaceholders(map) {
    var corners = map._controlCorners,
        l = 'leaflet-',
        container = map._controlContainer;

    function createCorner(vSide, hSide) {
        var className = l + vSide + ' ' + l + hSide;

        corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('verticalcenter', 'left');
    createCorner('verticalcenter', 'right');
}
addControlPlaceholders(map);

// Change the position of the Zoom Control to a newly created placeholder.
map.zoomControl.setPosition('verticalcenterright');

// You can also put other controls in the same placeholder.
L.control.scale({position: 'verticalcenterright'}).addTo(map);

Then it becomes easy styling those placeholders with CSS, because their DOM parent is the map container itself. Hence top, bottom, left and right can be specified with percentages (which use the parent's dimensions).

CSS:

.leaflet-verticalcenter {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    top: 50%; /* possible because the placeholder's parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

As for vertical centering the placeholder itself, you can use your favourite technique. Here I used the CSS3 Transform to offset the placeholder by half of its own height.

If necessary (e.g. for old browsers compatibility), you can rather use a "calculate-on-load" method to perform this offset, similar to iH8's answer. But you no longer need to run it on map resize, only when adding new Control(s) to the placeholder.

Live demo: https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

Note: there is currently an open PR (Leaflet/Leaflet #5554) for this, but since it is not compatible with old versions of Internet Explorer, it will not likely be merged in Leaflet core.

LeafletJS: How to remove the zoom control

This worked for me:

var map = new L.map('map', { zoomControl: false });

With mapbox try:

var map = L.mapbox.map('map', { zoomControl: false });

See map creation and the zoomControl option in the Leaflet documentation.

Leaflet Zoom Button in Popup

Replace your code with:

function getLoc(latlng){
    map.setView(JSON.parse(latlng));
}

var latlngStr = JSON.stringify([layer.getLatLng().lat,layer.getLatLng().lng]);
layer.bindPopup("<center><h4><b>"+feature.properties.full_name+"</b></h4></center>" +
                       "<button onclick= 'getLoc(\""+latlngStr+"\")'>Zoom</button>");

1. e should be a variable but can not readed out because it is a string onclick='getLoc(e)'
2. e never defined you should add your latlng to the function and not a event
3. Now the latlng is converted to a array and then added as string to the function. When the function is called it convert it back to a array and then the view is moved to the latlng

---

Related Topics