{"id":13628042,"url":"https://erikvullings.github.io/mithril-leaflet/","last_synced_at":"2025-04-17T00:33:11.765Z","repository":{"id":57298433,"uuid":"176583676","full_name":"erikvullings/mithril-leaflet","owner":"erikvullings","description":"A map component, based on leaflet, for the Mithril framework.","archived":false,"fork":false,"pushed_at":"2023-10-16T17:50:27.000Z","size":9385,"stargazers_count":4,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T00:36:31.303Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://erikvullings.github.io/mithril-leaflet","language":"TypeScript","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/erikvullings.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,"publiccode":null,"codemeta":null}},"created_at":"2019-03-19T19:23:35.000Z","updated_at":"2023-01-14T14:19:23.000Z","dependencies_parsed_at":"2024-08-01T22:52:04.500Z","dependency_job_id":null,"html_url":"https://github.com/erikvullings/mithril-leaflet","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/erikvullings%2Fmithril-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikvullings","download_url":"https://codeload.github.com/erikvullings/mithril-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223472811,"owners_count":17150745,"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":[],"created_at":"2024-08-01T22:00:43.620Z","updated_at":"2024-11-08T18:31:18.203Z","avatar_url":"https://github.com/erikvullings.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# mithril-leaflet\n\nThis library offers a `LeafletMap` component for the [mithril](https://mithril.js.org) framework, which combines [leaflet](http://leafletjs.com) for displaying maps, and [leaflet-draw](http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html) for editing overlays (see the [demo](https://erikvullings.github.io/mithril-leaflet/)).\n\n![screenshot](https://github.com/erikvullings/mithril-leaflet/blob/master/img/screenshot.png?raw=true)\n\nWhen editing, the last selected editable layer can be edited. So if you have multiple overlays, each of which can be edited, only the one you selected last can be changed. During editing, the same limitations apply as mentioned in [leaflet-draw](http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html): markers can be moved, polylines and lines can be edited. There is no editing support, however, for multi-lines and multi-polygons.\n\nWhen multiple overlays are present, a layer control is shown. You can also enable the scale control, optionally choosing between metric, imperial or both.\n\nYou can check out the API documentation [here](https://erikvullings.github.io/mithril-leaflet/typedoc/index.html) or review the [example source code](https://github.com/erikvullings/mithril-leaflet/blob/master/packages/example/src/components/home/home-page.ts).\n\n## Installation\n\nFirst, you need to install the required packages: note that this library does not contain `leaflet`, or `leaflet-draw`, so you need to install them yourself. It has been tested against `leaflet` v1.4.\n\n```bash\nnpm i mithril leaflet leaflet-draw mithril-leaflet\n# Also install the typings if you use TypeScript\nnpm i --save-dev @types/leaflet @types/leaflet-draw @types/geojson @types/mithril\n```\n\n## Usage\n\nNow you can use it in your [mithril](https://mithril.js.org) code.\n\n```ts\nimport { LeafletMap } from 'mithril-leaflet';\nimport { Feature, Geometry } from 'geojson';\nimport { LatLngExpression, FeatureGroup, LeafletEvent, geoJSON } from 'leaflet'\n\n...\nm(LeafletMap, {\n  style: 'height: 400px; margin-top: 20px;',\n  view: [51.505, -0.09] as LatLngExpression,\n  zoom: 13,\n  // overlays,\n  // visible,\n  editable: ['test', 'pois'],\n  onMapClicked: console.log,\n  showScale: { imperial: false },\n  onLayerEdited: (f: FeatureGroup) =\u003e console.log(JSON.stringify(f.toGeoJSON(), null, 2)),\n  onLoadedOverlaysChanged: (v: string[]) =\u003e (state.visible = v),\n})\n```\n\n## Build instructions\n\n```bash\npnpm m i # You can also use `npm i`, but I prefer [pnpm](https://pnpm.js.org).\nnpm start # during development\nnpm run build:domain # for deploying it to GitHub\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/erikvullings.github.io%2Fmithril-leaflet%2F","html_url":"https://awesome.ecosyste.ms/projects/erikvullings.github.io%2Fmithril-leaflet%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/erikvullings.github.io%2Fmithril-leaflet%2F/lists"}