Original Work by Jesús Barrio

About The Project

Vector Tiles Google Maps is a JavaScript library to render vector tiles in Google Maps.

The library provides funcionality to enable cache, filter features, apply styles, onclick event, mouse hover, and show/hide layers.

Further work would be to load Mapxbox GL Styles in Google Maps.

Built With

• Google Maps JavaScript API
• Mapbox vector tiles
• Protocol Buffers
• JavaScript

Examples

• Basic - Basic loading vector tiles with debug enabled.
• Cache - Cache enabled.
• Click - Click to select one or multiple features.
• Hover - On mouse hover event.
• Preselected features - Set features as selected before loading.
• Filter - Filter features by it properties.
• Layers - Add remove vector tiles layers.
• Styles - Change style dynamically.
• Styles feature - Style based on feature properties.
• Style filter and layer - Update the style, filter and visible layers simultaneously.
• Point, linestring and polygon - Show all type of geometries.
• Custom draw - Custom draw function for each feature.

Installation

1. Clone the repo

   git clone https://github.com/techjb/Vector-Tiles-Google-Maps.git

2. Install NPM packages

   npm install

3. Get your own API Key for the Maps JavaScript API and replace it in all the provided examples

   <script
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
     defer
   ></script>

Usage

Create the MVTSource object and then insert it as a overlayMapType. Provide the vector tiles server url in the options object.

var options = {
  url: 'http://your_vector_tiles_url/{z}/{x}/{y}.pbf'
};

var mvtSource = new MVTSource(map, options);
map.overlayMapTypes.insertAt(0, mvtSource);

Recommendations

• Insert the MVTSource after tiles have been loaded for the first time to avoid duplicate invocation to GetTile(). It is documented in this issue tracker.

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
  map.overlayMapTypes.insertAt(0, mvtSource);
});

• If you need to set style based on feature property or trigger onClick or onMouseHover event, set the property getIDForLayerFeature option with the function that returns the unique id for each feature.

var options = {
  getIDForLayerFeature: function (feature) {
    return feature.properties.id;
  }
};

• Enable cache for better performance and smooth flow.

var options = {
  cache: true
};

• Set the sourceMaxZoom option to enable overzoom.

var options = {
  sourceMaxZoom: 14
};

Documentation

See documentation for the contructor options and public methods.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

See license for more information.

Contact

Jesús Barrio - @techjb

Project Link: https://github.com/techjb/Vector-Tiles-Google-Maps

Acknowledgements

• The authors of the library Leaflet.MapboxVectorTile witch has been used as a start point for this development.