{"id":15015825,"url":"https://github.com/miguelcobain/ember-leaflet","last_synced_at":"2025-05-16T17:06:43.554Z","repository":{"id":2371657,"uuid":"43352523","full_name":"miguelcobain/ember-leaflet","owner":"miguelcobain","description":":fire: :leaves: Easy and declarative mapping for ember","archived":false,"fork":false,"pushed_at":"2024-04-29T19:48:06.000Z","size":23498,"stargazers_count":210,"open_issues_count":22,"forks_count":87,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-12T15:58:22.452Z","etag":null,"topics":["ember","ember-leaflet","leaflet","maps"],"latest_commit_sha":null,"homepage":"https://miguelcobain.github.io/ember-leaflet/","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/miguelcobain.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2015-09-29T07:43:23.000Z","updated_at":"2024-07-14T19:26:53.000Z","dependencies_parsed_at":"2024-04-11T15:25:17.084Z","dependency_job_id":"cee2bb1b-0f5f-4cbf-bc27-bc72b0d98064","html_url":"https://github.com/miguelcobain/ember-leaflet","commit_stats":{"total_commits":485,"total_committers":53,"mean_commits":9.150943396226415,"dds":"0.23505154639175263","last_synced_commit":"aa6611808ba1702cbf5ee3b3f2180507885c2228"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miguelcobain","download_url":"https://codeload.github.com/miguelcobain/ember-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254564127,"owners_count":22092122,"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":["ember","ember-leaflet","leaflet","maps"],"created_at":"2024-09-24T19:48:00.494Z","updated_at":"2025-05-16T17:06:43.502Z","avatar_url":"https://github.com/miguelcobain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-leaflet [![CI](https://github.com/miguelcobain/ember-leaflet/workflows/CI/badge.svg)](https://github.com/miguelcobain/ember-leaflet/actions?query=workflow%3ACI) [![Ember Observer Score](http://emberobserver.com/badges/ember-leaflet.svg)](http://emberobserver.com/addons/ember-leaflet) [![npm version](https://badge.fury.io/js/ember-leaflet.svg)](https://badge.fury.io/js/ember-leaflet)\n\nEmber-Leaflet aims to make working with Leaflet layers in your Ember app as easy, declarative and composable as templates make working with DOM.\n\n## Installation\n\nEmber Leaflet works in Ember 3.16+ with no deprecations.\n\nTo install it run:\n\n```\nember install ember-leaflet\n```\n\nThis will also add the `leaflet` package to your project.\n\nember-leaflet is compatible with leaflet 0.7+. If you need to use a legacy version, you can just install it via npm / yarn:\n\n```\nnpm install --save-dev leaflet@0.7\nyarn add -D leaflet@0.7\n```\n\n## Support, Questions, Collaboration\n\n![Discord](https://img.shields.io/discord/480462759797063690.svg?logo=discord) Join Ember on [Discord](https://discord.gg/zT3asNS)\n\n## Usage\n\nDocumentation and examples are hosted at [https://miguelcobain.github.io/ember-leaflet/](https://miguelcobain.github.io/ember-leaflet/).\nPlease file any issues if you see that something can be improved.\n\n#### Production Builds\n\nIn your `ember-cli-build.js` add the following snippet:\n\n```js\nlet app = new EmberApp(defaults, {\n  // Add options here\n  fingerprint: {\n    exclude: [\n      'images/layers-2x.png',\n      'images/layers.png',\n      'images/marker-icon-2x.png',\n      'images/marker-icon.png',\n      'images/marker-shadow.png'\n    ]\n  }\n});\n```\n\nember-cli does fingerprinting (appending an md5 checksum to the end of every file) for production builds by default (http://ember-cli.com/user-guide/#fingerprinting-and-cdn-urls). Exclude the leaflet assets so that your production build produces them correctly.\n\n## Overview\n\nWeb apps frequently need to display geographic data, especially if it has a direct relationship with the real world. That isn't new, and has been done previously in all kinds of formats, particularly with raster and vector data.\n\nEmber apps naturally may have the same requirements and until now, devs have been either using mapping libraries outside of ember scope, or using previous versions of ember-leaflet.\n\nThe problem was that both approaches were hard. Frequently existing libraries have regular javascript imperative APIs and html in mind. We all know and love how ember makes us flow the data in our app. Previous approaches simply didn't fit where ember really shines: templates, actions, routing, and above all, expressiveness.\n\n**Ember-leaflet allows you to express your maps right in your templates.** Also, it is streamlined for ember in general. You have things like actions, components and the ability to use regular handlebars helpers like `{{#if` or `{{#each`.\n\nWe can't go wrong with delegating the mapping part to the battle tested, performant and lightweight [Leaflet](http://leafletjs.com/) library.\n\nSo, let the mapping begin.\n\n## Examples\n\nThink of your map as a set of layers inside a container. Your main container will be the `\u003cLeafletMap\u003e` component. This component creates the map container where your tiles, vectors and markers will be added to. Let's see an example of how it looks:\n\n```hbs\n\u003cLeafletMap @lat={{this.lat}} @lng={{this.lng}} @zoom={{this.zoom}} as |layers|\u003e\n\n  \u003clayers.tile @url=\"http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png\" /\u003e\n\n  \u003clayers.marker @location={{this.emberConfLocation}} as |marker|\u003e\n    \u003cmarker.popup\u003e\n      \u003ch3\u003eThe Oregon Convention Center\u003c/h3\u003e\n      777 NE Martin Luther King Jr Blvd\u003cbr\u003e\n      Portland, OR 97232\n    \u003c/marker.popup\u003e\n  \u003c/layers.marker\u003e\n\n  \u003clayers.marker @location={{this.hotel}} as |marker|\u003e\n    \u003cmarker.popup\u003e\n      \u003ch3\u003eHotel\u003c/h3\u003e\n    \u003c/marker.popup\u003e\n  \u003c/layers.marker\u003e\n\n\u003c/LeafletMap\u003e\n```\n\n### Linting\n\n- `npm run lint:js`\n- `npm run lint:js -- --fix`\n\n### Running tests\n\n- `ember test` – Runs the test suite on the current Ember version\n- `ember test --server` – Runs the test suite in \"watch mode\"\n- `ember try:each` – Runs the test suite against multiple Ember versions\n\n### Running the dummy application\n\n- `ember serve`\n- Visit the dummy application at [http://localhost:4200](http://localhost:4200).\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelcobain%2Fember-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiguelcobain%2Fember-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelcobain%2Fember-leaflet/lists"}