CedarMaps GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles. Built on top of 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 repository.
- Basic usage via CDN
- Map Themes
- Checking out demo files
- Building SDK locally
- Pulling new changes from repo
- API
- Cedar Maps Services
- Get an access token from Cedar Maps website (Menu link: "درخواست اکانت رایگان"). It may take a couple of hours until your request is processed and your credentials are emailed to you.
- Include these CSS and JavaScript files in
<head>section of your HTML file.
<script src='https://api.cedarmaps.com/cedarmaps-gl.js/v2.2.0/cedarmaps-gl.js'></script>
<link href='https://api.cedarmaps.com/cedarmaps-gl.js/v2.2.0/cedarmaps-gl.css' rel='stylesheet'/>- Put the following code in the
<body>section of your HTML file After replacing 'YOUR_ACCESS_TOKEN' on line 5:
<div id='map' style='width: 800px; height: 600px;'></div>
<script type="text/javascript">
// 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
});
</script>Cedar Maps currently comes in light and dark themes. You may choose one based on your preference.
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.
- Clone this repo:
git clone https://github.com/cedarstudios/cedarmaps-web-sdk-vector
cd cedarmaps-web-sdk-vector
- In the root folder of your cloned repo make a new file called
access-token.jsand put your access token in it:
var accessToken = 'YOUR_ACCESS_TOKEN';
npm install
- Build the SDK. It stores the files in
/dist/[sdk-version]folder. (Seepackage.json).
npx webpack
- Go to
/demosfolder and pick one for the start.
Every time you pull new changes from repository, you should run npx webpack again.
git pull
npx webpackCedarMaps GL is simply a wrapper for Mapbox GL JS. You may find an extensive API documentation from the original library.
Contrary to our 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. But we've included them under cedarmapsgl.api anyway.
You may use them like:
var client = cedarmapsgl.api('YOUR ACCESS TOKEN')
client.forwardGeocoding(encodeURIComponent('ونک'), 'cedarmaps.streets', {type: 'roundabout'}, (err, res) => {console.log(res);});