title: Mouseover one feature to highlight another feature leaflet
body: <p>I have created a map using leaflet that displays information about states upon mouseover and on click it goes to another page. Recently, I have needed to place labels on the map as well. Since, I am using GeoJSON features, there is no easy way to add the labels with a plugin. I have used a base map to put labels on the map and for small states I have used a line out to the label that is hovering over empty space. I am trying to tie a rectangle feature that encases the label to the state feature in order to make the state highlight. I have tried putting the coordinates in the same feature in the geojson but that causes the label feature to be color and we want the label feature to remain hidden.</p>
  
  <p>Here is the map section of my code:</p>
  
  <pre><code>var map = L.map('map', {zoomControl: false}).setView([38.165, -98.613], 4);
  
  /*L.tileLayer('http://{s}.tiles.mapbox.com/v3/wcgislab.k1dm05p3/{z}/{x}/{y}.png', {
      id: 'wcgislab.k1dm05p3'
  }).addTo(map);*/
  
  var states = &lt;?php echo json_encode($features);?&gt;;
  
  var imageUrl = 'http://www.link.com/images/map.jpg',
      imageBounds = [[52.5, -128], [20, -129], [20, -52], [53, -51.5]];
  
  L.imageOverlay(imageUrl, imageBounds).addTo(map);
  
  function highlightFeature(e) {
      var layer = e.target;
      var feature = e.target.feature;
      if(feature.properties.STATE_TYPE == "Label")
          {
  
          }
          else
          {
              layer.setStyle({
                  weight: 5,
                  color: '#666',
                  dashArray: '',
                  fillOpacity: 0.9
              });
  
              if (!L.Browser.ie &amp;&amp; !L.Browser.opera) {
                  layer.bringToFront();
              }
          }
          info.update(layer.feature.properties);
      }
  
      function gotofeature(e) {
          var feature = e.target.feature;
  
          window.location.href = 'http://www.link.com/state.php?State='+feature.properties.State_Abbr;
  
      }
  
      function getColor(str){
          switch (str) {
              case 'A': return "#00cc58";
              case 'A+': return "#00cc58";
              case 'A-': return "#00cc58";
              case 'B': return "#a3e300";
              case 'B+': return "#a3e300";
              case 'B-': return "#a3e300";
              case 'C': return "#faa200";
              case 'C+': return "#f2fa00";
              case 'C-': return "#f2fa00";
              case 'D-F': return "#fa2e00";
          }
      }
  
      function resetHighlight(e) {
          geojson.resetStyle(e.target);
          info.update();
      }
  
      function onEachFeature(feature, layer) {
          layer.on({
              mouseover: highlightFeature,
              mouseout: resetHighlight,
              click: gotofeature
          });
      }
  
      geojson = L.geoJson(states, {
          style: function(feature) {
              if(feature.properties.STATE_TYPE != "Label")
              {
                  switch (feature.properties.data.&lt;?php echo $grade;?&gt;) {
                      case 'A': return {fillColor: "#00cc58", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'A+': return {fillColor: "#00cc58", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'A-': return {fillColor: "#00cc58", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'B': return {fillColor: "#a3e300", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'B+': return {fillColor: "#a3e300", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'B-': return {fillColor: "#a3e300", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'C': return {fillColor: "#faa200", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'C+': return {fillColor: "#faa200", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'C-': return {fillColor: "#faa200", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'D': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'D+': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'D-': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'F': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'F+': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                      case 'F-': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                  }
              }
              else
              {
                  return {fillcolor: 'white', fillOpacity: 0, weight: 0, opacity: 0, color: 'white', dashArray: '3'};
              }
          },
          onEachFeature: onEachFeature
      }).addTo(map);
  
      var legend = L.control({position: 'bottomright'});
  
      legend.onAdd = function (map) {
  
          var div = L.DomUtil.create('div', 'info legend'),
              grades = ['A', 'B', 'C', 'D-F'],
              labels = ['&lt;i style="background:#00cc58"&gt;&lt;/i&gt;'];
  
          // loop through our density intervals and generate a label with a colored square for each interval
          for (var i = 0; i &lt; grades.length; i++) {
              div.innerHTML +=
                  '&lt;div class="info_labels"&gt;&lt;i style="background:' + getColor(grades[i])+ '"&gt;&lt;/i&gt; ' +
                  grades[i] + '&lt;/div&gt;';
          }
  
          return div;
      };
  
  
      var info = L.control();
  
      info.onAdd = function (map) {
          this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
          this.update();
          return this._div;
      };
  
      // method that we will use to update the control based on feature properties passed
      info.update = function (props) {
          this._div.innerHTML = '&lt;h4&gt;&lt;?php echo $title;?&gt;&lt;br&gt;' + (props ?
              "&lt;span&gt;" + props.STATE_NAME + "&lt;/span&gt;&lt;br&gt;&lt;span style='font-size:16px'&gt;" +props.data.&lt;?php echo $subject."Score_Grade";?&gt; +'&lt;/span&gt;' 
              : 'Hover over a state');
      };
  
      info.addTo(map);
  
      function numberWithCommas(x) {
          return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
  
      map.dragging.disable();
      map.touchZoom.disable();
      map.doubleClickZoom.disable();
      map.scrollWheelZoom.disable();
  
      legend.addTo(map);
  </code></pre>