**[ This description is mirrored from README.md at [github.com/PolymerVis/mapbox-gl](https://github.com//PolymerVis/mapbox-gl/blob/2.1.4/README.md) on 2019-05-10 ]** mapbox-gl [](https://www.webcomponents.org/element/PolymerVis/mapbox-gl) ========== ```html ``` ### Usage You can find more examples and documentations at [`mapbox-gl` webcomponents page](https://www.webcomponents.org/element/PolymerVis/mapbox-gl). ### Installation ``` bower install --save PolymerVis/mapbox-gl ``` ### Disclaimers PolymerVis is a personal project and is NOT in any way affliated with Mapbox, Polymer or Google. ### Summary [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.. `mapbox-gl` is the Polymer element that wraps around mapbox-gl-js to provide powerful mapping capabilities to your app as a webcomponent. Example: ```html ``` ### Using a different version of `mapbox-gl-js` You can use a different version of mapbox-gl-js by specifying the endpoint to the corresponding library and stylesheet through the `script-src` and `css-src` properties. ```html ``` ## Important Notes: ### Resizing of `mapbox-gl` when it is not visible The underlying mapbox library try to handle `resize` events automatically. In under certain situations (e.g. when the page has `display: none` when using `iron-pages` to control the visible pages) the resize will fail and fall-back to a default size. However when the pages is made visible again, no `resize` event is emitted. And hence, `mapbox-gl` will retain the incorrect size instead of resizing to the correct dimension. To overcome this limitation, you should manually trigger `resize` when the `mapbox-gl` element is made visible. **Example** HTML ```html ``` JS ``` _pageElementChanged(ele) { if (!ele) return; // call resize if function exist ele.resize && ele.resize(); } ``` ## Examples You should also look at the demos for more in-depth examples for different scenarios. ### Add geojson layer To add a geojson layer, you first need to create a `geojson-source` element to load the geojson. The data can be a JSON object or the url to a GeoJSON file. Alternatively, you can bind the data directly to the `mapbox-layer` via `source-data` attribute with the format `{type: String, data: String|Object}`. Then you can render the geojson via the `mapbox-layer` (e.g. rendering-type = line or fill). Note that you will need to bind the corresponding `map` object from `mapbox-gl` element to both `geojson-source` element and `mapbox-layer` element. Example ```html ``` ### Add building layer To add a building layer, just bind the corresponding `map` object from `mapbox-gl` selement to the `mapbox-building-layer` element. Example: ```html ``` ### Add marker To add a marker layer, just include the `mapbox-gl-marker` element as a child of the `mapbox-gl` element. Example: ```html

Some text here

``` ### Add popup `mapbox-gl-popup` can be used to create a pop-up. You can either attach the popup to a `mapbox-gl-marker` or trigger it manually with the `opened` property or `show` function. `mapbox-gl-popup` can be styled by setting either `text` or `html` properties. Alternatively, you can also pass a `slotted` element (slot="popup-content") into the popup (as show below). Example - Display popup on click HTML ```html

Hi

You clicked on [[lat]], [[lng]]!

``` JS ```js handleClick = function(e, details) { var {lngLat: { lat, lng }} = details; this.lat = lat.toFixed(2); this.lng = lng.toFixed(2); this.opened = true; } ``` Example - Attache popup to `mapbox-gl-marker` HTML ```html ``` ### Add a Geocoder control To add a search input to `mapbox-gl`, you can use the `mapbox-gl-geocoder` element which uses the Mapbox Geocoding API to search for places. You just need to ensure the `mapbox-gl-geocoder` is a child of `mapbox-gl`. Example ```html ``` ### Handling events To handle `click` event on a specific `map-layer`, you can listen for the `mapbox-layer-click` event. The event will return the feature of the geometry that is clicked upon. ```html ``` ```js function handleClick(e, {features}) { if (features.length > 0) { alert(features[0].properties.COSTAL_NAM); } } ``` ### Data-driven styling To create a data-driven style for a attribute, just pass in a JSON object instead of a constant variable. more details @ https://www.mapbox.com/mapbox-gl-js/style-spec/#types-function Example ```html ``` color ```js { property: 'continent', type: 'categorical', stops: [ ['Africa', '#FAA'], ['Asia', '#AAF'] ] } ``` filter ```js ['in', 'continent', 'Africa', 'Asia'] ``` ### Create a heatmap To create a heatmap, create a `geojson-source` with `cluster` to loaded a clustered data. Then create a `mapbox-heatmap-layer` with the corresponding `source`. Example ```html ``` ```javascript levels = [{"count": 0, "color": "#EEEEEE", "radius": 2, "opacity": 0.5}, {"count": 5, "color": "#2196F3"}, {"count": 8, "color": "#FFC107"}, {"count": 10, "color": "#F44336"}]; ``` ### Add Controls `mapbox-gl-control` is a generic element for [mapbox controls](https://www.mapbox.com/mapbox-gl-js/api/#icontrol) which you can add to the map. ```html ``` You can also pass in an **instance** of any mapbox controls (i.e. the IControl interface) to the `icontrol` attribute instead. ```html ``` You can also create your own custom IControl by declaring it as a child of `mapbox-gl-control`. Note that you cannot style it with external stylesheets. ```html

I am a custom Control.

Click me!

``` ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default --- | --- | --- `--mapbox-map` | mixin applied to the map div element | `{}` `--mapbox-canvas` | mixin applied to the canvas element for the map | `{}` `--mapbox-gl-marker` | mixin applied to the marker element | `{}`