I'm trying to create a point map that displays information about a point in an info box upon user mouseover and changes the styling of the point. On mouseout, I want the info box and marker styling to revert back to empty/default styling. On click, I want the map to zoom-in to the point.

As written, the code changes the style of a marker upon mouseover. Upon click, the map zooms-in on the point. However, the feature does not revert back to its original styling upon mouseout. Additionally, the info box does not display any information about the feature. The zoom when clicked does work.

I'm very new to leaflet and javascript.

Below is the code that create the info box in which I will display information about the feature moused over:

    // Map control to present informaiton
    var infobox = L.control ({
        position: 'bottomright'
    infobox.onAdd = function (e) {
        this._div = L.DomUtil.create('div', 'info');
        return this._div;
    infobox.refresh = function (properties) {
        this._div.innerHTML = '<h4><center>Observation Information</center></h4>';
        if (typeof (properties) != 'undefined') {
            this._div.innerHTML += 'Refernce #: ' + properties.RefNum + '<br/>'
            + 'Group: ' + properties.Group + '<br/'
            + 'Plaintiff Type: ' + properties.PlaType + '<br>'
            + '<b>Click to zoom.</b>';
                } else {
                    this._div.innerHTML += 'Hover an observation for information.';

Here is the code that reads in the geoJson file with the point features:

    //create layer for all observations, load geoJson object with all observations, define the marker type, bind pop-up using onEachFeature, add to map
    var allObs = L.geoJson(allobs, {                    
        pointToLayer : function (feature, latlng) {
            switch (feature.properties.Group) {
                case "Control": return L.circleMarker(latlng, controlMarkerOptions);
                case "Limited": return L.circleMarker(latlng, limitedMarkerOptions);
                case "Maximal": return L.circleMarker(latlng, maxMarkerOptions);
        onEachFeature : function (feature, layer) {
            layer.on ({
                'mousemove': function(e) {
                'mouseout': function (e) {
                'click': function (e) {
  • 1
    You have a typo in your code infobox.refresh(feature.proprtyies); -> infobox.refresh(feature.properties);. Is that because of copying the code to here or is it also in your source code? Normally js crashes once it runs into an error (which happens in your case on mousemove). Does the problem still exist after fixing the typo? – Sidney Gijzen Feb 16 '15 at 19:51
  • Hi Sidney: That fixed it! I need to get back into the coding mindset. Its been a few years since I coded and that was with Java so I could use Eclipse to debug. Thank you again. You saved me hours of head banging. Why didn't that typo throw an error that I could see in the Firefox developer window? – Eric Feb 17 '15 at 1:16
  • Awesome Eric! Glad to hear. You're welcome :). It should throw an error in the developer window. Make sure you have the developer window opened on mousemove. – Sidney Gijzen Feb 17 '15 at 12:11
  • Could you please post the solution as answer so the question can be marked as answered? – Thomas B Feb 18 '15 at 17:02

I had a typo in the code "infobox.refresh(feature.proprtyies); -> infobox.refresh(feature.properties);" Correcting the typo fixed the problem. Except for the typo, the mouse event code was correct.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.