Last active
October 31, 2025 08:54
-
-
Save ProfAndreaPollini/717c3458811e81f809e556800c17a5ba to your computer and use it in GitHub Desktop.
mappe leaftlet + pocketbase
This file contains hidden or 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
| import "./style.css" | |
| import PocketBase from 'pocketbase'; | |
| const pb = new PocketBase('http://127.0.0.1:8090'); | |
| const resultList = await pb.collection('prova').getList() | |
| console.log(resultList) | |
| const map = L.map('map').setView([51.505, -0.09], 13); | |
| L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 19, | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' | |
| }).addTo(map); | |
| resultList.items.map(item => { | |
| L.popup() | |
| .setLatLng([item.field.lat, item.field.lon]) | |
| .setContent(item.terterter + " " + item.descrizione) | |
| .openOn(map); | |
| }) | |
| function onMapClick(e) { | |
| alert("You clicked the map at " + e.latlng); | |
| pb.collection("prova").create({ | |
| field: { | |
| lat: e.latlng.lat, | |
| lon: e.latlng.lng | |
| }, | |
| descrizione: "test" | |
| }) | |
| } | |
| map.on('click', onMapClick); | |
| pb.collection('prova').subscribe('*', async function (e) { | |
| console.log(e.action); | |
| console.log(e.record); | |
| if (e.action === "create") { | |
| const resultList = await pb.collection('prova').getList() | |
| resultList.items.map(item => { | |
| L.circle([item.field.lat, item.field.lon], { | |
| color: 'red', | |
| fillColor: '#f03', | |
| fillOpacity: 0.5, | |
| radius: 500 | |
| }).addTo(map); | |
| }) | |
| } | |
| }, { /* other options like: filter, expand, custom headers, etc. */ }); |
This file contains hidden or 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
| 1 - creo una collezione in pocketbase | |
| (con un campo geo) | |
| 2 - creo un progetto vitejs con leaflet e | |
| aggiungo il modulo pocketbase | |
| (npm i pocketbase) | |
| 3 - aggiungo elementi alla collezione create | |
| sempre in pocketbase | |
| 4 - visualizzo gli elementi creati nella | |
| mappa di leaftletjs |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment