https://github.com/cedarstudios/cedarmaps-web-sdk-vector
CedarMaps' Javascript SDK for vector tiles
https://github.com/cedarstudios/cedarmaps-web-sdk-vector
cedarmaps iran iran-map map sdk-js
Last synced: 10 months ago
JSON representation
CedarMaps' Javascript SDK for vector tiles
- Host: GitHub
- URL: https://github.com/cedarstudios/cedarmaps-web-sdk-vector
- Owner: cedarstudios
- Created: 2019-05-07T06:47:58.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T23:17:28.000Z (over 3 years ago)
- Last Synced: 2025-01-26T01:37:59.254Z (over 1 year ago)
- Topics: cedarmaps, iran, iran-map, map, sdk-js
- Language: CSS
- Homepage: https://www.cedarmaps.com
- Size: 785 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cedarmaps Web SDK Vector
CedarMaps 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).
**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.
# Table of Contents
- [Basic usage via CDN](#basic-usage-via-cdn)
- [Map Themes](#map-themes)
- [Checking out demo files](#checking-out-demo-files)
- [Building SDK locally](#building-sdk-locally)
- [Pulling new changes from repo](#pulling-new-changes-from-repo)
- [API](#api)
- [Cedar Maps Services](#cedar-maps-services)
# Basic usage via CDN
1. 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.
2. Include these CSS and JavaScript files in `` section of your HTML file.
```html
```
3. Put the following code in the `` section of your HTML file **After replacing 'YOUR_ACCESS_TOKEN' on line 5**:
```html
// In order to use Cedar Maps you **MUST** have an access token
var map = cedarmapsgl.map('YOUR_ACCESS_TOKEN', {
style: 'style://streets-light', // Other available style: 'style://streets-dark'
container: 'map',
center: [51.391827, 35.694875],
zoom: 15
});
```
# Map Themes
Cedar Maps currently comes in light and dark themes. You may choose one based on your preference.
# Checking out demo files
In 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.
# Building SDK locally
1. Clone this repo:
```
git clone https://github.com/cedarstudios/cedarmaps-web-sdk-vector
cd cedarmaps-web-sdk-vector
```
3. In the root folder of your cloned repo make a new file called `access-token.js` and put your access token in it:
```
var accessToken = 'YOUR_ACCESS_TOKEN';
```
4. Install the required backages: (You have to have [Node.js](https://nodejs.org) and [npm](https://www.npmjs.com/) installed on your machine.)
```
npm install
```
5. Build the SDK. It stores the files in `/dist/[sdk-version]` folder. (See `package.json`).
```
npx webpack
```
6. Go to `/demos` folder and pick one for the start.
# Pulling new changes from repo
Every time you pull new changes from repository, you should run `npx webpack` again.
```sh
git pull
npx webpack
```
# API
CedarMaps 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).
# Cedar Maps Services
Contrary 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.
You may use them like:
```js
var client = cedarmapsgl.api('YOUR ACCESS TOKEN')
client.forwardGeocoding(encodeURIComponent('ونک'), 'cedarmaps.streets', {type: 'roundabout'}, (err, res) => {console.log(res);});
```