leaflet-geojson-layer-switcher
v1.1.2
Published
Allows to navigate between GeoJSON layers, select some, and return selection.
Downloads
80
Maintainers
Readme
Leaflet.GeojsonLayerSwitcher
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
anddist/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
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 tofalse
. 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. - completeButton
<Boolean>
: Add a complete button in the popup. When clicked, it will trigger alayerSwitcher.complete
map event container the selected layers - popupAnchor
<Array>
: Allows you to change Leaflet.Dialog anchor. Defaults to[10, 60]
. - position
<String>
: Allows you to change Leaflet.Dialog position. Defaults totopright
.
Note : style and styleSelected support PolylineDecorator. Just provide the patterns
key any configuration needed from PolylineDecorator.
License
MIT © Easy-Mountain