{"id":15022888,"url":"https://github.com/nycplanning/ember-mapbox-composer","last_synced_at":"2025-10-24T21:30:21.620Z","repository":{"id":57224027,"uuid":"145156749","full_name":"NYCPlanning/ember-mapbox-composer","owner":"NYCPlanning","description":"Ember components and models for large mapping applications","archived":false,"fork":false,"pushed_at":"2023-05-08T16:21:52.000Z","size":2108,"stargazers_count":6,"open_issues_count":13,"forks_count":3,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-09-22T13:02:07.514Z","etag":null,"topics":["ember","framework","mapbox-gl","mapping"],"latest_commit_sha":null,"homepage":"https://nycplanning.github.io/ember-mapbox-composer","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/NYCPlanning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2018-08-17T19:02:21.000Z","updated_at":"2023-10-11T14:30:02.000Z","dependencies_parsed_at":"2024-06-21T19:07:37.995Z","dependency_job_id":"1e9eff38-7e38-4b5a-833b-e8994d5e2603","html_url":"https://github.com/NYCPlanning/ember-mapbox-composer","commit_stats":{"total_commits":172,"total_committers":6,"mean_commits":"28.666666666666668","dds":"0.12209302325581395","last_synced_commit":"19131e6698c2ce787aedb21458152f0906814eba"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NYCPlanning%2Fember-mapbox-composer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NYCPlanning%2Fember-mapbox-composer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NYCPlanning%2Fember-mapbox-composer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NYCPlanning%2Fember-mapbox-composer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NYCPlanning","download_url":"https://codeload.github.com/NYCPlanning/ember-mapbox-composer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867595,"owners_count":16554396,"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","framework","mapbox-gl","mapping"],"created_at":"2024-09-24T19:58:29.546Z","updated_at":"2025-10-24T21:30:16.083Z","avatar_url":"https://github.com/NYCPlanning.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-mapbox-composer\n==============================================================================\n\n# Introduction\n\nMapping applications occupy their own niche within the broader web development ecosystem, and ambitious web maps demand an framework like EmberJS. \n\nMapboxGL, a powerful GL engine for beautiful web maps, and [ember-mapbox-gl](https://github.com/kturney/ember-mapbox-gl), a bindings addon for EmberJS and Mapbox, lay the groundwork for ambitious web mapping applications, but leave gaps in:\n\n1. Layer composition\n2. Complex source management\n3. State and the Single Source of Truth principle\n\nThis addon fills those gaps by providing a few components and models:\n\n - `{{labs-layers}}` (component)\n - `layer-group` (model)\n - `layer` (model)\n - `source` (model)\n \nThese chiefly allow for \"config-driven\" map applications, where \"adding a layer\" to an interactive map with numerous layers is as simple as adding a new entry in a JSON definition. \n\n# Data Schema\n\nThis addon uses an opinionated data schema to allow for layer composition and source management. Generally, layer-groups use the following data scheme:\n\n```\n[\n  // layer group\n  \"id\": \"aerials\",\n  // ...\n  \"layers\": [\n    {\n      // layers\n    }\n  ]\n]\n```\n\nHere's an example of a full JSON response for layer-groups:\n\n\u003cdetails\u003e \n  \u003csummary\u003e Example data structure \u003c/summary\u003e\n\n```\n[\n  {\n    \"id\": \"aerials\",\n    \"title\": \"Aerial Imagery\",\n    \"titleTooltip\": \"Aerial Photos Raster Tiles provided by DoITT GIS\",\n    \"meta\": {\n      \"description\": \"NYC DoITT GIS Aerial Photography Tile Layers (TMS)\",\n      \"url\": [\n        \"https:\\/\\/maps.nyc.gov\\/tiles\\/\"\n      ],\n      \"updated_at\": \"n\\/a\"\n    },\n    \"layerVisibilityType\": \"singleton\",\n    \"layers\": [\n      {\n        \"displayName\": \"2016\",\n        \"style\": {\n          \"id\": \"aerials-2016\",\n          \"layout\": {\n            \"visibility\": \"visible\"\n          },\n          \"source\": \"aerials-2016\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2014\",\n        \"style\": {\n          \"id\": \"aerials-2014\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-2014\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2012\",\n        \"style\": {\n          \"id\": \"aerials-2012\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-2012\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2010\",\n        \"style\": {\n          \"id\": \"aerials-2010\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-2010\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2008\",\n        \"style\": {\n          \"id\": \"aerials-2008\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-2008\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2006\",\n        \"style\": {\n          \"id\": \"aerials-2006\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-2006\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2004\",\n        \"style\": {\n          \"id\": \"aerials-2004\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-2004\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"2001-2\",\n        \"style\": {\n          \"id\": \"aerials-20012\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-20012\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"1996\",\n        \"style\": {\n          \"id\": \"aerials-1996\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-1996\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"1951\",\n        \"style\": {\n          \"id\": \"aerials-1951\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-1951\",\n          \"type\": \"raster\"\n        }\n      },\n      {\n        \"displayName\": \"1924\",\n        \"style\": {\n          \"id\": \"aerials-1924\",\n          \"layout\": {\n            \"visibility\": \"none\"\n          },\n          \"source\": \"aerials-1924\",\n          \"type\": \"raster\"\n        }\n      }\n    ]\n  },\n  {\n    \"id\": \"amendments\",\n    \"title\": \"City Map Alterations\",\n    \"titleTooltip\": \"An index of adopted alterations to the City Map\",\n    \"legendIcon\": \"polygon-stacked\",\n    \"legendColor\": \"rgba(60, 133, 210, 0.4)\",\n    \"visible\": true,\n    \"highlightable\": false,\n    \"meta\": {\n      \"description\": \"NYC Department of City Planning Technical Review Division\",\n      \"updated_at\": \"6 April 2018\"\n    },\n    \"layers\": [\n      {\n        \"style\": {\n          \"id\": \"citymap-amendments-fill\",\n          \"type\": \"fill\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"amendments\",\n          \"paint\": {\n            \"fill-color\": \"rgba(60, 133, 210, 0.2)\"\n          },\n          \"layout\": {\n            \n          }\n        }\n      }\n    ],\n    \"legendConfig\": {\n      \"items\": [\n        {\n          \"type\": \"area\",\n          \"label\": \"City Map Alterations\",\n          \"style\": {\n            \"stroke\": \"none\",\n            \"fill\": \"rgba(60, 133, 210, 0.4)\"\n          }\n        }\n      ]\n    }\n  },\n  {\n    \"id\": \"arterials\",\n    \"title\": \"Arterial Highways \u0026 Major Streets\",\n    \"titleTooltip\": \"Designated rights-of-way shown on the Master Plan of Arterial Highways and Major Streets (not an exact copy).\",\n    \"legendIcon\": \"line\",\n    \"legendColor\": \"rgba(245, 147, 80, 0.6)\",\n    \"visible\": false,\n    \"meta\": {\n      \"description\": \"NYC Department of City Planning Technical Review Division\",\n      \"updated_at\": \"6 April 2018\"\n    },\n    \"layers\": [\n      {\n        \"style\": {\n          \"id\": \"citymap-arterials-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"arterials\",\n          \"paint\": {\n            \"line-color\": \"rgba(245, 147, 80, 0.4)\",\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  1.5\n                ],\n                [\n                  14,\n                  10\n                ]\n              ]\n            }\n          },\n          \"layout\": {\n            \"visibility\": \"visible\"\n          }\n        }\n      }\n    ]\n  },\n  {\n    \"id\": \"citymap\",\n    \"title\": \"Street Lines\",\n    \"legendIcon\": \"\",\n    \"legendColor\": \"\",\n    \"visible\": true,\n    \"meta\": {\n      \"description\": \"NYC Department of City Planning Technical Review Division\",\n      \"updated_at\": \"6 April 2018\"\n    },\n    \"layers\": [\n      {\n        \"style\": {\n          \"id\": \"citymap-mapped-streets-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"citymap\",\n          \"paint\": {\n            \"line-color\": \"rgba(51, 51, 51, 1)\",\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  0.1\n                ],\n                [\n                  13,\n                  1\n                ],\n                [\n                  15,\n                  3\n                ]\n              ]\n            }\n          },\n          \"filter\": [\n            \"all\",\n            [\n              \"==\",\n              \"type\",\n              \"Mapped Street\"\n            ]\n          ]\n        }\n      },\n      {\n        \"tooltipable\": true,\n        \"tooltipTemplate\": \"{{type}}\",\n        \"style\": {\n          \"id\": \"citymap-streets-tooltip-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"citymap\",\n          \"paint\": {\n            \"line-opacity\": 0.001,\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  0.2\n                ],\n                [\n                  13,\n                  2\n                ],\n                [\n                  15,\n                  6\n                ]\n              ]\n            }\n          },\n          \"filter\": [\n            \"any\",\n            [\n              \"==\",\n              \"type\",\n              \"Mapped Street\"\n            ],\n            [\n              \"==\",\n              \"type\",\n              \"Street not mapped\"\n            ],\n            [\n              \"==\",\n              \"type\",\n              \"Record Street\"\n            ]\n          ]\n        }\n      },\n      {\n        \"style\": {\n          \"id\": \"citymap-record-streets-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"citymap\",\n          \"filter\": [\n            \"all\",\n            [\n              \"==\",\n              \"type\",\n              \"Record Street\"\n            ]\n          ],\n          \"paint\": {\n            \"line-color\": \"rgba(51, 51, 51, 1)\",\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  0.1\n                ],\n                [\n                  13,\n                  0.5\n                ],\n                [\n                  15,\n                  2\n                ]\n              ]\n            },\n            \"line-dasharray\": {\n              \"stops\": [\n                [\n                  10,\n                  [\n                    6,\n                    4\n                  ]\n                ],\n                [\n                  15,\n                  [\n                    3,\n                    1\n                  ]\n                ]\n              ]\n            }\n          }\n        }\n      },\n      {\n        \"style\": {\n          \"id\": \"citymap-street-treatments-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"citymap\",\n          \"filter\": [\n            \"all\",\n            [\n              \"==\",\n              \"type\",\n              \"street_treatment\"\n            ]\n          ],\n          \"paint\": {\n            \"line-color\": \"#545454\",\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  0.1\n                ],\n                [\n                  13,\n                  0.25\n                ],\n                [\n                  15,\n                  1\n                ]\n              ]\n            }\n          }\n        }\n      },\n      {\n        \"style\": {\n          \"id\": \"citymap-underpass-tunnel-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"citymap\",\n          \"filter\": [\n            \"all\",\n            [\n              \"==\",\n              \"type\",\n              \"Underpass or Tunnel\"\n            ]\n          ],\n          \"paint\": {\n            \"line-color\": \"rgba(150, 150, 150, 1)\",\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  0.1\n                ],\n                [\n                  13,\n                  0.25\n                ],\n                [\n                  15,\n                  1\n                ]\n              ]\n            },\n            \"line-dasharray\": {\n              \"stops\": [\n                [\n                  10,\n                  [\n                    6,\n                    4\n                  ]\n                ],\n                [\n                  15,\n                  [\n                    10,\n                    6\n                  ]\n                ]\n              ]\n            }\n          }\n        }\n      },\n      {\n        \"style\": {\n          \"id\": \"citymap-street-not-mapped-line\",\n          \"type\": \"line\",\n          \"source\": \"digital-citymap\",\n          \"source-layer\": \"citymap\",\n          \"filter\": [\n            \"all\",\n            [\n              \"==\",\n              \"type\",\n              \"Street not mapped\"\n            ]\n          ],\n          \"paint\": {\n            \"line-color\": \"#AFAFAF\",\n            \"line-width\": {\n              \"stops\": [\n                [\n                  10,\n                  0.1\n                ],\n                [\n                  13,\n                  0.25\n                ],\n                [\n                  15,\n                  2\n                ]\n              ]\n            },\n            \"line-dasharray\": [\n              0,\n              2\n            ]\n          },\n          \"layout\": {\n            \"line-cap\": \"round\"\n          }\n        }\n      }\n    ],\n    \"legendConfig\": {\n      \"label\": \"Street Lines\",\n      \"items\": [\n        {\n          \"type\": \"line\",\n          \"label\": \"Mapped Street\",\n          \"style\": {\n            \"fill\": \"none\",\n            \"stroke\": \"#000\"\n          }\n        },\n        {\n          \"type\": \"line\",\n          \"label\": \"Record Street\",\n          \"style\": {\n            \"fill\": \"none\",\n            \"stroke\": \"#000\",\n            \"stroke-width\": \"1\",\n            \"stroke-dasharray\": \"3, 1.5\"\n          }\n        },\n        {\n          \"type\": \"line\",\n          \"label\": \"Street Treatment\",\n          \"style\": {\n            \"fill\": \"none\",\n            \"stroke\": \"#a1a1a1\",\n            \"stroke-width\": \"0.5\"\n          }\n        },\n        {\n          \"type\": \"line\",\n          \"label\": \"Unmapped Street\",\n          \"style\": {\n            \"fill\": \"none\",\n            \"stroke\": \"#a1a1a1\",\n            \"stroke-width\": \"0.5\",\n            \"stroke-dasharray\": \"1\"\n          }\n        }\n      ]\n    }\n  }\n ]\n  ```\n  \n\u003c/details\u003e\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-mapbox-composer\n```\n\n\nUsage\n------------------------------------------------------------------------------\n\n[Longer description of how to use the addon in apps.]\n\n\nContributing\n------------------------------------------------------------------------------\n\n### Installation\n\n* `git clone \u003crepository-url\u003e`\n* `cd ember-mapbox-composer`\n* `npm install`\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* `npm test` – Runs `ember try:each` to test your addon 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\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnycplanning%2Fember-mapbox-composer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnycplanning%2Fember-mapbox-composer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnycplanning%2Fember-mapbox-composer/lists"}