{"id":21670436,"url":"https://github.com/truemagic-coder/meteor-leaflet","last_synced_at":"2025-04-12T02:39:25.937Z","repository":{"id":5238276,"uuid":"6415430","full_name":"truemagic-coder/meteor-leaflet","owner":"truemagic-coder","description":"Leaflet.js for Meteor.js ","archived":false,"fork":false,"pushed_at":"2018-12-13T05:56:08.000Z","size":257,"stargazers_count":86,"open_issues_count":0,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T02:39:22.194Z","etag":null,"topics":["leaflet","meteor","meteor-leaflet"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"CyanogenMod/android_frameworks_native","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/truemagic-coder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-10-27T09:16:41.000Z","updated_at":"2023-11-22T16:47:35.000Z","dependencies_parsed_at":"2022-09-07T01:40:16.936Z","dependency_job_id":null,"html_url":"https://github.com/truemagic-coder/meteor-leaflet","commit_stats":null,"previous_names":["truemagic-coder/meteor-leaflet"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truemagic-coder%2Fmeteor-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truemagic-coder%2Fmeteor-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truemagic-coder%2Fmeteor-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/truemagic-coder%2Fmeteor-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/truemagic-coder","download_url":"https://codeload.github.com/truemagic-coder/meteor-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248507329,"owners_count":21115576,"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","meteor","meteor-leaflet"],"created_at":"2024-11-25T12:32:12.827Z","updated_at":"2025-04-12T02:39:25.911Z","avatar_url":"https://github.com/truemagic-coder.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet for Meteor\n\n## Purpose\n\nTo provide a Meteor package to quickly build real-time cross-platform map apps.\n\n## Meteor Package\n- [bevanhunt:meteor-leaflet](https://atmospherejs.com/bevanhunt/leaflet)\n\n## Demo\nMeteor Leafet Demo  |  [GitHub](https://github.com/bevanhunt/meteor-leaflet-demo)\n\n## Packaged Libraries\n- [Leaflet: 1.3.4](https://www.npmjs.com/package/leaflet)\n- [Leaflet Providers: 1.5.0](https://www.npmjs.com/package/leaflet-providers)\n- [Leaflet MarkerCluster: 1.4.1](https://www.npmjs.com/package/leaflet.markercluster)\n- [Leaflet Spin: 1.1.0](https://www.npmjs.com/package/leaflet-spin)\n- [Spin.js: 2.3.2](https://www.npmjs.com/package/spin.js)\n\n## Roadmap\n[Roadmap](https://github.com/bevanhunt/meteor-leaflet/milestones)\n\n## Usage\n- add this package to your Meteor project\n\n  ```bash\n    meteor add bevanhunt:leaflet\n  ```\n\n- add a map div to html\n\n  ```html\n    \u003cdiv id='map'\u003e\u003c/div\u003e\n  ```\n\n- add a style for map to css\n\n  ```css\n    #map {\n      min-height: 350px;\n      min-width: 100%;\n    }\n  ```\n\n- in Javascript client-side code define Leaflet map with default image path\n\n  ```javascript\n    if (Meteor.isClient) {\n      L.Icon.Default.imagePath = '/packages/bevanhunt_leaflet/images/';\n      var map = L.map('map');\n    }\n  ```\n\n- in Javascript client-side code use a free tile provider [optional] - [View Map Choices](http://leaflet-extras.github.io/leaflet-providers/preview/)\n\n  ```javascript\n    if (Meteor.isClient) {\n      L.tileLayer.provider('Stamen.Watercolor').addTo(map);\n    }\n  ```\n\n- in Javascript client-side code use Leaflet Spin [optional]\n\n  - to start the loading spinner\n    ```javascript\n      if (Meteor.isClient) {\n        map.spin(true);\n      }\n    ```\n\n  - to stop the loading spinner\n    ```javascript\n      if (Meteor.isClient) {\n        map.spin(false);\n      }\n    ```\n\n## Reactive Popups\n\n- in Javascript client-side to create Reactive Popups - more [info on Blaze.renderWithData](http://docs.meteor.com/#/full/blaze_renderwithdata).\n\n  ```javascript\n    if (Meteor.isClient) {\n      // add marker to map\n      var marker = L.marker([50.5, 30.5]).addTo(map);\n      // wrapping node for bindPopup\n      var containerNode = document.createElement('div');\n      // Which template to use for the popup? Some data for it, and attach it to node\n      Blaze.renderWithData(Template.popup, dataContext, containerNode);\n      // Finally bind the containerNode to the popup\n      marker.bindPopup(containerNode).openPopup();\n    }\n  ```\n\n## GeoJSON\n\n### From Arrays\n* [meteor-leaflet-demo geojson branch](https://github.com/bevanhunt/meteor-leaflet-demo/tree/geojson) is an example array conversion app using the [geojson npm package](https://www.npmjs.com/package/geojson).\n\n### From KML/GPX\n* [meteor-leaflet-demo KML branch](https://github.com/bevanhunt/meteor-leaflet-demo/tree/kml) is a example KML conversion app using the [togeojson npm package](https://www.npmjs.com/package/togeojson).\n\n### From other Formats\n* [Orge Web Service](http://ogre.adc4gis.com/) can be used for straight conversion.\n\n## Featured Blog Posts\n\n* [GeoSpatital Indexing in Meteor](http://joshowens.me/using-mongodb-geospatial-index-with-meteor-js/)\n\n* [RealTime Maps in Meteor](http://asynchrotron.com/blog/2013/12/27/realtime-maps-with-meteor-and-leaflet/) - use bevanhunt:leaflet not mrt:leaflet\n\n* [Animate with D3 and Leaflet](http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/) (not Meteor specific)\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruemagic-coder%2Fmeteor-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftruemagic-coder%2Fmeteor-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftruemagic-coder%2Fmeteor-leaflet/lists"}