{"id":13715027,"url":"https://github.com/gohypergiant/MapboxLayer","last_synced_at":"2025-05-07T03:31:07.955Z","repository":{"id":56824533,"uuid":"62817439","full_name":"gohypergiant/MapboxLayer","owner":"gohypergiant","description":"A Framer module for creating powerful Mapbox maps in your prototypes.","archived":false,"fork":false,"pushed_at":"2017-11-02T17:46:14.000Z","size":31,"stargazers_count":20,"open_issues_count":3,"forks_count":0,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-30T15:09:47.302Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","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/gohypergiant.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-07T15:23:46.000Z","updated_at":"2021-07-22T21:24:55.000Z","dependencies_parsed_at":"2022-09-01T09:20:46.402Z","dependency_job_id":null,"html_url":"https://github.com/gohypergiant/MapboxLayer","commit_stats":null,"previous_names":["bpxl-labs/mapboxlayer"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FMapboxLayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FMapboxLayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FMapboxLayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FMapboxLayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gohypergiant","download_url":"https://codeload.github.com/gohypergiant/MapboxLayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782577,"owners_count":21803404,"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-03T00:00:53.148Z","updated_at":"2025-05-07T03:31:07.324Z","avatar_url":"https://github.com/gohypergiant.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# Mapbox Framer Module\n\n[![license](https://img.shields.io/github/license/bpxl-labs/MapboxLayer.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md)\n[![Maintenance](https://img.shields.io/maintenance/yes/2017.svg)]()\n\n\u003ca href=\"https://open.framermodules.com/mapboxlayer\"\u003e\u003cimg alt=\"Install with Framer Modules\" src=\"https://www.framermodules.com/assets/badge@2x.png\" width='160' height='40' /\u003e\u003c/a\u003e\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/935/16820575/7428881a-4917-11e6-9f6b-6938e0b630a1.png\" width=\"497\" \u003e\n\nThe Mapbox module gives you the ability to create powerful Mapbox maps in your prototypes. You have full control over both the Layer that holds the map and the actual map itself via the Mapbox GL JS API.\n\n### Installation\n\n#### NPM Installation\n\n```\n$ cd /your/framer/project\n$ npm i @blackpixel/framer-mapboxlayer --save\n```\n\n#### Manual Installation\n\nFirst you will need to get the Mapbox GL JS library installed to your project via NPM.\n\n```\n$ cd /your/framer/project\n$ npm i mapbox-gl\n```\n\nNext, copy / save the `MapboxLayer.coffee` file into your project's `modules` folder.\n\n### Adding It To Your Project\n\nIn your Framer project add the following:\n\n```coffeescript\n# If you manually installed\nMapboxLayer = require 'MapboxLayer'\n# Else\nMapboxLayer = require '@blackpixel/framer-mapboxlayer'\n\nMapboxLayer.connect('your_mapbox_api_key')\n\nMapContainer = MapboxLayer.create({\n\tcenter: [-122.356568, 47.638699]\n}, {\n\tname: 'MapContainer'\n\twidth: 400\n\theight: 800\n})\n\nMapContainer.centerX()\nMapContainer.rotationX = 15\n```\n\nEach map is generated with a new instance so you can have multiple maps working independently at the same time. You can use `MapContainer.mapbox` to access the instantiated Mapbox map instance.\n\n### API\n\n#### `MapboxLayer.connect(apiKey)`\n\nConnects your Mapbox API key to the Mapbox GL JS library. Also sets up some module specific things like inserting the Mapbox CSS into Framer. This method is required to be called before using the `create` method.\n\n**Arguments**\n\n1. `apiKey` _(String)_: Your Mapbox API key.\n\n#### `MapboxLayer.create(mapOptions, layerOptions)`\n\nCreates a new MapboxLayer.\n\n**Arguments**\n\n1. `mapOptions` _(Object)_: Options to pass directly to Mapbox GL JS ([See here for full options list](https://www.mapbox.com/mapbox-gl-js/api/#Map)).\n2. `layerOptions` _(Object)_: Options to pass to a new Framer Layer ([See here for full options list](http://framerjs.com/docs/#layer.layer)).\n\n**Returns**\n\n`Layer` _(Object)_: The newly instantiated Framer Layer. The Mapbox instance is attached to the Layer as the property `mapbox`.\n\n### Tips\n\n**1. Making a non-interactive map**\n```javascript\nMapContainer = MapboxLayer.create({\n\tcenter: [-122.356568, 47.638699]\n\tinteractive: false\n}, {\n\tname: 'MapContainer'\n\twidth: 400\n\theight: 800\n})\n```\n\n**2. Show Mapbox Attribution**\n```javascript\nMapContainer = MapboxLayer.create({\n\tcenter: [-122.356568, 47.638699]\n\tattributionControl: true\n}, {\n\tname: 'MapContainer'\n\twidth: 400\n\theight: 800\n})\n```\n\n### Example project\n[Download](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/bpxl-labs/MapboxLayer/tree/master/example.framer) the example to try it for yourself.\n\n---\n\nWebsite: [blackpixel.com](https://blackpixel.com) \u0026nbsp;\u0026middot;\u0026nbsp;\nGitHub: [@bpxl-labs](https://github.com/bpxl-labs/) \u0026nbsp;\u0026middot;\u0026nbsp;\nTwitter: [@blackpixel](https://twitter.com/blackpixel) \u0026nbsp;\u0026middot;\u0026nbsp;\nMedium: [@bpxl-craft](https://medium.com/bpxl-craft)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgohypergiant%2FMapboxLayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgohypergiant%2FMapboxLayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgohypergiant%2FMapboxLayer/lists"}