Allows to navigate between GeoJSON layers, select some, and return selection.
Clone or download
Jean-Baptiste de Berlhe
Jean-Baptiste de Berlhe [FIX] Usage instructions for non-ES6.
Latest commit f13442d Dec 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Plugin drop. Dec 19, 2018
dist Plugin drop. Dec 19, 2018
src Plugin drop. Dec 19, 2018
.eslintrc.json Plugin drop. Dec 19, 2018
.gitattributes Plugin drop. Dec 19, 2018
.gitignore Plugin drop. Dec 19, 2018
.travis.yml Plugin drop. Dec 19, 2018
AUTHORS.txt Plugin drop. Dec 19, 2018
CHANGELOG.md Plugin drop. Dec 19, 2018
LICENSE.txt Plugin drop. Dec 19, 2018
README.md [FIX] Usage instructions for non-ES6. Dec 20, 2018
brunch-config.js Plugin drop. Dec 19, 2018
package-lock.json Plugin drop. Dec 19, 2018
package.json [FIX] Usage instructions for non-ES6. Dec 20, 2018

README.md

Leaflet.GeojsonLayerSwitcher NPM version Build Status

This plugin is intended to be used for Polyline selection. Navigates between layers and switches the selection state.

Installation

npm

$ npm install --save leaflet-geojson-layer-switcher

browser

  • Download or clone this github project
  • Include dist/Leaflet.GeojsonLayerSwitcher.min.js and dist/Leaflet.GeojsonLayerSwitcher.min.css in your project

compile

  • Download or clone this github project
  • Run npm i in the project folder
  • Run npm run build

Demo

demo picture

Usage

es6 include

import L from 'leaflet';
import leafletGeojsonLayerSwitcher from 'leaflet-geojson-layer-switcher';
leafletGeojsonLayerSwitcher(L);

Don't forget to link the CSS file.

non-es6 include

<link rel="stylesheet" href="Leaflet.GeojsonLayerSwitcher.min.css" />
<script src="Leaflet.GeojsonLayerSwitcher.min.js"></script>
require('js/Leaflet.GeojsonLayerSwitcher.js').default(L);

Interaction

const map = L.map('map', {
    center: [45.1834782, 5.7831946],
    zoom: 13
});

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const geojson = {
	type: "FeatureCollection",
	features: [
		{
			type: "Feature",
			properties: {
				enabled: true
			},
			geometry: {
				type: "LineString",
				coordinates: [[5.0,45.0],[5.1,45.1],[5.0,45.2]]
			}
		},
		{
			type: "Feature",
			properties: {
				enabled: false
			},
			geometry: {
				type: "LineString",
				coordinates: [[6.0,46.0],[6.1,46.1],[6.0,46.2]]
			}
		},
		{
			type: "Feature",
			properties: {},
			geometry: {
				type: "LineString",
				coordinates: [[7.0,47.0],[7.1,47.1],[7.0,47.2]]
			}
		}
	]
};

const handler = L.geoJSONLayerSwitcher(map, {
	propertyStateSelected: 'enabled'
});

handler.enable();
handler.addData(geojson);

// USER INTERACTS WITH PLUGIN

const selectedLayersArray = handler.getSelection();
handler.disable();

//Do whatever you want with your layers.

API

Factory L.geoJSONLayerSwitcher(<Map> map, <Object> options?)

Options

  • propertyStateSelected <String> : The feature's property name containing a boolean defining wether the layer is selected. If feature does not have this property, it will be initialized to false. Default property is 'selected'.
  • style <Object> : Customize style applied to polylines which are not selected. Default is dashed and red.
  • styleSelected <Object> : Customize style applied to selected polylines. Default is dashed and green.
  • selectButton <Object> : Customize how the selection button should appear. icon is the name of a font-awesome class, which defaults to 'fa-plus'. bgColor allows you to change the default green.
  • deselectButton <Object> : Customize how the de-selection button should appear. icon defaults to 'fa-minus' and gColor defaults to red.
  • popupAnchor <Array> : Allows you to change Leaflet.Dialog anchor. Defaults to [10, 60].

Note : style and styleSelected support PolylineDecorator. Just provide the patterns key any configuration needed from PolylineDecorator.

License

MIT © Easy-Mountain