Skip to content

OpenLayers migration guide

This part of the docs is dedicated to the migration from openlayers to trackasia-gl.

Setting Up TrackAsia

Install TrackAsia GL JS and replace OpenLayers with TrackAsia in your project:

npm install trackasia-gl

Initializing the Map

import 'trackasia-gl/dist/trackasia-gl.css';
import {Map} from 'trackasia-gl';

const map = new Map({
  container: 'map',
  style: 'https://static.track-asia.com/demotiles/style.json',
  center: [0, 0],
  zoom: 2
});

Adding a Marker

map.on('load', function () {
  new trackasiagl.Marker({ color: 'red' })
    .setLngLat([0, 0])
    .addTo(map);
});

Adding a GeoJSON Layer

OpenLayers

import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';

const geoJsonLayer = new VectorLayer({
  source: new VectorSource({
    url: 'data.geojson',
    format: new GeoJSON(),
  }),
});

map.addLayer(geoJsonLayer);

TrackAsia

map.on('load', function () {
  map.addSource('geojson-source', {
    type: 'geojson',
    data: 'data.geojson',
  });

  map.addLayer({
    id: 'geojson-layer',
    type: 'fill',
    source: 'geojson-source',
    paint: {
      'fill-color': '#0080ff',
      'fill-opacity': 0.5,
    },
  });
});

Handling Click Events

OpenLayers

map.on('click', function (event) {
  console.log('Clicked coordinates:', event.coordinate);
});

TrackAsia

map.on('click', function (event) {
  console.log('Clicked coordinates:', event.lngLat);
});

OpenLayers

import Overlay from 'ol/Overlay';

const popup = new Overlay({
  element: document.getElementById('popup'),
});

map.addOverlay(popup);

map.on('click', function (event) {
  popup.setPosition(event.coordinate);
  document.getElementById('popup-content').innerHTML = 'Hello, OpenLayers!';
});

TrackAsia

const popup = new trackasiagl.Popup()
  .setLngLat([0, 0])
  .setHTML('<p>Hello, TrackAsia!</p>')
  .addTo(map);