title: Leaflet highlight marker when mouseover with different colors
body: <p>I'm trying to setup a marker highlight when I mouse over a marker. My markers are coloured based on whether a user is active or not. If they are active the marker further distinguishes between males and females.  </p>
  
  <p>My HTML file looks like:</p>
  
  <pre><code>&lt;html lang="en-US" xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head profile="http://gmpg.org/xfn/11"&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
    &lt;!--The CSS files--&gt;
    &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"&gt;
  
    &lt;!--The dependent .js files--&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;title&gt;Circle Highlight&lt;/title&gt;
      &lt;style&gt; html, body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
  
      #map {
        height: 100%;
      }
      &lt;/style&gt;
  &lt;/body&gt; 
  
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\circles.geojson'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='C:\Users\Lukasz Obara\OneDrive\Programing\HTML\Slider\leaflet_demo_circles.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>my circles.geojson file:</p>
  
  <pre><code>var circles= {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [35.1966, 31.7825]
          },
          "properties": {
              "GPSId": "2",
              "DateStart": "2015-06-23",
              "DateClosed": "2016-01-23",
              "GPSUserName": "fake2",
              "GPSUserColor": "#FF5500",
              "Gender": "Male",
              "Active": 1
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [35.2, 31.780117]
          },
          "properties": {
              "GPSId": "6",
              "DateStart": "2015-06-23",
              "DateClosed": "2016-01-23",
              "GPSUserName": "fake1",
              "GPSUserColor": "#00FF57",
              "Gender": "Female",
              "Active": 0
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [35.201715, 31.779548]
          },
          "properties": {
              "GPSId": "15",
              "DateStart": "2015-02-21",
              "DateClosed": "2016-02-28",
              "GPSUserName": "fake10",
              "GPSUserColor": "#00FF57",
              "Gender": "Male",
              "Active": 1
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [35.200987, 31.779606]
          },
          "properties": {
              "GPSId": "16",
              "DateStart": "2015-01-01",
              "DateClosed": "2016-01-01",
              "GPSUserName": "fake11",
              "GPSUserColor": "#00FF57",
              "Gender": "Female",
              "Active": 0
          }
      }, {
          "type": "Feature",
          "geometry": {
              "type": "Point",
              "coordinates": [35.200987, 31.780522]
          },
          "properties": {
              "GPSId": "17",
              "DateStart": "2015-02-04",
              "DateClosed": "2016-09-21",
              "GPSUserName": "fake12",
              "GPSUserColor": "#00FF57",
              "Gender": "Male",
              "Active": 1
          }
      }]
  };
  </code></pre>
  
  <p>and my javascript <code>leaflet_demo_circles.js</code> file </p>
  
  <pre><code>var map = L.map( 'map', {
  center: [31.780117, 35.2],
  zoom: 17,
  minZoom: 2,
  maxZoom: 20
  });
  
  L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
  attribution: '&amp;copy; &lt;a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank"&gt;OpenStreetMap&lt;/a&gt; contributors | Tiles Courtesy of &lt;a href="http://www.mapquest.com/" title="MapQuest" target="_blank"&gt;MapQuest&lt;/a&gt; &lt;img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16"&gt;',
      subdomains: ['otile1','otile2','otile3','otile4']
  }).addTo(map);
  
  // This will produce a static black circle
  var circle2 = L.circle([31.7805, 35.203], 8, {
      color: "#000000",
      stroke: true,
      fillColor: "#000000",
      weight: 2,
      fillOpacity: 0.7
  }).addTo(map);
  
  ///////////////////////////////////////////////////////////////////////////
  //Aesthetics                                                             //
  ///////////////////////////////////////////////////////////////////////////
  
  //define styles for circle markers
  var blueMarker ={
      radius: 8,
      stroke: true,
      color: "#0000FF",
      weight: 2,
      opacity: 1,
      fill: true,
  //  fillColor: "#FF0000",
      fillOpacity: 0.5
  }
  
  var pinkMarker ={
      radius: 8,
      stroke: true,
      color: "#FF99FF",
      weight: 2,
      opacity: 1,
      fill: true,
  //  fillColor: "#FF0000",
      fillOpacity: 0.5
  }
  
  var greyMarker = {
      radius: 8,
      stroke: true,
      color: "#808080",
      weight: 2,
      opacity: 1,
      fill: true,
  //  fillColor: "#FF0000",
      fillOpacity: 0.5
  };
  
  // Highlighted circles ///////////////////
  var blueMarkerHighlighted ={
      radius: 10,
      stroke: true,
      color: "#0000FF",
      weight: 2,
      opacity: 1,
      fill: true,
  //  fillColor: "#FF0000",
      fillOpacity: 0.75
  }
  
  var pinkMarkerHighlighted ={
      radius: 10,
      stroke: true,
      color: "#FF99FF",
      weight: 2,
      opacity: 1,
      fill: true,
  //  fillColor: "#FF0000",
      fillOpacity: 0.75
  }
  
  var greyMarkerHighlighted = {
      radius: 10,
      stroke: true,
      color: "#808080",
      weight: 2,
      opacity: 1,
      fill: true,
  //  fillColor: "#FF0000",
      fillOpacity: 0.75
  };
  
  ///////////////////////////////////////////////////////////////////////////
  //functions to attach styles and popups to the marker layer              //
  ///////////////////////////////////////////////////////////////////////////
  
  //Assigns colors based on activity and gender
  function colors (feature, layer) {
      if (feature.properties.Active === 1) {
          if (feature.properties.Gender === "Male") {
              return L.circleMarker(layer, blueMarker);
          } else {
              return L.circleMarker(layer, pinkMarker);
         }
      } else {
          return L.circleMarker(layer, greyMarker);
      }
  };
  
  function popup (feature, layer) {
      layer.bindPopup("&lt;h1&gt;" + feature.properties.GPSUserName + "&lt;/h1&gt;");
  };
  
  ///////////////////////////////////////////////////////////////////////////
  //displaying the data on the map                                         //
  ///////////////////////////////////////////////////////////////////////////
  
  dotlayer = L.geoJson(circles, {
      pointToLayer: colors,
      onEachFeature: popup
  }).addTo(map);
  </code></pre>
  
  <p>I tried replacing the two above functions with the following to assign a colour and have an effect when I mouse over, but I have no success.</p>
  
  <pre><code>function dotStyleDefault() {
      if (feature.properties.Active === 1) {
          if (feature.properties.Gender === "Male") {
              return blueMarker;
          } else {
              return pinkMarker;
         }
      } else {
          return greyMarker;
      }
  };
  
  function dotStyleHighlight(){
      if (feature.properties.Active === 1) {
          if (feature.properties.Gender === "Male") {
              return blueMarkerHighlighted;
          } else {
              return pinkMarkerHighlighted;
         }
      } else {
          return greyMarkerHighlighted;
      }
  }
  
  function highlightDot(e) {
      var layer = e.target;
      layer.setStyle(dotStyleHighlight);
  };
  
  function resetDotHighlight(e) {
      var layer = e.target;
      layer.setStyle(dotStyleDefault);
  };
  
  function onEachDot(feature, layer) {
      layer.on({
          mouseover: highlightDot,
          mouseout: resetDotHighlight
      });
      layer.bindPopup('&lt;table style="width:150px"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;&lt;b&gt;name:&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;' + feature.properties.GPSId + '&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr class&gt;&lt;td&gt;&lt;div&gt;&lt;b&gt;year:&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;' + feature.properties.DateStart + '&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;');
  };
  
  ///////////////////////////////////////////////////////////////////////////
  //displaying the data on the map                                         //
  ///////////////////////////////////////////////////////////////////////////
  
  dotlayer = L.geoJson(circles, {
      pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, dotStyleDefault);
      },
      onEachFeature: onEachDot
  }).addTo(map);
  </code></pre>