Mapster

Mapster improves the Google Maps Javascript API by integrating Deck.gl and Webgl. Most important features include 3D Vehicle models with real time movement, support for more markers and GeoJson features.

Installation

Before the actual installation of the package we need to setup a couple things related to the npm registry...

Private registry

Mapster package is stored privately in Azure DevOps artifacts. In order to connect your repository to the private registry add an .npmrc file to your repository root with the following contents:

@resser:registry=https://resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/registry/
registry=https://registry.npmjs.org

always-auth=true

In Windows systems:

Step 1

Make sure you have installed vsts-npm-auth

npm i -g vsts-npm-auth

vsts-npm-auth -config .npmrc

In Linux/Mac systems:

Step 1

Copy the code below to your user .npmrc.

; begin auth token
//resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/registry/:username=resser
//resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/registry/:email=npm requires email to be set but doesn't use the value
//resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/:username=resser
//resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//resser.pkgs.visualstudio.com/_packaging/nodejs-packages/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

Step 2

Generate a Personal Access Token with Packaging read & write scopes.

Step 3

Base64 encode the personal access token from Step 2.

Step 4

Replace both [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] values in your user .npmrc file with your personal access token from Step 3.

Package installation

npm install @resser/mapster

or

yarn add @resser/mapster

Basic Usage

Important! You should first load the Google Maps Javascript library: Add the following line before the </head> tag.

<script src="https://maps.googleapis.com/maps/api/js?key=[INSERT_API_KEY]&v=weekly&libraries=geometry"></script>

Basic Map

import { BaseMap } from '@resser/mapster';

(async () => {
  const mapContainer = document.createElement('div');
  mapContainer.style.width = '100vw';
  mapContainer.style.height = '100vh';
  const body = document.querySelector('body');
  if (body) body.appendChild(mapContainer);

  const map = new BaseMap(mapContainer, {
    mapId: '306a568df144c1e3',
    zoom: 8,
    center: { lat: 20.643086060047693, lng: -103.42928984418265 },
  });

  // IMPORTANT!!!!
  await map.initialize();
})();