@northpoint-labs/vector-tiles-google-maps
v1.1.4
Published
<!-- TABLE OF CONTENTS --> <details open="open"> <summary><h2 style="display: inline-block">Table of Contents</h2></summary> <ol> <li> <a href="#about-the-project">About The Project</a> <ul> <li><a href="#built-with">Built With
Downloads
960
Keywords
Readme
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
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
- Clone the repo
git clone https://github.com/techjb/Vector-Tiles-Google-Maps.git
- Install NPM packages
npm install
- 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 toGetTile()
. 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
oronMouseHover
event, set the propertygetIDForLayerFeature
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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - 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.