[GIS] A problem with event firing upon mouseout

javascriptleaflet

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');
        this.refresh();
        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.';
                }
        };
        infobox.addTo(map);

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) {
                    e.target.setStyle({
                        weight:3
                    });
                    infobox.refresh(feature.proprtyies);
                },
                'mouseout': function (e) {
                    allObs.resetStyle(e.target);
                    infobox.refresh();
                },
                'click': function (e) {
                    map.fitBounds(e.target.getBounds());
                }
            });
        }
    }).addTo(map);

Best Answer

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.

Related Question