├── .gitignore ├── images ├── back.png ├── list-icon.png ├── leaflet-geojson-selector.jpg └── list-icon.svg ├── package.json ├── dist ├── leaflet-geojson-selector.min.css ├── leaflet-geojson-selector.src.css ├── leaflet-geojson-selector.min.js └── leaflet-geojson-selector.src.js ├── src ├── leaflet-geojson-selector.css └── leaflet-geojson-selector.js ├── examples ├── style.css ├── points.html ├── simple.html ├── multi.html ├── custom-item.html ├── reload-layer.html └── italy-regions-centroids.json ├── Gruntfile.js ├── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules 3 | -------------------------------------------------------------------------------- /images/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanocudini/leaflet-geojson-selector/HEAD/images/back.png -------------------------------------------------------------------------------- /images/list-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanocudini/leaflet-geojson-selector/HEAD/images/list-icon.png -------------------------------------------------------------------------------- /images/leaflet-geojson-selector.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanocudini/leaflet-geojson-selector/HEAD/images/leaflet-geojson-selector.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leaflet-geojson-selector", 3 | "version": "0.5.5", 4 | "description": "Leaflet Control for select GeoJSON properties in a interactive menu and map", 5 | "repository": { 6 | "type": "git", 7 | "url": "git@github.com:stefanocudini/leaflet-geojson-selector.git" 8 | }, 9 | "homepage": "https://opengeo.tech/maps/leaflet-geojson-selector/", 10 | "author": { 11 | "name": "Stefano Cudini", 12 | "email": "stefano.cudini@gmail.com", 13 | "url": "https://opengeo.tech/" 14 | }, 15 | "main": "dist/leaflet-geojson-selector.src.js", 16 | "license": "MIT", 17 | "keywords": [ 18 | "gis", 19 | "map", 20 | "geojson", 21 | "leaflet" 22 | ], 23 | "dependencies": { 24 | "leaflet": "^1.3.4" 25 | }, 26 | "devDependencies": { 27 | "grunt": "~0.4.2", 28 | "grunt-cli": "~0.1.11", 29 | "grunt-contrib-clean": "~0.5.0", 30 | "grunt-contrib-concat": "~0.3.0", 31 | "grunt-contrib-cssmin": "~0.7.0", 32 | "grunt-contrib-jshint": "~0.7.2", 33 | "grunt-contrib-uglify": "~0.2.7", 34 | "jquery": "~3.0.0", 35 | "osmtogeojson": "^2.2.5" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /dist/leaflet-geojson-selector.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Leaflet GeoJSON Selector v0.5.4 - 2018-09-28 3 | * 4 | * Copyright 2018 Stefano Cudini 5 | * stefano.cudini@gmail.com 6 | * https://opengeo.tech/ 7 | * 8 | * Licensed under the MIT license. 9 | * 10 | * Demo: 11 | * https://opengeo.tech/maps/leaflet-geojson-selector/ 12 | * 13 | * Source: 14 | * git@github.com:stefanocudini/leaflet-geojson-selector.git 15 | * 16 | */ 17 | 18 | .leaflet-container .geojson-list{position:relative;float:left;color:#1978cf;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:0;background-color:rgba(255,255,255,.6);z-index:1000;box-shadow:0 1px 7px rgba(0,0,0,.65);margin:0;min-width:50px;min-height:26px;overflow-y:scroll}.geojson-list-group{list-style:none;padding:0;margin:0}.geojson-list-item{padding:0;margin:0;clear:both;cursor:pointer;display:block;overflow:hidden;line-height:18px;vertical-align:middle;font-size:14px;min-width:120px;color:#666;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.5);-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-transform:capitalize}.geojson-list-item.active,.geojson-list-item:hover{display:block;color:#666;text-decoration:none;background-color:rgba(255,204,0,.6)}.geojson-list-item.selected{color:#666;background-color:rgba(255,136,0,.8)}.geojson-list-item input{line-height:18px;margin:4px}.geojson-list-item label{display:block;cursor:pointer;vertical-align:middle}.leaflet-control.geojson-list .geojson-list-group{display:block} -------------------------------------------------------------------------------- /src/leaflet-geojson-selector.css: -------------------------------------------------------------------------------- 1 | 2 | .leaflet-container .geojson-list { 3 | position:relative; 4 | float:left; 5 | color:#1978cf; 6 | -moz-border-radius: 4px; 7 | -webkit-border-radius: 4px; 8 | border-radius: 0; 9 | background-color: rgba(255, 255, 255, 0.6); 10 | z-index:1000; 11 | box-shadow: 0 1px 7px rgba(0,0,0,0.65); 12 | margin: 0; 13 | min-width: 50px; 14 | min-height:26px; 15 | overflow-y: scroll; 16 | } 17 | .geojson-list-group { 18 | list-style: none; 19 | padding: 0; 20 | margin: 0; 21 | } 22 | .geojson-list-item { 23 | padding: 0; 24 | margin: 0; 25 | clear: both; 26 | cursor: pointer; 27 | display: block; 28 | overflow: hidden; 29 | line-height: 18px; 30 | vertical-align: middle; 31 | font-size: 14px; 32 | min-width: 120px; 33 | color: #666; 34 | text-decoration: none; 35 | border-bottom: 1px solid rgba(0,0,0, 0.5); 36 | -moz-user-select: none; 37 | -khtml-user-select: none; 38 | -webkit-user-select: none; 39 | -ms-user-select: none; 40 | user-select: none; 41 | 42 | white-space: nowrap; 43 | text-transform: capitalize; 44 | } 45 | .geojson-list-item:hover, 46 | .geojson-list-item.active { 47 | display: block; 48 | color: #666; 49 | text-decoration: none; 50 | background-color: rgba(255,204,0, 0.6); /* #FFCC00 */ 51 | } 52 | .geojson-list-item.selected { 53 | color: #666; 54 | background-color: rgba(255,136,0, 0.8); /* #FF8800 */ 55 | } 56 | .geojson-list-item input { 57 | line-height: 18px; 58 | margin: 4px; 59 | } 60 | .geojson-list-item label { 61 | display: block; 62 | cursor: pointer; 63 | vertical-align: middle; 64 | } 65 | .leaflet-control.geojson-list .geojson-list-group { 66 | display: block; 67 | } 68 | -------------------------------------------------------------------------------- /dist/leaflet-geojson-selector.src.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Leaflet GeoJSON Selector v0.5.4 - 2018-09-28 3 | * 4 | * Copyright 2018 Stefano Cudini 5 | * stefano.cudini@gmail.com 6 | * https://opengeo.tech/ 7 | * 8 | * Licensed under the MIT license. 9 | * 10 | * Demo: 11 | * https://opengeo.tech/maps/leaflet-geojson-selector/ 12 | * 13 | * Source: 14 | * git@github.com:stefanocudini/leaflet-geojson-selector.git 15 | * 16 | */ 17 | 18 | .leaflet-container .geojson-list { 19 | position:relative; 20 | float:left; 21 | color:#1978cf; 22 | -moz-border-radius: 4px; 23 | -webkit-border-radius: 4px; 24 | border-radius: 0; 25 | background-color: rgba(255, 255, 255, 0.6); 26 | z-index:1000; 27 | box-shadow: 0 1px 7px rgba(0,0,0,0.65); 28 | margin: 0; 29 | min-width: 50px; 30 | min-height:26px; 31 | overflow-y: scroll; 32 | } 33 | .geojson-list-group { 34 | list-style: none; 35 | padding: 0; 36 | margin: 0; 37 | } 38 | .geojson-list-item { 39 | padding: 0; 40 | margin: 0; 41 | clear: both; 42 | cursor: pointer; 43 | display: block; 44 | overflow: hidden; 45 | line-height: 18px; 46 | vertical-align: middle; 47 | font-size: 14px; 48 | min-width: 120px; 49 | color: #666; 50 | text-decoration: none; 51 | border-bottom: 1px solid rgba(0,0,0, 0.5); 52 | -moz-user-select: none; 53 | -khtml-user-select: none; 54 | -webkit-user-select: none; 55 | -ms-user-select: none; 56 | user-select: none; 57 | 58 | white-space: nowrap; 59 | text-transform: capitalize; 60 | } 61 | .geojson-list-item:hover, 62 | .geojson-list-item.active { 63 | display: block; 64 | color: #666; 65 | text-decoration: none; 66 | background-color: rgba(255,204,0, 0.6); /* #FFCC00 */ 67 | } 68 | .geojson-list-item.selected { 69 | color: #666; 70 | background-color: rgba(255,136,0, 0.8); /* #FF8800 */ 71 | } 72 | .geojson-list-item input { 73 | line-height: 18px; 74 | margin: 4px; 75 | } 76 | .geojson-list-item label { 77 | display: block; 78 | cursor: pointer; 79 | vertical-align: middle; 80 | } 81 | .leaflet-control.geojson-list .geojson-list-group { 82 | display: block; 83 | } 84 | -------------------------------------------------------------------------------- /examples/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background:#b5d0d0; 3 | color:#285585; 4 | font-family:Arial; 5 | } 6 | body#home { 7 | /*background:url('images/back.png') no-repeat top left #b5d0d0;*/ 8 | margin-left:150px; 9 | } 10 | 11 | a { 12 | color:#1978cf; 13 | } 14 | a:hover { 15 | color:#fff; 16 | } 17 | h2, h3, h4 { 18 | white-space:nowrap; 19 | margin:1em 0; 20 | } 21 | h3 a, 22 | h3 a:hover { 23 | text-decoration:none; 24 | } 25 | 26 | table { 27 | border-collapse: collapse; 28 | } 29 | 30 | table { 31 | border-collapse: collapse; 32 | width: 100%; 33 | } 34 | 35 | th, td { 36 | text-align: left; 37 | padding: 4px; 38 | } 39 | tr:nth-child(even) {background-color: #f2f2f2;} 40 | 41 | #desc { 42 | float: left; 43 | margin-bottom: 1em; 44 | position: relative; 45 | white-space:nowrap; 46 | font-size:1em; 47 | } 48 | .leaflet-container { 49 | border-radius:.125em; 50 | border:2px solid #1978cf; 51 | box-shadow: 0 0 8px #999; 52 | float:left; 53 | width:800px; 54 | height:400px; 55 | } 56 | .selection { 57 | min-width: 200px; 58 | padding: 4px; 59 | border-radius: 4px; 60 | box-shadow: 0 1px 5px rgba(0,0,0,0.65); 61 | clear: both; 62 | background: #fefefe; 63 | white-space: nowrap; 64 | } 65 | ul { 66 | font-size:.85em; 67 | margin:0; 68 | padding:0; 69 | } 70 | li { 71 | margin:0 0 2px 18px; 72 | } 73 | #copy { 74 | position:fixed; 75 | z-index:1000; 76 | right:150px; 77 | top:-8px; 78 | font-size:.85em; 79 | padding:8px 8px 2px 8px; 80 | background: #323b44; 81 | border: 2px solid #737c85; 82 | border-radius:.7em; 83 | opacity: 0.9; 84 | box-shadow:0 0 8px #5f7182; 85 | color:#eee 86 | } 87 | #copy a { 88 | color:#ccc; 89 | text-decoration:none 90 | } 91 | #copy a:hover { 92 | color:#fff 93 | } 94 | #ribbon { 95 | position: absolute; 96 | top: 0; 97 | right: 0; 98 | border: 0; 99 | filter: alpha(opacity=80); 100 | -khtml-opacity: .8; 101 | -moz-opacity: .8; 102 | opacity: .8; 103 | } 104 | .contents { 105 | float:left; 106 | margin:0 2em 2em 0; 107 | } 108 | #comments { 109 | clear:both; 110 | } 111 | 112 | -------------------------------------------------------------------------------- /examples/points.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

◄ Leaflet GeoJSON Selector

12 |

Points Example: Italian regions Centroids

13 |
14 |
15 |
16 | 
 
17 | 18 | 19 | 20 | 62 | 63 |
Opengeo.tech •
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | 5 | grunt.loadNpmTasks('grunt-contrib-uglify'); 6 | grunt.loadNpmTasks('grunt-contrib-concat'); 7 | grunt.loadNpmTasks('grunt-contrib-clean'); 8 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 9 | grunt.loadNpmTasks('grunt-contrib-jshint'); 10 | 11 | grunt.initConfig({ 12 | pkg: grunt.file.readJSON('package.json'), 13 | meta: { 14 | banner: 15 | '/* \n'+ 16 | ' * Leaflet GeoJSON Selector v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n'+ 17 | ' * \n'+ 18 | ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> \n'+ 19 | ' * <%= pkg.author.email %> \n'+ 20 | ' * <%= pkg.author.url %> \n'+ 21 | ' * \n'+ 22 | ' * Licensed under the <%= pkg.license %> license. \n'+ 23 | ' * \n'+ 24 | ' * Demo: \n'+ 25 | ' * <%= pkg.homepage %> \n'+ 26 | ' * \n'+ 27 | ' * Source: \n'+ 28 | ' * <%= pkg.repository.url %> \n'+ 29 | ' * \n'+ 30 | ' */\n' 31 | }, 32 | clean: { 33 | dist: { 34 | src: ['dist/*'] 35 | } 36 | }, 37 | jshint: { 38 | options: { 39 | globals: { 40 | console: true, 41 | module: true 42 | }, 43 | "-W099": true, //ignora tabs e space warning 44 | "-W033": true, 45 | "-W044": true //ignore regexp 46 | }, 47 | files: ['src/*.js'] 48 | }, 49 | concat: { 50 | options: { 51 | banner: '<%= meta.banner %>' 52 | }, 53 | dist: { 54 | files: { 55 | 'dist/leaflet-geojson-selector.src.js': ['src/leaflet-geojson-selector.js'], 56 | 'dist/leaflet-geojson-selector.src.css': ['src/leaflet-geojson-selector.css'] 57 | } 58 | } 59 | }, 60 | uglify: { 61 | options: { 62 | banner: '<%= meta.banner %>' 63 | }, 64 | dist: { 65 | files: { 66 | 'dist/leaflet-geojson-selector.min.js': ['dist/leaflet-geojson-selector.src.js'] 67 | } 68 | } 69 | }, 70 | cssmin: { 71 | combine: { 72 | files: { 73 | 'dist/leaflet-geojson-selector.min.css': ['src/leaflet-geojson-selector.css'] 74 | } 75 | }, 76 | options: { 77 | banner: '<%= meta.banner %>' 78 | }, 79 | minify: { 80 | expand: true, 81 | cwd: 'dist/', 82 | files: { 83 | 'dist/leaflet-geojson-selector.min.css': ['src/leaflet-geojson-selector.css'] 84 | } 85 | } 86 | } 87 | }); 88 | 89 | grunt.registerTask('default', [ 90 | 'clean', 91 | 'jshint', 92 | 'concat', 93 | 'uglify', 94 | 'cssmin' 95 | ]); 96 | 97 | }; -------------------------------------------------------------------------------- /examples/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

◄ Leaflet GeoJSON Selector

12 |

Simple Example: Italian regions

13 |
14 | 15 | 16 | 17 | 65 |
Opengeo.tech •
66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/multi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 30 | 31 | 32 | 33 |

◄ Leaflet GeoJSON Selector

34 | 35 |

Simple Example: Italian regions

36 | 37 |
38 |
39 |
40 | 41 | 
 
42 | 43 | 44 | 45 | 46 | 80 | 81 |
Opengeo.tech •
82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/custom-item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

◄ Leaflet GeoJSON Selector

13 | 14 |

Custom Item Example: build cutom item list from geojson properties

15 | 16 |
17 | 18 | 
 
19 | 20 | 21 | 22 | 23 | 71 | 72 |
Opengeo.tech •
73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Leaflet GeoJSON Selector 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Leaflet GeoJSON Selector

12 | 13 |
14 | Leaflet Control for select GeoJSON properties in a interactive menu and map
15 |
16 | 17 |
18 |
19 | Other useful stuff for Web Mapping... 20 |
21 | 22 |
23 | 24 |
25 |

Features

26 | 32 |

Code repositories

33 | Github.com 34 |
35 |
36 | 37 |
38 |

Examples

39 | 44 | 45 |

Website

46 | opengeo.tech/maps/leaflet-geojson-selector 47 |
48 | 49 |

Download

50 | 55 |
56 | 57 | Github 58 | 59 |
60 | For questions and bugs I recommend you to create New Issue on Github repository.
61 | Or to obtain a fast response consult Official Leaflet community forum.
62 |
63 | This is a micro discussion area for methods of implementation.
64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/reload-layer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 34 | 35 | 36 | 37 |

◄ Leaflet GeoJSON Selector

38 | 39 |

Reload Layer Example: reload GeoJSON layer at runtime

40 | 41 |
42 | 43 | 47 | 48 | 
 
49 | 50 | 51 | 52 | 53 | 99 | 100 |
Opengeo.tech •
101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # leaflet-geojson-selector 2 | 3 | [![npm version](https://badge.fury.io/js/leaflet-geojson-selector.svg)](http://badge.fury.io/js/leaflet-geojson-selector) 4 | 5 | Show GeoJSON properties in a interactive menu and map 6 | 7 | Copyright 2016 [Stefano Cudini](https://opengeo.tech/stefano-cudini/) 8 | 9 | If this project helped your work help me to keep this alive by [Paypal **DONATION ❤**](https://www.paypal.me/stefanocudini) 10 | 11 | Tested in Leaflet 0.7.x, 1.3.x 12 | 13 | Licensed under the [MIT](https://opensource.org/licenses/MIT) 14 | 15 | ![Image](https://raw.githubusercontent.com/stefanocudini/leaflet-geojson-selector/master/images/leaflet-geojson-selector.jpg) 16 | 17 | #Where 18 | 19 | **Demo online:** 20 | [opengeo.tech/maps/leaflet-geojson-selector](https://opengeo.tech/maps/leaflet-geojson-selector/) 21 | 22 | **Source code:** 23 | [Github](https://github.com/stefanocudini/leaflet-geojson-selector) 24 | [NPM](https://npmjs.org/package/leaflet-geojson-selector) 25 | 26 | 27 | # Options 28 | | Option | Default | Description | 29 | | --------------------- | ----------------- | ----------------------------------------- | 30 | | collapsed | false | collapse panel list | 31 | | position | 'bottomleft' | position of panel list | 32 | | listLabel | 'properties.name' | GeoJSON property to generate items list | 33 | | listSortBy | 'properties.name' | property to sort items, default is listLabel | 34 | | listItemBuild | null | function list item builder | 35 | | activeListFromLayer | true | highlight of list item on layer hover | 36 | | zoomToLayer | false | | 37 | | listOnlyVisibleLayers | false | show only items visible in map canvas | 38 | | multiple | false | active multiple selection | 39 | | style | {} | style for GeoJSON features | 40 | | activeClass | 'active' | css class name for active list items | 41 | | activeStyle | | style for Active GeoJSON features | 42 | | selectClass | 'selected' | | 43 | | selectStyle | {} | style for Selected GeoJSON features | 44 | 45 | # Events 46 | | Event | Data | Description | 47 | | ---------------------- | ---------------------- | ----------------------------------------- | 48 | | 'selector:change' | {selected, layers} | fired after checked item in list, selected is true if any layer is selected | 49 | 50 | # Methods 51 | | Method | Arguments | Description | 52 | | ------------- | -------------- | ---------------------------- | 53 | | reload() | layer | search text by external code | 54 | 55 | 56 | #Build 57 | 58 | Since Version 1.4.7 this plugin support [Grunt](https://gruntjs.com/) for building process. 59 | Therefore the deployment require [NPM](https://npmjs.org/) installed in your system. 60 | After you've made sure to have npm working, run this in command line: 61 | ```bash 62 | npm install 63 | grunt 64 | ``` 65 | -------------------------------------------------------------------------------- /examples/italy-regions-centroids.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "FeatureCollection", 3 | "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, 4 | 5 | "features": [ 6 | { "type": "Feature", "properties": { "id": 1, "name": "piemonte", "length": 1236869.3688, "area": 25394103941.599998474121094 }, "geometry": { "type": "Point", "coordinates": [ 7.9234934646534, 45.060434510910426 ] } }, 7 | { "type": "Feature", "properties": { "id": 2, "name": "valle d'aosta", "length": 311165.134877, "area": 3259040961.300000190734863 }, "geometry": { "type": "Point", "coordinates": [ 7.387371468698934, 45.729793397029212 ] } }, 8 | { "type": "Feature", "properties": { "id": 3, "name": "lombardia", "length": 1411265.07152, "area": 23862698613.599998474121094 }, "geometry": { "type": "Point", "coordinates": [ 9.76912494384448, 45.620526883113953 ] } }, 9 | { "type": "Feature", "properties": { "id": 4, "name": "trentino-alto adige\/sudtirol", "length": 800534.132495, "area": 13608018378.5 }, "geometry": { "type": "Point", "coordinates": [ 11.281837212264195, 46.441293558688379 ] } }, 10 | { "type": "Feature", "properties": { "id": 5, "name": "veneto", "length": 1057855.9676, "area": 18405499479.400001525878906 }, "geometry": { "type": "Point", "coordinates": [ 11.858635266169282, 45.65135430755187 ] } }, 11 | { "type": "Feature", "properties": { "id": 6, "name": "friuli venezia giulia", "length": 667489.73706, "area": 7864293935.039999961853027 }, "geometry": { "type": "Point", "coordinates": [ 13.055599712004474, 46.151449369525295 ] } }, 12 | { "type": "Feature", "properties": { "id": 7, "name": "liguria", "length": 834224.468035, "area": 5415464956.439999580383301 }, "geometry": { "type": "Point", "coordinates": [ 8.704347679144968, 44.264337389917159 ] } }, 13 | { "type": "Feature", "properties": { "id": 8, "name": "emilia-romagna", "length": 1164723.05925, "area": 22451465521.900001525878906 }, "geometry": { "type": "Point", "coordinates": [ 11.038370070694492, 44.525671872112277 ] } }, 14 | { "type": "Feature", "properties": { "id": 9, "name": "toscana", "length": 1316658.00191, "area": 22984426772.0 }, "geometry": { "type": "Point", "coordinates": [ 11.125968194206569, 43.450596410406227 ] } }, 15 | { "type": "Feature", "properties": { "id": 10, "name": "umbria", "length": 620315.16993, "area": 8464007915.760000228881836 }, "geometry": { "type": "Point", "coordinates": [ 12.489918374340396, 42.965925326044136 ] } }, 16 | { "type": "Feature", "properties": { "id": 11, "name": "marche", "length": 629209.047201, "area": 9401177971.950000762939453 }, "geometry": { "type": "Point", "coordinates": [ 13.137754205689735, 43.348191271410158 ] } }, 17 | { "type": "Feature", "properties": { "id": 12, "name": "lazio", "length": 1055355.14651, "area": 17227617801.299999237060547 }, "geometry": { "type": "Point", "coordinates": [ 12.766418019625052, 41.979508132029359 ] } }, 18 | { "type": "Feature", "properties": { "id": 13, "name": "abruzzo", "length": 614513.705789, "area": 10829102919.5 }, "geometry": { "type": "Point", "coordinates": [ 13.854750624992612, 42.227567318093691 ] } }, 19 | { "type": "Feature", "properties": { "id": 14, "name": "molise", "length": 433874.67797, "area": 4461149496.359999656677246 }, "geometry": { "type": "Point", "coordinates": [ 14.59590002707427, 41.684336774322816 ] } }, 20 | { "type": "Feature", "properties": { "id": 15, "name": "campania", "length": 892379.131913, "area": 13663989800.100000381469727 }, "geometry": { "type": "Point", "coordinates": [ 14.840184741519346, 40.859541713006756 ] } }, 21 | { "type": "Feature", "properties": { "id": 16, "name": "puglia", "length": 1176242.99348, "area": 19537077223.0 }, "geometry": { "type": "Point", "coordinates": [ 16.620151828553368, 40.98457469614506 ] } }, 22 | { "type": "Feature", "properties": { "id": 17, "name": "basilicata", "length": 614219.205497, "area": 10073260222.600000381469727 }, "geometry": { "type": "Point", "coordinates": [ 16.081513086108298, 40.499834506171283 ] } }, 23 | { "type": "Feature", "properties": { "id": 18, "name": "calabria", "length": 838194.35773, "area": 15216683867.799999237060547 }, "geometry": { "type": "Point", "coordinates": [ 16.348024537585715, 39.068175002318881 ] } }, 24 | { "type": "Feature", "properties": { "id": 19, "name": "sicilia", "length": 1339973.64188, "area": 25824775591.400001525878906 }, "geometry": { "type": "Point", "coordinates": [ 14.146974092654165, 37.588434530754036 ] } }, 25 | { "type": "Feature", "properties": { "id": 20, "name": "sardegna", "length": 1460657.08082, "area": 24094165311.900001525878906 }, "geometry": { "type": "Point", "coordinates": [ 9.030305051968869, 40.08804809165639 ] } } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /dist/leaflet-geojson-selector.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Leaflet GeoJSON Selector v0.5.4 - 2018-09-28 3 | * 4 | * Copyright 2018 Stefano Cudini 5 | * stefano.cudini@gmail.com 6 | * https://opengeo.tech/ 7 | * 8 | * Licensed under the MIT license. 9 | * 10 | * Demo: 11 | * https://opengeo.tech/maps/leaflet-geojson-selector/ 12 | * 13 | * Source: 14 | * git@github.com:stefanocudini/leaflet-geojson-selector.git 15 | * 16 | */ 17 | !function(a){if("function"==typeof define&&define.amd)define(["leaflet"],a);else if("undefined"!=typeof module)module.exports=a(require("leaflet"));else{if("undefined"==typeof window.L)throw"Leaflet must be loaded first";a(window.L)}}(function(a){return a.Control.GeoJSONSelector=a.Control.extend({includes:"1"===a.version[0]?a.Evented.prototype:a.Mixin.Events,options:{position:"bottomleft",listLabel:"properties.name",listSortBy:null,listItemBuild:null,activeListFromLayer:!0,activeLayerFromList:!0,zoomToLayer:!1,listOnlyVisibleLayers:!1,multiple:!1,style:{color:"#00f",fillColor:"#08f",fillOpacity:.4,opacity:1,weight:1},activeClass:"active",activeStyle:{color:"#00f",fillColor:"#fc0",fillOpacity:.6,opacity:1,weight:1},selectClass:"selected",selectStyle:{color:"#00f",fillColor:"#f80",fillOpacity:.8,opacity:1,weight:1}},initialize:function(b,c){a.Util.setOptions(this,c||{});this.options.listSortBy=this.options.listSortBy||this.options.listLabel,this.options.listItemBuild&&(this._itemBuild=this.options.listItemBuild),this._layer=b},onAdd:function(b){var c=this;this._container=a.DomUtil.create("div","geojson-list"),this._baseName="geojson-list",this._map=b,this._id=this._baseName+a.stamp(this._container),this._list=a.DomUtil.create("ul","geojson-list-group",this._container),this._layer&&this._map.addLayer(this._layer),this._items=[],a.DomEvent.disableClickPropagation(this._container).disableScrollPropagation(this._container),this.options.listOnlyVisibleLayers&&b.on("moveend",this._updateVisible,this);var d=b.getSize();return c._container.style.height=d.y+"px",c._container.style.maxWidth=d.x/2+"px",c._update(),this._container},onRemove:function(a){a.off("moveend",this._updateVisible,this),this._layer.remove()},reload:function(a){return this._map&&(this._layer&&this._map.removeLayer(this._layer),this._map.addLayer(a),this._layer=a,this._update()),this},_getPath:function(a,b){var c=b.split("."),d=c.pop(),e=c.length,f=c[0],g=1;if(e>0)for(;(a=a[f])&&e>g;)f=c[g++];return a?a[d]:void 0},_itemBuild:function(a){return this._getPath(a.feature,this.options.listLabel)||" "},_selectItem:function(b,c){for(var d=0;de?-1:e>f?1:0});for(var d=0;d 0) 149 | while((obj = obj[cur]) && i < len) 150 | cur = parts[i++]; 151 | 152 | if(obj) 153 | return obj[last]; 154 | }, 155 | 156 | _itemBuild: function(layer) { 157 | 158 | return this._getPath(layer.feature, this.options.listLabel) || ' '; 159 | }, 160 | 161 | _selectItem: function(item, selected) { 162 | 163 | for (var i = 0; i < this._items.length; i++){ 164 | delete this._items[i].selected; 165 | L.DomUtil.removeClass(this._items[i], this.options.selectClass); 166 | } 167 | 168 | if(selected){ 169 | item.selected = selected; 170 | L.DomUtil.addClass(item, this.options.selectClass ); 171 | } 172 | }, 173 | 174 | _selectLayer: function(layer, selected) { 175 | 176 | for(var i = 0; i < this._items.length; i++) 177 | if(this._items[i].layer.setStyle) 178 | this._items[i].layer.setStyle( this.options.style ); 179 | 180 | if(selected && layer.setStyle) 181 | layer.setStyle( this.options.selectStyle ); 182 | }, 183 | 184 | _createItem: function(layer) { 185 | 186 | var self = this, 187 | item = L.DomUtil.create('li','geojson-list-item'), 188 | label = document.createElement('label'), 189 | inputType = this.options.multiple ? 'checkbox' : 'radio', 190 | input = this._createInputElement(inputType, this._id, false), 191 | html = this._itemBuild.call(this, layer); 192 | 193 | label.innerHTML = html; 194 | label.insertBefore(input, label.firstChild); 195 | item.appendChild(label); 196 | 197 | //JOIN list and layers 198 | item.layer = layer; 199 | layer.itemList = item; 200 | layer.itemLabel = label; 201 | 202 | L.DomEvent 203 | //.disableClickPropagation(item) 204 | .on(label, 'click', L.DomEvent.stop, this) 205 | .on(label, 'click', function(e) { 206 | 207 | if(self.options.zoomToLayer) { 208 | self._moveTo(layer); 209 | } 210 | 211 | //TODO move in _moveTo callback 212 | input.checked = !input.checked; 213 | 214 | self._selectItem(item, input.checked); 215 | self._selectLayer(layer, input.checked); 216 | 217 | self.fire('selector:change', { 218 | selected: input.checked, 219 | layers: [layer] 220 | }); 221 | 222 | }, this); 223 | 224 | L.DomEvent 225 | .on(item, 'mouseover', function(e) { 226 | 227 | L.DomUtil.addClass(e.target, this.options.activeClass); 228 | 229 | for (var i = 0; i < self._items.length; i++) 230 | if(!self._items[i]) 231 | self._items[i].layer.setStyle( self.options.activeStyle ); 232 | 233 | if(self.options.activeLayerFromList) 234 | item.layer.fire('mouseover'); 235 | 236 | }, this) 237 | .on(item, 'mouseout', function(e) { 238 | 239 | L.DomUtil.removeClass(e.target, self.options.activeClass); 240 | 241 | for (var i = 0; i < self._items.length; i++) 242 | if(!self._items[i]) 243 | self._items[i].layer.setStyle( self.options.style ); 244 | 245 | if(self.options.activeLayerFromList) 246 | item.layer.fire('mouseout'); 247 | 248 | }, this); 249 | 250 | this._items.push( item ); 251 | 252 | return item; 253 | }, 254 | 255 | // IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe) 256 | _createInputElement: function (type, name, checked) { 257 | 258 | var radioHtml = ' bp) 316 | return 1; 317 | return 0; 318 | }); 319 | } 320 | 321 | for(var i=0; i 0) 165 | while((obj = obj[cur]) && i < len) 166 | cur = parts[i++]; 167 | 168 | if(obj) 169 | return obj[last]; 170 | }, 171 | 172 | _itemBuild: function(layer) { 173 | 174 | return this._getPath(layer.feature, this.options.listLabel) || ' '; 175 | }, 176 | 177 | _selectItem: function(item, selected) { 178 | 179 | for (var i = 0; i < this._items.length; i++){ 180 | delete this._items[i].selected; 181 | L.DomUtil.removeClass(this._items[i], this.options.selectClass); 182 | } 183 | 184 | if(selected){ 185 | item.selected = selected; 186 | L.DomUtil.addClass(item, this.options.selectClass ); 187 | } 188 | }, 189 | 190 | _selectLayer: function(layer, selected) { 191 | 192 | for(var i = 0; i < this._items.length; i++) 193 | if(this._items[i].layer.setStyle) 194 | this._items[i].layer.setStyle( this.options.style ); 195 | 196 | if(selected && layer.setStyle) 197 | layer.setStyle( this.options.selectStyle ); 198 | }, 199 | 200 | _createItem: function(layer) { 201 | 202 | var self = this, 203 | item = L.DomUtil.create('li','geojson-list-item'), 204 | label = document.createElement('label'), 205 | inputType = this.options.multiple ? 'checkbox' : 'radio', 206 | input = this._createInputElement(inputType, this._id, false), 207 | html = this._itemBuild.call(this, layer); 208 | 209 | label.innerHTML = html; 210 | label.insertBefore(input, label.firstChild); 211 | item.appendChild(label); 212 | 213 | //JOIN list and layers 214 | item.layer = layer; 215 | layer.itemList = item; 216 | layer.itemLabel = label; 217 | 218 | L.DomEvent 219 | //.disableClickPropagation(item) 220 | .on(label, 'click', L.DomEvent.stop, this) 221 | .on(label, 'click', function(e) { 222 | 223 | if(self.options.zoomToLayer) { 224 | self._moveTo(layer); 225 | } 226 | 227 | //TODO move in _moveTo callback 228 | input.checked = !input.checked; 229 | 230 | self._selectItem(item, input.checked); 231 | self._selectLayer(layer, input.checked); 232 | 233 | self.fire('selector:change', { 234 | selected: input.checked, 235 | layers: [layer] 236 | }); 237 | 238 | }, this); 239 | 240 | L.DomEvent 241 | .on(item, 'mouseover', function(e) { 242 | 243 | L.DomUtil.addClass(e.target, this.options.activeClass); 244 | 245 | for (var i = 0; i < self._items.length; i++) 246 | if(!self._items[i]) 247 | self._items[i].layer.setStyle( self.options.activeStyle ); 248 | 249 | if(self.options.activeLayerFromList) 250 | item.layer.fire('mouseover'); 251 | 252 | }, this) 253 | .on(item, 'mouseout', function(e) { 254 | 255 | L.DomUtil.removeClass(e.target, self.options.activeClass); 256 | 257 | for (var i = 0; i < self._items.length; i++) 258 | if(!self._items[i]) 259 | self._items[i].layer.setStyle( self.options.style ); 260 | 261 | if(self.options.activeLayerFromList) 262 | item.layer.fire('mouseout'); 263 | 264 | }, this); 265 | 266 | this._items.push( item ); 267 | 268 | return item; 269 | }, 270 | 271 | // IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see https://bit.ly/PqYLBe) 272 | _createInputElement: function (type, name, checked) { 273 | 274 | var radioHtml = ' bp) 332 | return 1; 333 | return 0; 334 | }); 335 | } 336 | 337 | for(var i=0; i 2 | 3 | 4 | 22 | 24 | 31 | 38 | 45 | 54 | 56 | 60 | 64 | 65 | 74 | 76 | 80 | 84 | 85 | 95 | 105 | 115 | 125 | 135 | 145 | 155 | 165 | 175 | 185 | 195 | 205 | 215 | 225 | 235 | 245 | 255 | 265 | 275 | 285 | 295 | 305 | 306 | 324 | 326 | 327 | 329 | image/svg+xml 330 | 332 | 333 | 334 | 335 | 336 | 341 | 348 | 353 | 359 | 364 | 369 | 374 | 379 | 380 | 381 | --------------------------------------------------------------------------------