Folleto - Cambiar estilo al hacer clic

Question

Estoy beginer con Folleto de la biblioteca y me estoy enfrentando un problema con un geojson.

Tengo un externo geojson archivo (puntos) y me gustaría mostrar un círculo para cada punto de coordenadas y obtener un mayor círculo en un clic de ratón, con una ventana emergente.

Yo no tengo ningún problema para cargar el geojson y para ver el círculo de los marcadores, pero no puedo conseguir los dos más grandes cricle y emergente.

Aquí es parte de mi código :

function clickFeature(e) {
                    if(clickedFeature) {clickedFeature.setRadius(3)}
                    var layer = e.target;
                    e.target.setRadius(5);
                    clickedFeature = e.target;
                    info.update(layer.feature.properties)
                    }   
function onEachFeature(feature, layer) {
                                    layer.bindPopup(feature.properties.PROPERTY).addTo(MyLayer);
                                    layer.on({click: clickFeature,})
                                    }

MyGeojson = new L.geoJson(mygeojson, {
    onEachFeature: onEachFeature,       
    pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.TYPE),
                color: "#242121",
                opacity: 1,
                weight: 1.5,
                fillOpacity: 1
            });
        }
    }).addTo(map);

Primero tenía este mismo tipo de funciones y de código, pero usando el icono PNG en lugar de circleMarkers, y funcionó bien, tanto más grande icono y la ventana de clic del mouse.

Alguna idea de lo que está mal ?

Answer 1

Un par de ediciones y sugerencias que le pueden ayudar. Estoy seguro de que hay una forma más elegante de hacer esto, pero lo he comprobado y funciona.

Usted tiene que comprobar primero si la variable clickedFeature ya está definido. Una manera de hacerlo es mediante la comprobación de qué tipo es. Si el tipo no está definido todavía, entonces la variable no está definida todavía.

function clickFeature(e) {
                    if (typeof clickedFeature != 'undefined') {clickedFeature.setRadius(3)}

Usted tiene que definir la función update. info.update no tienen sentido en este caso.

                    var layer = e.target;
                    e.target.setRadius(5);
                    clickedFeature = e.target;
                    update(feature.properties.PROPERTY)
                    }   


    var update = function (feature, latlng) {
        return L.circleMarker(latlng)
};

Usted no tiene que añadirlo a su capa de nuevo, ya que la función se llama cuando se crea la capa. Así que he borrado .addTo(MyLayer).

function onEachFeature(feature, layer) {
                                layer.bindPopup(feature.properties.name);
                                layer.on({click: clickFeature,})
                                }