@neshan-maps-platform/mapbox-gl NPM

Neshan Map Platform --- پلتفرم نقشه نشان -- mapbox-gl SDK

Quick Start --- راه‌اندازی سریع

create account and generate an API-KEY for web sdk : Neshan Platform Website

add js/css

using CDN (without bundler)

nmp_mapboxgl obj will be available in window

<!-- better to be added into head -->
<link rel="stylesheet" href="https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.3/index.css" />

<!-- make sure this script is loaded before initializing map (using defer, onload event, etc) -->
<script src="https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.3/index.js"></script>

using bundlers (webpack, rollup)

// using npm
npm i @neshan-maps-platform/mapbox-gl

// using yarn
yarn add @neshan-maps-platform/mapbox-gl

import assets

import '@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css';
import nmp_mapboxgl from '@neshan-maps-platform/mapbox-gl';
// or
require('@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css');
const nmp_mapboxgl = require('@neshan-maps-platform/mapbox-gl');

add map wrapper element
```
<div id="map"></div>
```

define proper width/height for your wrapper

body {
    height: 100vh;
    width: 100vw;
    margin: 0;
}

#map {
    height: 100%;
    width: 100%;
}

initialize Map

const map = new nmp_mapboxgl.Map({
        mapType: nmp_mapboxgl.Map.mapTypes.neshanVector,
        container: "map",
        zoom: 11,
        pitch: 0,
        center: [51.389, 35.6892],
        minZoom: 2,
        maxZoom: 21,
        trackResize: true,
        mapKey: "[YOUR_NESHAN_PLATFORM_WEB_MAP_API_KEY]",
        poi: false,
        traffic: false,
        })

SSR and SSG?

as mapboxgl-js does not support ssr and ssg, thus this package won't do, too! if you want to use a map in a page with ssr/ssg support, you need to disable ssr/ssg for the map component.