vue-mapbox
Version:
> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox Gl JS](https://mapbox.com/mapbox-gl-js)
77 lines (73 loc) • 22.4 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Layers and sources | VueMapbox</title>
<meta name="description" content="Combine powers of Mapbox GL JS and Vue.js">
<link rel="icon" href="/vue-mapbox/favicon.ico">
<link rel="preload" href="/vue-mapbox/assets/css/0.styles.622f01af.css" as="style"><link rel="preload" href="/vue-mapbox/assets/js/app.1613afe0.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/2.1a36c030.js" as="script"><link rel="preload" href="/vue-mapbox/assets/js/22.276c6a9c.js" as="script"><link rel="prefetch" href="/vue-mapbox/assets/js/10.496a25ae.js"><link rel="prefetch" href="/vue-mapbox/assets/js/11.c30d5454.js"><link rel="prefetch" href="/vue-mapbox/assets/js/12.43a2535b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/13.0cb68667.js"><link rel="prefetch" href="/vue-mapbox/assets/js/14.3affa2b5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/15.40b3c4ef.js"><link rel="prefetch" href="/vue-mapbox/assets/js/16.7de1d511.js"><link rel="prefetch" href="/vue-mapbox/assets/js/17.95d02626.js"><link rel="prefetch" href="/vue-mapbox/assets/js/18.449ed0f5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/19.38617f97.js"><link rel="prefetch" href="/vue-mapbox/assets/js/20.f9650703.js"><link rel="prefetch" href="/vue-mapbox/assets/js/21.39c66c8d.js"><link rel="prefetch" href="/vue-mapbox/assets/js/23.87f4c25b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/24.9d297e6b.js"><link rel="prefetch" href="/vue-mapbox/assets/js/25.f1bf9c1c.js"><link rel="prefetch" href="/vue-mapbox/assets/js/3.02aa2be5.js"><link rel="prefetch" href="/vue-mapbox/assets/js/4.79bc4f3c.js"><link rel="prefetch" href="/vue-mapbox/assets/js/5.d3d1578a.js"><link rel="prefetch" href="/vue-mapbox/assets/js/6.49edb5d4.js"><link rel="prefetch" href="/vue-mapbox/assets/js/7.e6ed37a7.js"><link rel="prefetch" href="/vue-mapbox/assets/js/8.3e4706bb.js"><link rel="prefetch" href="/vue-mapbox/assets/js/9.5e3d2dbf.js">
<link rel="stylesheet" href="/vue-mapbox/assets/css/0.styles.622f01af.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-mapbox/" class="home-link router-link-active"><!----> <span class="site-name">VueMapbox</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-mapbox/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/soal/vue-mapbox" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer" class="nav-link external">
map-promisified
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-mapbox/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><a href="/vue-mapbox/api/" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/soal/vue-mapbox" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/soal/map-promisified" target="_blank" rel="noopener noreferrer" class="nav-link external">
map-promisified
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/guide/" class="sidebar-link">Quickstart</a></li><li><a href="/vue-mapbox/guide/basemap.html" class="sidebar-link">Base map</a></li><li><a href="/vue-mapbox/guide/composition.html" class="sidebar-link">Composition</a></li><li><a href="/vue-mapbox/guide/controls.html" class="sidebar-link">Controls</a></li><li><a href="/vue-mapbox/guide/markers&popups.html" class="sidebar-link">Markers and popups</a></li><li><a href="/vue-mapbox/guide/layers&sources.html" class="active sidebar-link">Layers and sources</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/layers&sources.html#adding-layers" class="sidebar-link">Adding layers</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/layers&sources.html#reactivity" class="sidebar-link">Reactivity</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/layers&sources.html#layer-getters" class="sidebar-link">Layer getters</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/layers&sources.html#layer-methods" class="sidebar-link">Layer methods</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/layers&sources.html#layer-events" class="sidebar-link">Layer events</a></li><li class="sidebar-sub-header"><a href="/vue-mapbox/guide/layers&sources.html#migration-from-0-1" class="sidebar-link">Migration from 0.1</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/api/" class="sidebar-link">GlMap</a></li><li><a href="/vue-mapbox/api/controls.html" class="sidebar-link">Controls</a></li><li><a href="/vue-mapbox/api/marker.html" class="sidebar-link">MapMarker</a></li><li><a href="/vue-mapbox/api/popup.html" class="sidebar-link">Popup</a></li><li><a href="/vue-mapbox/api/Layers/" class="sidebar-link">Layer commons</a></li><li><a href="/vue-mapbox/api/Layers/geojsonlayer.html" class="sidebar-link">GeojsonLayer</a></li><li><a href="/vue-mapbox/api/Layers/vectorlayer.html" class="sidebar-link">VectorLayer</a></li><li><a href="/vue-mapbox/api/Layers/rasterlayer.html" class="sidebar-link">RasterLayer</a></li><li><a href="/vue-mapbox/api/Layers/imagelayer.html" class="sidebar-link">ImageLayer</a></li><li><a href="/vue-mapbox/api/Layers/videolayer.html" class="sidebar-link">VideoLayer</a></li><li><a href="/vue-mapbox/api/Layers/canvaslayer.html" class="sidebar-link">CanvasLayer</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Plugin components</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue-mapbox/plugin_components/" class="sidebar-link">Using plugin components</a></li><li><a href="/vue-mapbox/plugin_components/plugin_components_development.html" class="sidebar-link">Create a plugin component</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="content default"><h1 id="layers-and-sources"><a href="#layers-and-sources" aria-hidden="true" class="header-anchor">#</a> Layers and sources</h1> <h2 id="adding-layers"><a href="#adding-layers" aria-hidden="true" class="header-anchor">#</a> Adding layers</h2> <p>Geographic features on the map draws as layers.
Layer use <code>source</code> object that contains data for layer (for example, GeoJSON object). Source must be added to map and several layers can use common <code>source</code> and draw it's data differently.
Also, layer has own configuration object that declares how layer draws on the map. You can read more about it in Mapbox GL JS docs for <a href="https://docs.mapbox.com/mapbox-gl-js/api/#sources" target="_blank" rel="noopener noreferrer">sources<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> ans <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" target="_blank" rel="noopener noreferrer">layers<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p> <p>Vue-mapbox exposes layers as Vue components.
<code>source</code> and <code>layer</code> configuration object passed to layer component as props. There is several layers types for drawing different types of sources.
For example adding a layer with GeoJSON data:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MglMap</span> <span class="token attr-name">:accessToken</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>accessToken<span class="token punctuation">"</span></span> <span class="token attr-name">:mapStyle.sync</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mapStyle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Adding navigation control --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MglNavigationControl</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top-right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token comment"><!-- Adding GeoJSON layer --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MglGeojsonLayer</span>
<span class="token attr-name">:sourceId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>geoJsonSource.id<span class="token punctuation">"</span></span>
<span class="token attr-name">:source</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>geoJsonSource<span class="token punctuation">"</span></span>
<span class="token attr-name">layerId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myLayer<span class="token punctuation">"</span></span>
<span class="token attr-name">:layer</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>geoJsonlayer<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MglMap</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MglMap<span class="token punctuation">,</span> MglNavigationControl<span class="token punctuation">,</span> MglGeojsonLayer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue-mapbox"</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
components<span class="token punctuation">:</span> <span class="token punctuation">{</span>
MglMap<span class="token punctuation">,</span>
MglNavigationControl<span class="token punctuation">,</span>
MglGeojsonLayer
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
accessToken<span class="token punctuation">:</span> <span class="token string">"some_token"</span><span class="token punctuation">,</span>
mapStyle<span class="token punctuation">:</span> <span class="token string">"style_object"</span><span class="token punctuation">,</span>
geoJsonSource<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">//...some GeoJSON object</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
geoJsonLayer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token comment">//...some GeoJSON layer configuration object</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p>In this example <code>geoJsonSource</code> can be an <code>object</code>, representing GeoJSON feature or <code>string</code> with URL to GeoJSON.</p> <p>Sources are stored in Mapbox GL JS <code>Map</code> object by <code>sourceId</code>. If you sure that source already added to map, you can skip <code>source</code> prop and just pass <code>sourceId</code> and use same source for different layers. If you try to add same source with same <code>id</code> twice, VueMapbox would just use <code>source</code> that already existed on the map, but you can set <code>replaceSource</code> prop to <code>true</code> to just replace old source with new one passed in <code>source</code> prop.</p> <p>By default when Layer components destroying, it removes source from map. If you want to keep source on Map (for example, for future using or if other layers use this source), set <code>clearSource</code> prop to <code>false</code>.</p> <h2 id="reactivity"><a href="#reactivity" aria-hidden="true" class="header-anchor">#</a> Reactivity</h2> <p>Layer components watch for changes in object in their <code>layer</code> prop and translate changes to map accordingly. For example, if you change content of <code>filter</code> prop in GeojsonLayer, changes will be automatically applied to layer on the map. Not all layer settings can be set dynamically, currently reactive properties are <code>minzoom</code>, <code>maxzoom</code>, <code>paint</code>, <code>layout</code> and <code>filter</code>.</p> <h2 id="layer-getters"><a href="#layer-getters" aria-hidden="true" class="header-anchor">#</a> Layer getters</h2> <p>GeoJSON and Vector layers has getters for their features: <code>.getRenderedFeatures(filter?)</code>, <code>.getSourceFeatures(geometry?, filter?)</code> and <code>.getFeatureState(featureId)</code>. They works similar to <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures" target="_blank" rel="noopener noreferrer"><code>.queryRenderedFeatures()</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and <a href="https://docs.mapbox.com/mapbox-gl-js/api/#map#querysourcefeatures" target="_blank" rel="noopener noreferrer"><code>.querySourceFeatures()</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> Map methods, but returns features only from source of current layer.</p> <h2 id="layer-methods"><a href="#layer-methods" aria-hidden="true" class="header-anchor">#</a> Layer methods</h2> <p>Layer components has methods <code>move()</code> and <code>remove()</code>.
First moves a layer to a different z-position. Second destroys component and removes layer and source from map event if layer created with prop <code>clearSource: false</code>.</p> <h2 id="layer-events"><a href="#layer-events" aria-hidden="true" class="header-anchor">#</a> Layer events</h2> <p>Layers emits events when loading data or on user interaction like <code>click</code>. See full list of events in <a href="/vue-mapbox/api/Layers/#events">API section</a></p> <h2 id="migration-from-0-1"><a href="#migration-from-0-1" aria-hidden="true" class="header-anchor">#</a> Migration from 0.1</h2> <p>In versoin <code>0.1</code> layer and source options was exposed via separate props.
Since <code>0.2</code> there are consolidated <code>source</code> object props for data source and <code>layer</code> for layer options. See <a href="https://docs.mapbox.com/mapbox-gl-js/api/#sources" target="_blank" rel="noopener noreferrer">sources<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> and <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers" target="_blank" rel="noopener noreferrer">layers<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> in Mapbox GL JS docs.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-mapbox/guide/markers&popups.html" class="prev">
Markers and popups
</a></span> <span class="next"><a href="/vue-mapbox/api/">
GlMap
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/vue-mapbox/assets/js/app.1613afe0.js" defer></script><script src="/vue-mapbox/assets/js/2.1a36c030.js" defer></script><script src="/vue-mapbox/assets/js/22.276c6a9c.js" defer></script>
</body>
</html>