[GIS] resetStyle in geoJSON pointToLayer circleMarkers

leaflet

I am creating a geoJSON layer, with pointToLayer returning circleMarkers. In that layer's oneachfeature, I am triggering a style change on hover, and this works fine. However, I cannot reset the style on mouseout. It all works with lines and polygons, but not with points created as circleMarkers via pointToLayers.

How can I reset the style of such circleMarkers on mouseout?

Best Answer

One method is to create your own reset function using setStyle to be run on mouseout. For example:

function resetHighlight(e) {
    var layer = e.target;
    layer.setStyle(StyleDefault);
}

(where StyleDefault is your default circleMarker style, defined elsewhere)

Here is an example fiddle using some synthetic data.

Related Solutions

Leaflet – Adding Pop-Up to GeoJSON Layer in Leaflet

Here's an example that I have of loading geojson from a WFS service: http://maps.gcc.tas.gov.au/dogexerciseareas.html

This is another example loading topojson (similar, but different): http://agl.pw/examples/NRM_Regions/map.html

Here's some simple code I use to load a layer:

var myLayer = L.geoJson().addTo(map);
$.getJSON("data/buildings.json", function(json) {
  myLayer.addData(json);
});

Then you can do interactivity and styling with something like this:

    success : function (response) {
        DogExerciseAreas = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("<b>Site name:</b> " + feature.properties.sitename +
                    "<br><b>Dog Exercise: </b>" + feature.properties.dog_exercise +
                    "<br><br>Please ensure that tidy up after your dog. Dogs must be kept under effective control at all times."
                    ,popupOptions);
            }
        }).addTo(map);
    }

EDIT: an example from the leaflet website on styling points (from here http://leafletjs.com/examples/geojson.html):

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

EDIT2: Added a solution to this problem. See here: https://gist.github.com/alexgleith/7112515

All you need to do now is edit the bit where it says 'popupContent' to add your bit and change the code to load data from the file.

[GIS] MarkerCluster don’t work with geojson layer in leaflet

From your above additional code, it looks like you are loading Leaflet.markercluster script before Leaflet script:

<script src="leaflet.markercluster-src.js">
<script src="http://code.jquery.com/jquery-1.12.0.min.js">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js">

You should rather load it after:

<script src="http://code.jquery.com/jquery-1.12.0.min.js">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js">
<script src="leaflet.markercluster-src.js">

You should learn to use your browser console (on Windows / Linux browsers, press F12; on Mac OS browsers, press Command ⌘+Option ⌥+i) to look for potential errors.

In your case, I suspect there should be something like "ReferenceError: L is not defined" due to Leaflet.markercluster trying to attach some code to Leaflet's L namespace, but could not find it because it is not loaded yet.

Best Answer

Related Solutions

Leaflet – Adding Pop-Up to GeoJSON Layer in Leaflet

[GIS] MarkerCluster don’t work with geojson layer in leaflet

Related Question