Class BaseMap

Basic implementation

It is important to note that the BaseMap.initialize method should be called first thing after creting the instance.

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();
})();

Adding Basic Google Maps Markers (Legacy)

BaseMap support Google Maps classic markers. Their are not recommended because of performance issues. Consider using {@link Marker}. You can learn more about them here.

const marker = new google.maps.Marker({
  position: { lat: 20.643086060047693, lng: -103.42928984418265 },
});

marker.setMap(map.googleMap);

Adding Basic Google Maps Polygons (Legacy)

BaseMap support Google Maps classic polygons. Their are not recommended because of performance issues. Consider using {@link GeoJsonFeature}. You can learn more about them here.

const polygonCoordinates = [
  { lat: 20.728398126197423, lng: -104.07016426168617 },
  { lat: 19.618571974014426, lng: -104.01137167407285 },
  { lat: 19.803064360014687, lng: -102.80938988286705 },
  { lat: 21.112814452401953, lng: -102.84205243154112 },
];

const polygon = new google.maps.Polyline({
  path: polygonCoordinates,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2,
});

polygon.setMap(map.googleMap);

Adding Mapster Markers (Recommended)

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

const mapsterMarker = {
  id: '87998',
  icon: Icon.DEFAULT_RED,
  lat: 20.7492650861,
  lng: -103.23710715239,
};

// Add marker.
map.addMarker(mapsterMarker);

// Wait 5 seconds and update marker.
await new Promise((resolve) => setTimeout(resolve, 5000));
map.updateMarker('87998', {
  lng: mapsterMarker.lng + 0.1,
  lat: mapsterMarker.lat + 0.1,
  icon: Icon.DEFAULT_BLACK,
});

// Wait 5 seconds and remove marker.
await new Promise((resolve) => setTimeout(resolve, 5000));
map.removeMarker('87998');

// Remove all map markers.
// map.removeAllMarkers()

Adding Mapster GeoJsons

const geoJson = {
    id: 1,
    feature: {
        type: 'Feature',
        properties: {
            stroke: [85, 55, 55],
            'stroke-width': 2,
        },
        geometry: {
            type: 'LineString',
            coordinates: [
                [
                    -103.09432983398436,
                    20.873568860790446,
                ],
                [
                    -103.4857177734375,
                    20.548580033472923,
                ],
            ],
        },
    },
}

// Add geoJson to collection.
baseMap.addGeoJson(geoJson);

// You will usually add the GeoJson to a map:
// map.removeGeoJson(geoJson)

Setting up a SideCard

Learn more about SideCard.

const mapsterSideCard = new Mapster.SideCard({
    subtitle: 'hace 5 min.',
    values: [
        {
            label: 'ID',
            value: '959483',
        },
        {
            label: 'Batería',
            value: '12.5 V',
        },
    ],
})

// Add SideCard to map
baseMap.setSideCard(mapsterSideCard);

// Show
baseMap.showSideCard()

// Hide
// baseMap.hideSideCard()

Setting up a Nabvar

Learn more about Navbar.

const mapsterNavbar = new Mapster.Navbar({
    avatar: 'https://cdn.iconscout.com/icon/free/png-64/suzuki-3441642-2874411.png',
    title: 'ABC-APV00021688',
    subtitle: '#50949',
})

// Add Navbar to map
baseMap.setNavbar(mapsterNavbar)

Adding WMTS Layers

// WMTS layer to be used for testing
const wmtsLayer: IWmtsLayer = {
     id: '102',
     url: 'https://lbsva.telcel.com/tiles/gwc/service/wmts?layer=telcel:cincog_no_garantizada&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}'
};

// Creates a WMTS layer collection
const wmtsLayerCollection: WmtsLayerCollection = new WmtsLayerCollection();

// Adds a WMTS Layer to the collection.
wmtsLayerCollection.addWmtsLayer(wmtsLayer);

// Removes a WMTS layer from the collection
wmtsLayerCollection.removeById('102');

Using Google Maps Infowindows

You can use regular Google Maps Infowindows. Learn more here. You can have custom Infowindows by using overlays like here

const contentString = '<div id="content">'
    + '<h4 id="firstHeading" class="firstHeading">Hello World!</h1>'
    + '</div>'

const infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: new google.maps.LatLng(20.652738741003635, -103.43845898568829),
})

infowindow.open({
    map: baseMap.map,
})