{"id":24658553,"url":"https://github.com/cedarstudios/cedarmaps-web-sdk-vector","last_synced_at":"2025-08-27T11:05:39.951Z","repository":{"id":44143889,"uuid":"185339082","full_name":"cedarstudios/cedarmaps-web-sdk-vector","owner":"cedarstudios","description":"CedarMaps' Javascript SDK for vector tiles","archived":false,"fork":false,"pushed_at":"2023-01-13T23:17:28.000Z","size":804,"stargazers_count":3,"open_issues_count":10,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-26T01:37:59.254Z","etag":null,"topics":["cedarmaps","iran","iran-map","map","sdk-js"],"latest_commit_sha":null,"homepage":"https://www.cedarmaps.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cedarstudios.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-05-07T06:47:58.000Z","updated_at":"2024-10-15T07:20:31.000Z","dependencies_parsed_at":"2023-02-09T17:30:30.066Z","dependency_job_id":null,"html_url":"https://github.com/cedarstudios/cedarmaps-web-sdk-vector","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedarstudios%2Fcedarmaps-web-sdk-vector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedarstudios%2Fcedarmaps-web-sdk-vector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedarstudios%2Fcedarmaps-web-sdk-vector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cedarstudios%2Fcedarmaps-web-sdk-vector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cedarstudios","download_url":"https://codeload.github.com/cedarstudios/cedarmaps-web-sdk-vector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244739960,"owners_count":20501992,"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":["cedarmaps","iran","iran-map","map","sdk-js"],"created_at":"2025-01-26T01:38:01.441Z","updated_at":"2025-03-21T05:12:58.801Z","avatar_url":"https://github.com/cedarstudios.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cedarmaps Web SDK Vector\n![CedarMaps vector tiles](https://github.com/cedarstudios/cedarstudios.github.io/raw/master/cedarmaps-web-sdk-vector.gif)\n\n\nCedarMaps GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles. Built on top of [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js).\n\n**Note:** This repo is for \"vector tiles\". If you prefer to use our \"raster tiles\" please check out our [Web SDK Raster](https://github.com/cedarstudios/cedarmaps-web-sdk-raster) repository.\n\n# Table of Contents\n- [Basic usage via CDN](#basic-usage-via-cdn)\n- [Map Themes](#map-themes)\n- [Checking out demo files](#checking-out-demo-files)\n- [Building SDK locally](#building-sdk-locally)\n- [Pulling new changes from repo](#pulling-new-changes-from-repo)\n- [API](#api)\n- [Cedar Maps Services](#cedar-maps-services)\n\n# Basic usage via CDN\n1. Get an access token from [Cedar Maps website](https://www.cedarmaps.com/) (Menu link: \"درخواست اکانت رایگان\"). It may take a couple of hours until your request is processed and your credentials are emailed to you.\n2. Include these CSS and JavaScript files in `\u003chead\u003e` section of your HTML file.\n```html\n\u003cscript src='https://api.cedarmaps.com/cedarmaps-gl.js/v2.2.0/cedarmaps-gl.js'\u003e\u003c/script\u003e\n\u003clink href='https://api.cedarmaps.com/cedarmaps-gl.js/v2.2.0/cedarmaps-gl.css' rel='stylesheet'/\u003e\n```\n3. Put the following code in the `\u003cbody\u003e` section of your HTML file **After replacing 'YOUR_ACCESS_TOKEN' on line 5**:\n```html\n\u003cdiv id='map' style='width: 800px; height: 600px;'\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n    // In order to use Cedar Maps you **MUST** have an access token\n\tvar map = cedarmapsgl.map('YOUR_ACCESS_TOKEN', {\n        style: 'style://streets-light', // Other available style: 'style://streets-dark'\n        container: 'map',\n        center: [51.391827, 35.694875],\n        zoom: 15\n        });\n\u003c/script\u003e\n```\n\n# Map Themes\nCedar Maps currently comes in light and dark themes. You may choose one based on your preference.\n\n![CedarMaps Themes](https://github.com/cedarstudios/cedarstudios.github.io/raw/master/vector-gallery.jpg)\n\n\n\n# Checking out demo files\nIn order to check out demo files in `/demos` folder you need to build the SDK locally or change the script and css paths to our CDN ones mentioned above. \n\n# Building SDK locally\n1. Clone this repo:\n```\ngit clone https://github.com/cedarstudios/cedarmaps-web-sdk-vector\ncd cedarmaps-web-sdk-vector\n```\n3. In the root folder of your cloned repo make a new file called `access-token.js` and put your access token in it:\n```\nvar accessToken = 'YOUR_ACCESS_TOKEN';\n```\n4. Install the required backages: (You have to have [Node.js](https://nodejs.org) and [npm](https://www.npmjs.com/) installed on your machine.)\n```\n npm install\n```\n\n5. Build the SDK. It stores the files in `/dist/[sdk-version]` folder. (See `package.json`).\n\n```\nnpx webpack\n```\n6. Go to `/demos` folder and pick one for the start.\n\n# Pulling new changes from repo\nEvery time you pull new changes from repository, you should run `npx webpack` again.\n```sh\ngit pull\nnpx webpack\n```\n\n# API\nCedarMaps GL is simply a wrapper for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js). You may find an extensive API documentation from the [original library](https://docs.mapbox.com/mapbox-gl-js/api).\n\n# Cedar Maps Services\nContrary to our [Web SDK Raster](https://github.com/cedarstudios/cedarmaps-web-sdk-raster) which is by nature integrated with Cedar Maps services like forward/reverse geocoding, direction, etc., these services are separated in Web SDK Vector and are offered in an standalone NPM package [@cedarstudios/cedarmaps](https://www.npmjs.com/package/@cedarstudios/cedarmaps). But we've included them under `cedarmapsgl.api` anyway.\n\nYou may use them like:\n```js\nvar client = cedarmapsgl.api('YOUR ACCESS TOKEN')\n  client.forwardGeocoding(encodeURIComponent('ونک'), 'cedarmaps.streets', {type: 'roundabout'}, (err, res) =\u003e {console.log(res);});\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedarstudios%2Fcedarmaps-web-sdk-vector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcedarstudios%2Fcedarmaps-web-sdk-vector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcedarstudios%2Fcedarmaps-web-sdk-vector/lists"}