gmap-mvt

Library for displaying MVT source on googlemap

This library is beta version!

This software has not been fully tested. If you find bugs, please create an issue.

Installation

# npm
npm install @okame/gmap-mvt

# yarn
yarn add @okame/gmap-mvt

Usage

# create google map object
const map = new google.maps.Map(element, {
      center: { lat: 35.692823106341834, lng: 139.71100348420828 },
      zoom: 9
})

# MVT source
const url = 'https://example.com/rain_layer'

# Options
const options = {}

# Create layer instance
const mapType = new MvtMapType(map, url, options)

# Add layer to GoogleMap
map.overlayMapTypes.insertAt(0, mapType)

Options for MvtMapType

| name || type | description | | ---------- | - | -- | --- | | map || google.maps.Map | GoogleMap | | url || string | MVT source url | | options || object || || tileSize | google.maps.Size || || alt | string || || name | string || || maxZoom | number || || minZoom | number || || projection | google.maps.Projection || || radius | number || || style | google.maps.Data.StylingFunction | google.maps.Data.StyleOptions | styling | || filterFeature | (feature: GeoJsonFeature) => boolean | filter features |

Styling

By setting a callback function as shown below, you can dynamically style observed values to options.style.

const style = (feature: google.maps.Data.Feature) => {
  const val = feature.getProperty('val') as number
  const fillColor = val > 50 ? 'red' : 'blue'

  return {
    fillColor,
    fillOpacity: 0.6,
    strokeWeight: 0
  }
}

const options = { style }
const mapType = new MvtMapType(map, url, options)

Filtering

By setting a callback function as shown below, you can filter features to options.filterFeature.

const filterFeature = (feature: GeoJsonFeature) => {
  return feature.properties?.val > 0
}
const options = { filterFeature }
const mapType = new MvtMapType(map, url, options)