stefanocudini / leaflet-geojson-selector Goto Github PK

I'm trying to use this plugin to implement polygon feature selection but I'm not sure if its possible just yet. Here's what I want to do...

Each feature and corresponding list element should either have default style, highlight style (when hovered over) or selected style (when clicked on). Selections could be exclusive (ie at most one feature selected at a time, clicking another feature de-selects any currently selected feature) or multiple (clicking toggles selection status).

I don't think this can be done with the current code base because the code only supports two styles, default and active, and I don't see how to extend this to selectable items. If I change the style of a selected feature on a click event it gets reset to default on mouseout events.

Is this possible now? Or is it worth implementing? I'm not much of a JS programmer but I'll do what I can....

Hi Stefano,

Great work! The demo seems broken due to static file loading fail. Look forward to it. Thanks!

The radio buttons in the radio group are currently not keyboard-navigable using the arrow keys.

Other resources that may be helpful:

• Leaflet guide to accessibility: Test your maps
• Leaflet Plugin Authoring Guide: Content Accessibility

proposed by #1

able to hide panel list.. selection only using map features

As a user, I would like to mantain the country selected on the map through a configuration file

As a user, I would like to have a search input text on top of the country list

And hide feature map on item list hide

create minimap inside Leaflet Control box contains leaflet-geojson-selector

https://github.com/stefanocudini/geojson-resources/tree/master

As a user, I would like to have the selected items sorted on top of the list

apply css class and style on selected layers/items

Hi, I'm using json and folium for making a map of distribution. I'm fairly new to phyton and I don't understand the key_on parameter. Can you help me recognize it?

to continue stefanocudini/leaflet-list-markers#3 (comment)

Its possibly to use option to update the list (when move) for show only json features on view

Is possibile to have a search input for the points that I load from json?

I've merged your code with some of my code, but some parts are being used as they were in the original. My question is about the table part of the code.

              geoList.on('selector:change', function(e) {

			var jsonObj = $.parseJSON( JSON.stringify(e.layers[0].feature.properties) );
			var html = 'Selection:<br /><table border="1">';
			$.each(jsonObj, function(key, value){
					html += '<tr>';
					html += '<td>' + key.replace(":", " ") + '</td>';
					html += '<td>' + value + '</td>';
					html += '</tr>';
			});
			html += '</table>';

			$('.selection').html(html);
		});

How can I make the table items clickable? I have a property inside my .geojson that I need to use at the end of an URL. Before knowing your selector, I was calling the property like this, just to give you an example:

function forEachFeature(feature, layer){
	popupContent = "<strong>Name</strong>: " + feature.properties.nome_area + "<br>" + 
	"<strong>City</strong>: " + feature.properties.munic + "<br>" +
	"<strong>Area</strong>: " + feature.properties.areaha + "<br>" +
	'<strong>Link for SIGEF consulting</strong>: ' +
	'<a href="https://sigef.incra.gov.br/geo/parcela/detalhe/' + feature.properties.parcela_co + '"' + ">" + "Click here" +  "</a>" + "<br>" +
	"<strong>Owners</strong>: " + feature.properties.BC5PROPRIE
	
	
	// Configuração do Popup
	if (feature.properties && feature.properties.popupContent) {
	popupContent += feature.properties.popupContent;
	}
	layer.bindPopup(popupContent);

The "feature.properties.parcela_co" is the property that I was talking about. Your function uses the same method to every property, so I can't apply in your table the same line I did in my code, because it will lead the client to inexistent links. Is there a way to solve this? Your selector is great, it is basically what I was trying to do, but I'm a jr. dev, so i'm having a hard time trying to understand the functions. The little I did, was using "console.log()" to see what each parameter was calling, but I still can't do the URL thing.

self.layerIso.eachLayer(function(l){
self.layerIso.resetStyle(l);
});

Copyright means nobody else can use this code in open source projects. Please consider using an open source license like MIT.

multiple selection with activatable option
proposed by #1

How remove selector(control), but not delete layer?