Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/techjb/Vector-Tiles-Google-Maps
JavaScript library to render vector tiles in Google Maps.
https://github.com/techjb/Vector-Tiles-Google-Maps
google-maps google-maps-api mapbox mbtiles mvt pbf vector-tiles
Last synced: 3 months ago
JSON representation
JavaScript library to render vector tiles in Google Maps.
- Host: GitHub
- URL: https://github.com/techjb/Vector-Tiles-Google-Maps
- Owner: techjb
- License: other
- Created: 2021-04-06T16:04:44.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-16T09:26:03.000Z (about 1 year ago)
- Last Synced: 2024-07-12T15:52:51.436Z (4 months ago)
- Topics: google-maps, google-maps-api, mapbox, mbtiles, mvt, pbf, vector-tiles
- Language: JavaScript
- Homepage: https://github.com/techjb/Vector-Tiles-Google-Maps
- Size: 2.1 MB
- Stars: 38
- Watchers: 2
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-vector-tiles - Vector Tiles Google Maps - Render vector tile layers on Google Maps. (Clients)
README
Table of Contents
-
About The Project
- Examples
- Installation
-
Usage
- Documentation
- Roadmap
- Contributing
- License
- Contact
- Acknowledgements
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/styles-feature.html)
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](https://docs.mapbox.com/mapbox-gl-js/style-spec/) in Google Maps.
### Built With
* [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview?)
* [Mapbox vector tiles](https://github.com/mapbox/vector-tile-js)
* [Protocol Buffers](https://github.com/protocolbuffers/protobuf)
* JavaScript
## Examples
* [Basic](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/basic.html) - Basic loading vector tiles with debug enabled.
* [Cache](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/cache.html) - Cache enabled.
* [Click](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/click.html) - Click to select one or multiple features.
* [Hover](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/hover.html) - On mouse hover event.
* [Preselected features](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/preselected-features.html) - Set features as selected before loading.
* [Filter](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/filter.html) - Filter features by it properties.
* [Layers](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/layers.html) - Add remove vector tiles layers.
* [Styles](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/styles.html) - Change style dynamically.
* [Styles feature](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/styles-feature.html) - Style based on feature properties.
* [Style filter and layer](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/style-filter-layer.html) - Update the style, filter and visible layers simultaneously.
* [Point, linestring and polygon](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/point-linestring-polygon.html) - Show all type of geometries.
* [Custom draw](https://techjb.github.io/Vector-Tiles-Google-Maps/examples/custom-draw.html) - Custom draw function for each feature.
## Installation
1. Clone the repo
```sh
git clone https://github.com/techjb/Vector-Tiles-Google-Maps.git
```
2. Install NPM packages
```sh
npm install
```
3. Get your own API Key for the [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/get-api-key) and replace it in all the provided examples
```html
```
## Usage
Create the `MVTSource` object and then insert it as a `overlayMapType`.
Provide the vector tiles server url in the options object.
```js
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](https://issuetracker.google.com/issues/73335429).
```js
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.
```js
var options = {
getIDForLayerFeature: function(feature) {
return feature.properties.id;
}
};
```
* Enable cache for better performance and smooth flow.
```js
var options = {
cache: true
};
```
* Set the `sourceMaxZoom` option to enable [overzoom](https://docs.mapbox.com/help/glossary/overzoom/).
```js
var options = {
sourceMaxZoom: 14
};
```
## Documentation
See [documentation](https://github.com/techjb/Vector-Tiles-Google-Maps/blob/master/DOCUMENTATION.md) for the contructor options and public methods.
## Roadmap
See the [open issues](https://github.com/techjb/Vector-Tiles-Google-Maps/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](https://github.com/techjb/Vector-Tiles-Google-Maps/blob/master/LICENSE.txt) for more information.
## Contact
Jesús Barrio - [@techjb](https://twitter.com/techjb)
Project Link: [https://github.com/techjb/Vector-Tiles-Google-Maps](https://github.com/techjb/Vector-Tiles-Google-Maps)
## Acknowledgements
* The authors of the library [Leaflet.MapboxVectorTile](https://github.com/SpatialServer/Leaflet.MapboxVectorTile) witch has been used as a start point for this development.
[product-screenshot]: images/screenshot.png