Created
January 21, 2022 22:20
-
-
Save punkish/db9146aca109b8f625c0bc9aba25d962 to your computer and use it in GitHub Desktop.
Leaflet multipoint geojson
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"> | |
| <style> | |
| #map { height: 500px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> | |
| <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script> | |
| <script> | |
| const geojsonFeature = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "MultiPoint", | |
| "coordinates": [ | |
| [ 14.5041, 46.0434 ], | |
| [ 14.5367, 45.8631 ] | |
| ] | |
| }, | |
| "properties": { | |
| "fid": "fid0", | |
| "other": [ | |
| { "color": "blue" }, | |
| { "color": "red" } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "MultiPoint", | |
| "coordinates": [ | |
| [ 15.5041, 44.0434 ], | |
| [ 15.5367, 43.8631 ] | |
| ] | |
| }, | |
| "properties": { | |
| "fid": "fid1", | |
| "other": [ | |
| { "color": "mauve" }, | |
| { "color": "pink" } | |
| ] | |
| } | |
| } | |
| ] | |
| }; | |
| const map = L.map('map').setView([45, 15], 7); | |
| const basemap = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', | |
| subdomains: ['a','b','c'] | |
| }).addTo(map); | |
| map.on('click', (e) => { | |
| if (selectedMarkers.length) { | |
| selectedMarkers.forEach(m => m.setIcon(iconNormal)); | |
| } | |
| selectedMarkers.length = 0; | |
| }) | |
| const iconNormal = L.divIcon({ | |
| //iconUrl : '/img/treatment.svg', | |
| html: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="24" height="24" viewBox="0, 0, 24, 24"> | |
| <g id="Layer_1"> | |
| <g> | |
| <path d="M12.625,23.688 C6.55,23.688 1.625,18.763 1.625,12.688 C1.625,6.612 6.55,1.688 12.625,1.688 C18.7,1.688 23.625,6.612 23.625,12.688 C23.625,18.763 18.7,23.688 12.625,23.688 z" fill-opacity="0" stroke="#000000" stroke-width="1"/> | |
| </g> | |
| <g> | |
| <path d="M12.625,21.688 C7.654,21.688 3.625,17.658 3.625,12.688 C3.625,7.717 7.654,3.688 12.625,3.688 C17.596,3.688 21.625,7.717 21.625,12.688 C21.625,17.658 17.596,21.688 12.625,21.688 z" fill="#38C400"/> | |
| </g> | |
| </g> | |
| </svg>`, | |
| iconSize: [24, 24], | |
| iconAnchor: [12, 12] | |
| }); | |
| const iconHighlighted = L.divIcon({ | |
| //iconUrl : '/img/treatment-highlighted.svg', | |
| html: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="24" height="24" viewBox="0, 0, 24, 24"> | |
| <g id="Layer_1"> | |
| <g> | |
| <path d="M12.625,23.688 C6.55,23.688 1.625,18.763 1.625,12.688 C1.625,6.612 6.55,1.688 12.625,1.688 C18.7,1.688 23.625,6.612 23.625,12.688 C23.625,18.763 18.7,23.688 12.625,23.688 z" fill-opacity="0" stroke="#000000" stroke-width="1"/> | |
| </g> | |
| <g> | |
| <path d="M12.625,21.688 C7.654,21.688 3.625,17.658 3.625,12.688 C3.625,7.717 7.654,3.688 12.625,3.688 C17.596,3.688 21.625,7.717 21.625,12.688 C21.625,17.658 17.596,21.688 12.625,21.688 z" fill="#EE0000"/> | |
| <g> | |
| <path d="M12.625,21.688 C7.654,21.688 3.625,17.658 3.625,12.688 C3.625,7.717 7.654,3.688 12.625,3.688 C17.596,3.688 21.625,7.717 21.625,12.688 C21.625,17.658 17.596,21.688 12.625,21.688 z" fill="#EE0000"/> | |
| </g> | |
| </g> | |
| </g> | |
| </svg>`, | |
| iconSize: [24, 24], | |
| iconAnchor: [12, 12] | |
| }); | |
| const allMarkers = {}; | |
| const selectedMarkers = []; | |
| const popup = (gp) => { | |
| return () => { | |
| const thisFid = gp.properties.fid; | |
| const html = `<h4 class="popup">fid: ${thisFid}</h4>`; | |
| const el = document.createElement('div'); | |
| el.innerHTML = html; | |
| return el; | |
| } | |
| } | |
| const click = (gp) => { | |
| return { | |
| click: (e) => { | |
| const m = e.target; | |
| const thisFid = gp.properties.fid; | |
| for (let [key, val] of Object.entries(allMarkers)) { | |
| if (key === thisFid) { | |
| selectedMarkers.push(...val); | |
| } | |
| } | |
| selectedMarkers.forEach(m => m.setIcon(iconHighlighted)); | |
| } | |
| } | |
| } | |
| const multipoints = L.geoJSON(geojsonFeature, { | |
| pointToLayer: (gp, latlng) => { | |
| const marker = L.marker(latlng, { icon: iconNormal }); | |
| marker.bindPopup(popup(gp)); | |
| marker.on(click(gp)); | |
| const fid = gp.properties.fid; | |
| if (fid in allMarkers) { | |
| allMarkers[fid].push(marker); | |
| } | |
| else { | |
| allMarkers[fid] = [marker]; | |
| } | |
| return marker; | |
| } | |
| }); | |
| multipoints.addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment