Options
All
  • Public
  • Public/Protected
  • All
Menu

Package core

XYZ Maps JS: Core

XYZ Maps is an experimental and work in progress open-source map editor written in TypeScript/JavaScript. The core module of XYZ Maps provides the most basic functionality and is used by all other modules of xyz-maps. Main functionalities of the module are: DataProviders, TileLayers, Geometric Classes and Styling definitions.

Links

Installation

Install XYZ Map Core by using

# install using npm
npm install @here/xyz-maps-core

or

# install using yarn
yarn add @here/xyz-maps-core

Example Usage:

Create a MVTLayer

import {MVTLayer} from '@here/xyz-maps-core';

// create a MVT Layer
const myLayer = new MVTLayer({
    remote: {
        url: 'https://xyz.api.here.com/tiles/osmbase/512/all/{z}/{x}/{y}.mvt?access_token=' + YOUR_ACCESS_TOKEN
        tileSize : 512
    },
    min: 1,
    max: 20
})
// and add it to the map display
display.addLayer(myLayer);

Start developing

  1. Install node module dependencies

    yarn install
    

    In case yarn is not installed already: install yarn

  2. watch for source code changes and build dev version

    yarn run watch-dev
    

    Builds are located in located in ./dist/

Other

  • build dev version once yarn run build-dev (located in packages/*/dist/)

  • build release version only yarn run build-release (minified...)

License

Copyright (C) 2019-2022 HERE Europe B.V.

This project is licensed under the Apache License, Version 2.0 - see the LICENSE file for details

Index

Type aliases

Color

Color: string | number | [number, number, number, number]

The Color is an RGBA color value representing RED, GREEN, and BLUE light sources with an optional alpha channel. Colors can be specified in the following ways:

  • CSS color names: "red"
  • RGB colors: "rgb(255,0,0)"
  • RGBA colors: "rgba(255,0,0,1.0)"
  • Hexadecimal colors: "#ff0000" | "#f00"
  • Hexadecimal colors with transparency: "#ff0000ff"
  • hexadecimal numbers: 0xff0000
  • RGBA Color Array: [1.0, 0.0, 0.0, 1.0]

GeoJSONBBox

GeoJSONBBox: [number, number, number, number]

Defines a geographical rectangle. The values of a GeoJSONBBox array are "[west: number, south: number, east: number, north: number]"

GeoJSONCoordinate

GeoJSONCoordinate: number[]

A GeoJSON Geometry coordinate is a array of coordinates. The array must contain two or three elements [longitude, latitude, altitude?] / [x, y, z?].

StyleValueFunction

StyleValueFunction<Type>: (feature: Feature, zoom: number) => Type | undefined

A StyleValueFunction is a function that returns the desired value for the respective style property. It's especially useful for data driven styling.

param

the feature for which the style is to be obtained

param

the zoomlevel of the style

example
text: (feature, zoom) => feature.properties.name

Type parameters

  • Type

Type declaration

    • (feature: Feature, zoom: number): Type | undefined
    • Parameters

      Returns Type | undefined

StyleZoomRange

StyleZoomRange<Type>: {}

A StyleZoomRange is a Map<number,any> with zoomlevel as its keys and the value for the respective Style Property at the respective zoomlevel. Values for intermediate zoom levels are interpolated linearly.

example
strokeWidth: {
    // 2px for zoomlevel 1 to 12
    13: 2,  // 2px at zoomlevel 13
    // 10px for zoomlevel 14 (linear interpolation)
    15: 18, // 18px at zoomlevel 15
    // 27px for zoomlevel 16 (linear interpolation)
    17: 36  // 36px at zoomlevel 20
    // 36px for zoomlevels 18 to 20
}

Type parameters

  • Type

Type declaration

  • [zoom: number]: Type

Variables

Const webMercator

webMercator: { alt2z: alt2z; earthCircumference: earthCircumference; geoToPixel: geoToPixel; getGroundResolution: getGroundResolution; lat2y: lat2y; lon2x: lon2x; mapSizePixel: mapSizePixel; meterToPixel: meterToPixel; pixelToGeo: pixelToGeo; pixelToMeter: pixelToMeter; x2lon: x2lon; y2lat: y2lat } = webMercatorPrj

WebMercator projection utilities.

Type declaration

  • alt2z: alt2z
  • earthCircumference: earthCircumference
  • geoToPixel: geoToPixel
  • getGroundResolution: getGroundResolution
  • lat2y: lat2y
  • lon2x: lon2x
  • mapSizePixel: mapSizePixel
  • meterToPixel: meterToPixel
  • pixelToGeo: pixelToGeo
  • pixelToMeter: pixelToMeter
  • x2lon: x2lon
  • y2lat: y2lat

Object literals

Const build

build: object

Detailed Information about the build.

name

name: string = "xyz-maps"

Generated using TypeDoc