stefanocudini / leaflet-geojson-selector

Show GeoJSON Layer like as Interactive Menu List

leaflet-geojson-selector

Show GeoJSON properties in a interactive menu and map

Copyright 2016 Stefano Cudini

If this project helped your work help me to keep this alive by Paypal DONATION ❤

Tested in Leaflet 0.7.x, 1.3.x

Licensed under the MIT

#Where

Demo online:
opengeo.tech/maps/leaflet-geojson-selector

Source code:
Github
NPM

Options

Option	Default	Description
collapsed	false	collapse panel list
position	'bottomleft'	position of panel list
listLabel	'properties.name'	GeoJSON property to generate items list
listSortBy	'properties.name'	property to sort items, default is listLabel
listItemBuild	null	function list item builder
activeListFromLayer	true	highlight of list item on layer hover
zoomToLayer	false
listOnlyVisibleLayers	false	show only items visible in map canvas
multiple	false	active multiple selection
style	{}	style for GeoJSON features
activeClass	'active'	css class name for active list items
activeStyle		style for Active GeoJSON features
selectClass	'selected'
selectStyle	{}	style for Selected GeoJSON features

Events

Event	Data	Description
'selector:change'	{selected, layers}	fired after checked item in list, selected is true if any layer is selected

Methods

Method	Arguments	Description
reload()	layer	search text by external code

#Build

Since Version 1.4.7 this plugin support Grunt for building process. Therefore the deployment require NPM installed in your system. After you've made sure to have npm working, run this in command line:

npm install
grunt

leaflet-geojson-selector's Issues

How remove this f**cking selector?

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

Update list in function of view

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

incorporate as Leaflet Control

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

custom style for each geojson feature/items

proposed by #1

maxbounds lost after reload geojson

connect to geojson-resources

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

Consider using an open source license?

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

Key_on problem

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?

add search filter input

And hide feature map on item list hide

fix reset higlights

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

country selected on the map

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

add option to disable panel list

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

How to make the table items clickable?

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.

Persistent selection

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....

move css style to js config

Multiple Selection

multiple selection with activatable option
proposed by #1

Search input box

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

[accessibility] Keyboard-navigable radio buttons in `geojson-list-group`

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

demo broken

Hi Stefano,

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

selected styles css class

apply css class and style on selected layers/items

reset zoom map on blur

selected items on top

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

search input text

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