enlarge leaflet map on hover

Question

Hi I trying to enlarge my leaflet map by changing its shape and size on hover. I'm using css to achieve this. Following is the code.

css

div#map {
 height: 300px;
 width: 300px;
 position: absolute;
 border-color: #000000;
 border-radius: 400px;
 z-index: 0;
}

div#map:hover {
  margin-left: auto;
  margin-bottom: auto;
  margin-top: auto;
  margin-right: auto;
  height: 650px;
  width: 650px;
  position: absolute;
  border-radius: 30px;  
  transition: 0.8s;
  box-shadow: 5px 5px 10px #888888;
  z-index: 0;
}

#pattern {
  text-align: center;
  padding: 10px;
}

html
  <div id="map">
    <!-- <img id="hand" style="width:60px; height:60px;"     src="http://nbchardballtalk.files.wordpress.com/2010/10/click-here-large2.jpg"/> -->
  </div>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

js

var map = L.map('map').setView([40.7241745, -73.9841674], 13);
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapSer    ver/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
}).addTo(map);

var mylayer = L.geoJson().addTo(map);

What issue I'm facing is that after I hover over the map, the shape changes and the borders expand keeping the map of the same height width as before. So if before I had a height width of 300/300px each, the new map with bigger borders looks like this.

Before hover After hover

I also couldn't get the map to keep the same center after hovering. Kindly enlighten.

If you don't try you're not going to know. I would also try the `invalidateSize` function call. — sebnukem, Dec 12 '14 at 22:08
@sebnukem, I'm trying its functionality from this question, http://stackoverflow.com/questions/10762984/leaflet-map-not-displayed-properly-inside-tabbed-panel but still not getting solution with what I'm trying to do. — Aks, Dec 13 '14 at 03:43

score 2 · Accepted Answer · answered Dec 13 '14 at 04:53

Sorry for the late reply .

what you were trying to achieve could be done by calling the invalidateSize() API after the new container size has been specified on hover and binding the change in container size to mouse hver event ( mouseenter and mouseleave).

The invalidateSize redraws the map after the cnotainer size is changed. So basically on mouse enter enlarge the container size ( #map) and call the invalidateSize to redraw the maptile. Similarly on mouse leave , reduce the container size and call the invalidateSize API.

Here is the code snippet...

$(document).ready(function() {

  var map;
  var mylayer;

  // draw the map here 

  map = L.map('map', {
    center: [40.7241745, -73.9841674],
    zoom: 13,
    attributionControl: false
  });
  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
  }).addTo(map);

  mylayer = L.geoJson().addTo(map);
  L.circle([40.7241745, -73.9841674], 250).addTo(map);
  L.marker([40.7241745, -73.9841674]).addTo(map);


  // binding to mouse hover events of mouseenter and mouseleave


  $('#map').bind('mouseenter', function() {
    $('#map').addClass('hoverclass');
    map.invalidateSize();
  });
  $('#map').bind('mouseleave', function() {
    $('#map').removeClass('hoverclass');
    map.invalidateSize();
  });
});

#map {
  height: 150px;
  width: 300px;
  margin: 0 auto;
}
.hoverclass {
  height: 450px !important;
  width: 600px !important;
  border: 1px solid #000;
  box-shadow: 10px 10px 5px #888888;
}

<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map"></div>

This also centers the map to the latlng you specified.

Hope this helps

enlarge leaflet map on hover

1 Answers1