{"id":13582811,"url":"https://github.com/ATran31/Leaflet-GeoSSE","last_synced_at":"2025-04-06T17:32:24.205Z","repository":{"id":153372196,"uuid":"173538057","full_name":"ATran31/Leaflet-GeoSSE","owner":"ATran31","description":"Leaflet plugin to handle real-time data updates using server sent events.","archived":false,"fork":false,"pushed_at":"2024-04-13T18:38:45.000Z","size":51,"stargazers_count":10,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T04:48:57.850Z","etag":null,"topics":["leaflet-plugin","server-sent-events"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ATran31.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-03-03T06:12:01.000Z","updated_at":"2024-04-18T02:41:32.295Z","dependencies_parsed_at":"2024-04-18T02:41:22.363Z","dependency_job_id":null,"html_url":"https://github.com/ATran31/Leaflet-GeoSSE","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATran31%2FLeaflet-GeoSSE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATran31%2FLeaflet-GeoSSE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATran31%2FLeaflet-GeoSSE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ATran31%2FLeaflet-GeoSSE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ATran31","download_url":"https://codeload.github.com/ATran31/Leaflet-GeoSSE/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522645,"owners_count":20952594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet-plugin","server-sent-events"],"created_at":"2024-08-01T15:03:02.749Z","updated_at":"2025-04-06T17:32:19.194Z","avatar_url":"https://github.com/ATran31.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Leaflet GeoSSE\n\nA Leaflet plugin to enable real-time data updates using [server sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events).\n\n## Events\n\nThe events published by the server must have a valid geojson feature in the `data` field.\n\nThe geojson feature's properties must include a field that uniquely identifies the feature. This identifier is used to facilitate replacement of the current feature with its updated instance when the server sends an update event.\n\n### Example event from server\n\n```json\n{\n  \"data\": {\n    \"type\": \"Feature\",\n    \"geometry\": {\n      \"type\": \"Point\",\n      \"coordinates\": [125.6, 10.1]\n    },\n    \"id\": 1,\n    \"properties\": {\n      \"name\": \"My Feature\"\n    }\n  }\n}\n```\n\n## Usage\n\nAdd the file to your map HTML head tag below LeafletJS.\n\n```html\n\u003c!-- Insert below LeafletJs --\u003e\n\u003cscript\n  type=\"text/javascript\"\n  src=\"https://www.unpkg.com/browse/leaflet-geosse@1.0.1/dist/Leaflet.GeoSSE.min.js\"\n\u003e\u003c/script\u003e\n```\n\n### Initializing\n\nInitialize same as any `L.geoJson` instance. You must pass in a `streamUrl` and optional `featureIdField` to identify the event source and individual features respectively.\n\nInitialize an empty layer when you don't care about history and only want to monitor events that are created after establishing connection to event stream.\n\n```js\nvar sseLyr = L.geoSSE(null, {\n  streamUrl: \"https://my-site.com/stream\",\n  // set other layer options...\n});\n```\n\nAlternatively you can initialize with some existing data when you want to establish the initial state by loading previously created features on connection to event stream.\n\n```js\nvar sseLyr = L.geoSSE('my-data.geojson', {\n    streamUrl: 'https://my-site.com/stream'\n    // set other layer options...\n});\n```\n\n### Connecting To The Event Stream\n\n```js\n// Connect to an event stream.\nsseLyr.connectToEventStream();\n```\n\n### Standard Event Types\n\nWhen a successful connection is established, by default the layer listens for the following types of events:\n\n- Add event\n  \u003e When an `add` event is received from the server, the feature is added or updated.\n- Remove event\n  \u003e When a `remove` event is received from the server, the feature is removed.\n\n#### Deprecated Event Types\n\n- Create event\n  \u003e When a `create` event is received from the server, the feature is added.\n- Update event\n  \u003e When an `update` event is received from the server, the feature is replaced. Update events are sent after any change to one or more feature properties.\n- Delete event\n  \u003e When a `delete` event is received from the server, the feature is removed. Alias of `remove` event.\n\n### Other Event Types\n\nIn addition to standard events, you can configure your event server to return any other type of events. For example, if your server will be sending `crash` events you can monitor and handle that event by attaching an event listener.\n\n```js\n// Listen for crash event and log data to console.\nsseLyr.eventSource.addEventListener(\n  \"crash\",\n  function crashEvent(event) {\n    console.log(event.data);\n  },\n  false\n);\n```\n\n### Stop Monitoring A Specific Event Type\n\nThis will only stop monitoring the `crash` event. Note the second and third arguments to `removeEventListener` must match the listener function name and `useCapture` boolean that was entered in the `addEventListener` call above.\n\n```js\n// Stop listening for crash events.\nsseLyr.eventSource.removeEventListener(\"crash\", crashEvent, false);\n```\n\n### Stop Monitoring All Events\n\nDisconnect from the source to stop listening to all events and close the connection to the server.\n\n```js\nsseLyr.disconnect();\n```\n\n### Switch to Another Stream\n\nSwitching streams just involves passing in a new stream url and unique id field to `switchStream()`.\n\n```js\nsseLyr.switchStream(\"https://some-other/stream\", \"otherFieldId\");\n```\n\nIf you want to remove all currently displayed features in your layer when switching streams simply add a boolean of `true` as the third argument. By default, all features that were loaded by the old stream will remain after connecting to the new stream.\n\n```js\nsseLyr.switchStream(\"https://some-other/stream\", \"otherFieldId\", true);\n```\n\n# Working Example\n\nTo see the working example of this plugin locally\n\n```bash\n# install dependencies if needed\nnpm install -w examples\n\nnpm run dev -w examples\n```\n\nAn example map will be available at `localhost:3000` where you can see point features being created, updated and deleted.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FATran31%2FLeaflet-GeoSSE","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FATran31%2FLeaflet-GeoSSE","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FATran31%2FLeaflet-GeoSSE/lists"}