سیدار مپ API Documentation
< Back to Platforms

Cedarmaps Web SDK Vector

CedarMaps JS is a javascript library for building interactive maps. It's simply a wrapper for Mapbox GL Javascript API.

Table of Contents

Basic Usage

Recommended usage is via the CedarMaps CDN. Just include CSS and JavaScript files in <head> section of your HTML file.

<script src='https://api.cedarmaps.com/cedarmaps-gl.js/v2.1.1/cedarmaps.js'></script>
<link href='https://api.cedarmaps.com/cedarmaps-gl.js/v2.1.1/cedarmaps.css' rel='stylesheet'/>

and put the following code in the <body> of your HTML file:

<div id='map' style='width: 400px; height: 300px;'></div>

<script type="text/javascript">
    var accessToken = 'ACCESS TOKEN' // You can get an access token by filling out the demo account form in https://www.cedarmaps.com/#demo
    var map = CedarMaps.map(accessToken, {
        style: 'style://streets-light', //or style://streets-dark
        container: 'map',
        center: [51.391827, 35.694875],
        zoom: 15
        });
</script>

Note: You can get an access token by filling out the demo account form in Cedarmaps Website.

If you prefer to have your local version of the library you can simply build it with the following commands:

Note: node.js must be installed on your machine.

git clone http://gitlab.cedar.ir/cedar.studios/cedarmaps-sdk-web-vector-public.git
cd cedarmaps-sdk-web-vector-public
npm install
npx webpack

After the built process, the files are copied into dist/ folder according to current SDK version. (See package.json).

Note: Every time you pull new changes from repository, you should run npx webpack again.

git pull
npx webpack

You can also see the API documentation for further help.

Demos

Basic map marker live example

Basic map marker with controls live example

Direction live example

Reverse geocoder live example

API

map

Create new cedarmaps object base on provided token and options (see mapbox gl options )

CedarMaps.map(ACCESS_TOKEN [, options])

Returns a Map box object.

CedarMaps.map(accessToken, {
        style: 'style://streets-light', //or style://streets-dark
        container: <CONTAINER ID>,
        center: <CENTER POINT>,
        zoom: 15
      });

gl

Mapbox GL object

  var marker = new CedarMaps.gl.Marker().setLngLat([51.3789253, 35.709987]).addTo(map)

api

CedarMaps API. please see cedarmaps npm package for more information