migrating to HARP engine causes issue

[mukhrr]

I initialize map in nuxt js.
Basically, this is a try to migrating from HERE Map Tile API v2 to HERE Raster Tile API v3.
I looked though blog post on migration and there used HARP as as the engine. But using HARP causes weird error on browser console:

VM369157:141 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'layer')
    at uu (eval at <anonymous> (mapsjs-core.js:72:72), <anonymous>:141:231)
    at ru.createDefault (eval at <anonymous> (mapsjs-c

Here is my usage:

  createHereMap(container: HTMLElement, coordinates: Array<{ lat: number; lng: number }>): Promise<H.Map> {
    const isDarkMode = localStorage.getItem("mode") === "dark"
    const engineType = H.Map.EngineType["HARP"]

    return new Promise((resolve, reject) => {
      try {
        const defaultLayers = this.herePlatform!.createDefaultLayers({
          engineType,
          pois: true,
          tileSize: devicePixelRatio > 1 ? 512 : 256,
          ppi: devicePixelRatio > 1 ? 320 : 72
        }) as any

        const rasterTileService = this.herePlatform!.getRasterTileService({
          queryParams: {
            ppi: 400,
            style: `explore.${isDarkMode ? "night" : "day"}`,
            features: "pois:all,environmental_zones:all,congestion_zones:all",
            size: "256"
          }
        })
        const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
          engineType,
          tileSize: 512
        })

        const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider)

        const map = new H.Map(container, rasterTileLayer, {
          engineType,
          pixelRatio: window.devicePixelRatio || 1,
          center: new H.geo.Point(coordinates[0].lat, coordinates[0].lng),
          zoom: 4,
          padding: { top: 50, left: 50, bottom: 50, right: 50 }
        })

        window.addEventListener("resize", () => map.getViewPort().resize())
        const mapEvents = new H.mapevents.MapEvents(map)
        new H.mapevents.Behavior(mapEvents)
        const ui = H.ui.UI.createDefault(map, defaultLayers)

        ui.removeControl("mapsettings")
        const scalebar = ui.getControl("scalebar")
        ui.removeControl("scalebar")

        const ms = new H.ui.MapSettingsControl({
          baseLayers: [
            {
              label: "normal",
              layer: defaultLayers.raster.normal.map
            },
            {
              label: "satellite",
              layer: defaultLayers.raster.satellite.map
            }
          ]
        })

        ui.addControl("customized", ms)
        ui.addControl("scalebar", scalebar!)

        const zoomRectangle = new H.ui.ZoomRectangle({
          alignment: H.ui.LayoutAlignment.BOTTOM_RIGHT
        })
        ui.addControl("rectangle", zoomRectangle)

        resolve(map)
      } catch (error) {
        reject(error)
      }
    })
  }

1. How to migrate to raster tile v3 api?! Is my usage correct?
2. If so, what would be problem with using HARP?

P.s: Removing engine type removes error.

[dbacarel]

@mukhrr , there is no need to create the default UI controls (const ui = H.ui.UI.createDefault(map, defaultLayers)) if you're going to remove them and create custom ones right after.

The following will just do:

const ms = new H.ui.MapSettingsControl({
  baseLayers: [
    {
      label: "normal",
      layer: defaultLayers.raster.normal.map
    },
    {
      label: "satellite",
      layer: defaultLayers.raster.satellite.map
    }
  ]
})

// Create the custom UI and add the controls
const zoomControl = new H.ui.ZoomControl({
  'alignment': H.ui.LayoutAlignment.RIGHT_BOTTOM
});
const scalebarControl = new H.ui.ScaleBar({
  'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
});
const zoomRectangle = new H.ui.ZoomRectangle({
  alignment: H.ui.LayoutAlignment.BOTTOM_RIGHT
})


const ui = new H.ui.UI(map);
ui.addControl('zoom', zoomControl);
ui.addControl("customized", ms);
ui.addControl("scalebar", scalebarControl);
ui.addControl("rectangle", zoomRectangle);

Otherwise, the usage seem correct.

[mukhrr]

@dbacarel thanks for the reply. But, the code you suggest doesn't seem to resolve my issue(s).
Your suggestion works for only HARP engine which gives error like above with my usage.

[mukhrr]

So, it was in nuxt 2 bridge. And I tried HARP engine with vue 3.

And only without engineType inside createDefaultLayers seems to work.

defaultLayers = platform.createDefaultLayers({
      pois: true,
      tileSize: devicePixelRatio > 1 ? 512 : 256,
      ppi: devicePixelRatio > 1 ? 320 : 72
    })

But changing map layers rises another error:

@here_maps-api-for-j…t.js?v=33e84e34:692 Uncaught (in promise) IllegalOperationError: ~anonymous() Wrong style format for layer H-33.
    at new wb (@here_maps-api-for-j…s?v=33e84e34:692:10)
    at t.Layers.createDataSource (mapsjs-harp.js:3:1597733)
    at t.Layers.add (mapsjs-harp.js:3:1600099)
    at t.Layers.onSet (mapsjs-harp.js:3:1601198)
    at m.Lf [as gz] (@here_maps-api-for-j…?v=33e84e34:1694:25)
    at E.Lf (@here_maps-api-for-j…v=33e84e34:1724:112)
    at m.dispatchEvent (@here_maps-api-for-j…?v=33e84e34:1676:86)
    at jj.set (@here_maps-api-for-j…?v=33e84e34:6176:10)
    at mj.set (@here_maps-api-for-j…?v=33e84e34:6246:20)
    at U.Dg (@here_maps-api-for-j…v=33e84e34:10120:79)

[dbacarel]

So, it was in nuxt 2 bridge. And I tried HARP engine with vue 3.

Your original code worked already without issues in a simple standalone page, so I don't know what's going on in nuxt or vue 3.

And only without engineType inside createDefaultLayers seems to work.
But changing map layers rises another error:

That's because you need to ensure that engineType is consistent in all places. If you don't define engineType then the default engine is WEBGL, not HARP.
Please share once again your current code.

[mukhrr]

Yes, here it is:

const initMap = async (mapContainer: Ref<HTMLElement | null>) => {
    if (!mapContainer.value) return
    const engineType = H.Map.EngineType["HARP"]

    cleanupMap()

    platform = new H.service.Platform({
      apikey: import.meta.env.APP_HERE_API_KEY
    })

    const defaultLayers = platform.createDefaultLayers({
      engineType,
      pois: true,
      tileSize: devicePixelRatio > 1 ? 512 : 256,
      ppi: devicePixelRatio > 1 ? 320 : 72
    }) as any

    const rasterTileService = platform.getRasterTileService({
      queryParams: {
        ppi: 400,
        style: `explore.${isDark ? "night" : "day"}`,
        features: "pois:all,environmental_zones:all,congestion_zones:all",
        size: "256"
      }
    })
    const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
      engineType,
      tileSize: 512
    })

    const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider)
    map = new H.Map(mapContainer.value, rasterTileLayer, {
      engineType,
      zoom: 3,
      center: { lat: 39.8283, lng: -98.5795 },
      padding: { bottom: 50, left: 50, right: 50, top: 50 },
      pixelRatio: window.devicePixelRatio || 1
    })
    window.addEventListener("resize", () => map.getViewPort().resize())
    const mapEvents = new H.mapevents.MapEvents(map)
    new H.mapevents.Behavior(mapEvents)
    const ms = new H.ui.MapSettingsControl({
      baseLayers: [
        {
          label: "normal",
          layer: defaultLayers.raster.normal.map
        },
        {
          label: "satellite",
          layer: defaultLayers.raster.satellite.map
        }
      ]
    })

    // Create the custom UI and add the controls
    const zoomControl = new H.ui.ZoomControl({
      alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
    })
    const scalebarControl = new H.ui.ScaleBar({
      alignment: H.ui.LayoutAlignment.BOTTOM_RIGHT
    })
    const zoomRectangle = new H.ui.ZoomRectangle({
      alignment: H.ui.LayoutAlignment.BOTTOM_RIGHT
    })

    const ui = new H.ui.UI(map)
    ui.addControl("zoom", zoomControl)
    ui.addControl("customized", ms)
    ui.addControl("scalebar", scalebarControl)
    ui.addControl("rectangle", zoomRectangle)
  }

And the error with these lines:

(in promise) InvalidArgumentError: H.service.omv.Provider (Argument #1 [object Object])
    at new C (@here_maps-api-for-javascript.js?v=7a32a3ac:681:9)
    at B (@here_maps-api-for-javascript.js?v=7a32a3ac:584:47)
    at new yq (@here_maps-api-for-javascript.js?v=7a32a3ac:13759:5)
    at zq.od (@here_maps-api-for-javascript.js?v=7a32a3ac:13881:19)
    at g (@here_maps-api-for-javascript.js?v=7a32a3ac:11254:17)
    at X.Xl (@here_maps-api-for-javascript.js?v=7a32a3ac:11304:32)
    at X.createDefaultLayers (@here_maps-api-for-javascript.js?v=7a32a3ac:19560:18)
    at initMap (map.service.ts:60:36)
    at loadMap (TrailersDashboardMap.vue:51:13)

P.s: Harp js is included

 <script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.1/mapsjs-harp.js"></script>

[mukhrr]

well, replacing import may seem to resolve issue:

Before:
import H from "@here/maps-api-for-javascript"

After:
import H from "@here/maps-api-for-javascript/bin/mapsjs.bundle.harp.js"

[dbacarel]

See the migration page for more info:
https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/harp-migrate.html#using-the-harp-engine-from-the-here-maps-api-for-javascript-npm-package-bundle

Closing the issue.