Skip to content

techjb/Vector-Tiles-Google-Maps

Repository files navigation

Table of Contents

  1. About The Project
  2. Examples
  3. Installation
  4. Usage
  5. Documentation
  6. Roadmap
  7. Contributing
  8. License
  9. Contact
  10. Acknowledgements

About The Project

Product Name Screen Shot

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

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