Neshan OpenLayers

Neshan Platform SDK integrated with Openlayers.

Getting Started

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

• add js/css

  • without bundler

    ol object will be available in window

    <!-- better to be added into head -->
    <link rel="stylesheet" href="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.css" />
    
    <!-- make sure this script is loaded before initializing map (using defer, onload event, etc) -->
    <script src="https://static.neshan.org/sdk/openlayers/v8.1.0/neshan-sdk/v1.0.5/index.js"></script>

  • using bundlers (webpack, rollup)

    // using npm
    npm i @neshan-maps-platform/ol
    
    // using yarn
    yarn add @neshan-maps-platform/ol

• 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

  • node environment

    import '@neshan-maps-platform/ol/ol.css';
    import Map from '@neshan-maps-platform/ol/Map';
    import View from '@neshan-maps-platform/ol/View';
    import {fromLonLat} from '@neshan-maps-platform/ol/proj';
    
    new Map({
        mapType: 'neshan',
        target: 'map',
        key: 'YOUR-API-KEY',
        poi: true,
        traffic: true,
        view: new View({
            center: fromLonLat([51.389, 35.6892]),
            zoom: 14
        })
    });

  • window

    var map = new ol.Map({
        mapType: 'neshan',
        target: 'map',
        key: 'YOUR-API-KEY',
        poi: true,
        traffic: true,
        view: new ol.View({
            center: ol.proj.fromLonLat([51.389, 35.6892]),
            zoom: 14
        })
    });

See the following examples for more detail on bundling OpenLayers with your application:

• Using Rollup
• Using webpack
• Using Parcel

TypeScript support

The ol package includes auto-generated TypeScript declarations as *.d.ts files.