Search code examples
javascriptdrupaldrupal-7leafletip-geolocation

Change Leaflet Map Zoom control style using Drupal Leaflet module

I am unable to find settings where I can make Zoom Control Style "Large" for Leaflet map.

Current system My Page is coming from View, where view format is "Map (Leaflet API, via IPGV&M)". I am displaying custom markup on map using Leaflet marker. I am using following modules for D7

  • Leaflet
  • Leaflet views
  • Leaflet More Maps
  • ip_geoloc

Edited

I need to change Zoom control style from Small to Large. This is a small Zoom control:enter image description here prntscr.com/9eeq41 and This is a Large enter image description here prntscr.com/9eeqqu

Solution

  • You can achieve this by including Zoomslider JS and CSS in your theme's js and css folder respectively.

    Bind it with leaflet.map and then add zoomslider control to map.

    Your code should look something like this : 

    jQuery(document).bind('leaflet.map', function(event, map, lMap) {
    L.control.zoomslider().addTo(lMap);
});

    This will add zoomslider control to your map.

    You can find Reference here : Leaflet Zoomslider