diff --git a/README.md b/README.md
index 23670b3..08c31e6 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,14 @@
 # MapLibre GL Teritorio Cluster
 
-Render native MapLibre GL JS clusters as HTML marker. Render:
+Render native MapLibre GL JS clusters as HTML marker.
+
+Render:
 - HTML cluster
-- HTML group marked small cluster or last zoom level
+- HTML group marked as small cluster or last zoom level
+- Pin Marker on feature click
 
-Allow to see and interact with all map markers, even when superposed. Allow to see and interact with small cluster without the need to need to zoom or uncluster.
+Allow visualization and interaction with all markers, even when superposed.
+Can display and interact with small cluster without the need to zoom or TeritorioCluster.
 
 See the [Demo page](https://teritorio.github.io/maplibre-gl-teritorio-cluster/index.html).
 
@@ -14,47 +18,89 @@ See the [Demo page](https://teritorio.github.io/maplibre-gl-teritorio-cluster/in
 
 Add to you project (or use CDN).
 ```bash
-npm add maplibre-gl-teritorio-cluster
+yarn add maplibre-gl-teritorio-cluster
 ```
 
 > [!WARNING]
-> Set your GeoJson source with `clusterMaxZoom: 22` in order to let the plugin handle cluster/individual marker rendering.
+> Set your GeoJson source with `clusterMaxZoom: 22` in order to let the plugin handle cluster/individual marker rendering across all zoom level
 
 ```js
 import { Map } from "maplibre-gl"
-import UnCluster from 'maplibre-gl-teritorio-cluster'
+import { TeritorioCluster } from 'maplibre-gl-teritorio-cluster'
 
 const map = new Map({
-container: "map_dom_el_id",
-zoom: 0.3,
-center: [0, 20],
-style: 'https://api.maptiler.com/maps/openstreetmap/style.json?key=your_api_key'
+  container: "map_dom_el_id",
+  style: './style.json'
 });
 
-// Set `clusterMaxZoom` to force display unclustered points on a certain zoom level
-const clusterMaxZoom = 17
+map.on('load', () => {
+  const TeritorioCluster = new TeritorioCluster(map, 'your_source_name', options)
 
-const unCluster = new UnCluster(map, 'your_cluster_source', { clusterMaxZoom }, createClusterHTML, createSingleMarkerHTML)
+  // Get feature click event
+  TeritorioCluster.addEventListener('teritorioClick', (e) => {
+    console.log(e)
+  })
 
-map.on('data', (e) => {
-if (e.sourceId !== 'your_cluster_source' || !e.isSourceLoaded) return;
+  // Render feature on map data updates
+  map.on('data', (e) => {
+    if (e.sourceId !== 'your_source_name' || !e.isSourceLoaded)
+      return;
 
-map.on('move', unCluster.render);
-map.on('moveend', unCluster.render);
-unCluster.render()
-});
+    map.on('move', TeritorioCluster.render);
+    map.on('moveend', TeritorioCluster.render);
+    TeritorioCluster.render()
+  });
+})
 
 // Create whatever HTML element you want as Cluster
-const displayCluster = (): HTMLElement => {}
+const clusterMode = (element: HTMLDivElement, props: MapGeoJSONFeature['properties'], size?: number): void => {}
+
 // Create whatever HTML element you want as individual Marker
-const displayMarker = (): HTMLElement => {}
+const displayMarker = (element: HTMLDivElement, feature: MapGeoJSONFeature, size?: number): void => {}
+
+// Create whatever HTML element you want as Pin Marker
+const displayPinMarker = (coords: LngLatLike, offset: Point): Marker => {}
+```
+
+## API
+
+- [TeritorioCluster](#teritoriocluster)
+  - [Parameters](#parameters)
+  - [addEventListener](#addeventlistener)
+
+### TeritorioCluster
+
+Create a new Maplibre GL JS plugin for feature (cluster / individual marker) rendering
+
+#### Parameters
+
+  - `map`: [`maplibregl.Map`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) The Map object represents the map on your page
+  - `source`: `string` The ID of the vector tile or GeoJSON source to query
+  - `options`: `object` Options to configure the plugin
+    - `options.clusterMaxZoom`: `number` The cluster's max zoom (optional, default `17`)
+    - `options.clusterMode`: `(element: HTMLDivElement, props: MapGeoJSONFeature['properties'], size?: number): void` Custom function for cluster rendering (optional)
+    - `options.clusterSize`: `number` Set the size for default cluster rendering mode (optional, default `38`)
+    - `options.markerMode`: `(element: HTMLDivElement, feature: MapGeoJSONFeature, size?: number): void` Custom function for individual marker rendering (optional)
+    - `options.markerSize`: `number` Set the size for default individual marker rendering mode (optional, default `24`)
+    - `options.teritorioClusterMode`: `'circle'` TeritorioCluster rendering preset (optional)
+    - `options.pinMarkerMode`: `(coords: LngLatLike, offset: Point): Marker` Custom function for pin marker rendering (optional)
+
+#### addEventListener
+
+Listen to feature click and returns it for external control.
+
+```js
+TeritorioCluster.addEventListener('teritorioClick', (e) => {
+  console.log(e.detail.selectedFeature)
+})
+
 ```
 
 ## Dev
 
-Install Maplibre GL JS as peer dependency (be seriously, you should already have it)
+Install Maplibre GL JS as peer dependency
 ```bash
-npm install maplibre-gl
+yarn add maplibre-gl
 ```
 
 Install dependencies
diff --git a/index.html b/index.html
index 4a839e6..70e45be 100644
--- a/index.html
+++ b/index.html
@@ -5,15 +5,16 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta property="og:description" content="Show all cluster's points in one HTML element" />
-  <title>Maplibre GL - Uncluster</title>
+  <title>MapLibre GL Teritorio Cluster</title>
 </head>
 
 <body style="margin: 0; padding: 0;">
   <div id="map" style="height: 100vh;"></div>
+
   <script type="module">
     import 'maplibre-gl/dist/maplibre-gl.css'
     import { Map, NavigationControl, Marker } from "maplibre-gl"
-    import { UnCluster } from './src'
+    import { TeritorioCluster } from './src'
     import { buildCss } from './src/utils/helpers'
 
     // filters for classifying earthquakes into five categories based on magnitude
@@ -29,8 +30,6 @@
     const map = new Map({
       hash: true,
       container: "map",
-      zoom: 0.3,
-      center: [0, 20],
       style: 'https://api.maptiler.com/maps/openstreetmap/style.json?key=GIAfARJO9HDgKceZRlGv'
     });
 
@@ -38,16 +37,6 @@
 
     map.on('load', async () => {
       let geojson = await fetch('https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson', { method: 'GET' }).then(res => res.json())
-      // const superposedGeojson = {
-      //   ...geojson,
-      //   features: geojson.features.map((f,index) => {
-      //     if (index < 20)
-      //       f.geometry.coordinates = [0,0]
-
-      //     return f
-      //   })
-      // }
-
 
       // add a clustered GeoJSON source for a sample set of earthquakes
       map.addSource('earthquakes', {
@@ -114,38 +103,44 @@
         }
       });
 
-      const unCluster = new UnCluster(
+      const teritorioCluster = new TeritorioCluster(
         map,
         'earthquakes',
         {
           clusterMode: displayCluster,
           markerMode: displayMarker,
-          unClusterMode: 'circle',
+          teritorioClusterMode: 'circle',
           pinMarkerMode: displayPinMarker
         },
       )
 
-      // Get selected marker ID
-      // Get Pin Marker instance
-      unCluster.addEventListener('teritorioClick', (e) => {
-        console.log(e)
+      teritorioCluster.render()
+
+      // Get feature click event
+      teritorioCluster.addEventListener('teritorioClick', (e) => {
+        console.log(e.detail.selectedFeature)
       })
 
       // after the GeoJSON data is loaded, update markers on the screen and do so on every map move/moveend
       map.on('data', (e) => {
-        if (e.sourceId !== 'earthquakes' || !e.isSourceLoaded) return;
+        if (e.sourceId !== 'earthquakes' || !e.isSourceLoaded)
+          return
+
+        map.on('move', teritorioCluster.render);
+        map.on('moveend', teritorioCluster.render);
 
-        map.on('move', unCluster.render);
-        map.on('moveend', unCluster.render);
-        unCluster.render()
+        teritorioCluster.render()
       });
     })
 
-    const displayPinMarker = (
-      coords,
-      offset
-    ) => {
-      return new Marker({ scale: 1.3, color: '#f44336', anchor: 'bottom' }).setLngLat(coords).setOffset(offset)
+    const displayPinMarker = (coords, offset) => {
+      return new Marker({
+        scale: 1.3,
+        color: '#f44336',
+        anchor: 'bottom'
+      })
+        .setLngLat(coords)
+        .setOffset(offset)
     }
 
     const displayMarker = (element, feature, size) => {
diff --git a/src/index.ts b/src/index.ts
index 32929c1..45a85b3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,3 @@
-import { UnCluster } from "./uncluster";
+import { TeritorioCluster } from "./teritorioCluster";
 
-export { UnCluster }
\ No newline at end of file
+export { TeritorioCluster }
\ No newline at end of file
diff --git a/src/uncluster.ts b/src/teritorioCluster.ts
similarity index 80%
rename from src/uncluster.ts
rename to src/teritorioCluster.ts
index aa1e103..38cb845 100644
--- a/src/uncluster.ts
+++ b/src/teritorioCluster.ts
@@ -1,73 +1,72 @@
-import type { GeoJSONSource, LngLatLike, MapGeoJSONFeature, MapMouseEvent } from 'maplibre-gl'
+import type { GeoJSONSource, LngLatLike, MapGeoJSONFeature } from 'maplibre-gl'
 import { Marker, Point } from 'maplibre-gl'
 import {
   displayPinMarkerDefault,
-  displayUnclusterInCircle,
-  displayUnclusterDefault,
+  displayTeritorioClusterInCircle,
+  displayTeritorioClusterDefault,
   displayMarkerDefault,
   displayClusterDefault
 } from './utils/helpers';
 
-type UnClusterMode = 'default' | 'circle'
-type ClusterMode = 'default' | ((element: HTMLDivElement, props: MapGeoJSONFeature['properties'], size?: number) => void)
-type MarkerMode = 'default' | ((element: HTMLDivElement, feature: MapGeoJSONFeature, size?: number) => void)
-type PinMarkerMode = 'default' | ((coords: LngLatLike, offset: Point) => Marker)
+type TeritorioClusterMode = 'default' | 'circle'
+type ClusterMode = ((element: HTMLDivElement, props: MapGeoJSONFeature['properties'], size?: number) => void)
+type MarkerMode = ((element: HTMLDivElement, feature: MapGeoJSONFeature, size?: number) => void)
+type PinMarkerMode = ((coords: LngLatLike, offset: Point) => Marker)
 
-export class UnCluster extends EventTarget {
+export class TeritorioCluster extends EventTarget {
   map: maplibregl.Map
   clusterLeaves: Map<string, MapGeoJSONFeature[]>
   clusterMaxZoom: number
-  clusterMode: ClusterMode
+  clusterMode?: ClusterMode
   clusterSize: number
   markers: { [key: string]: Marker }
-  markerMode: MarkerMode
+  markerMode?: MarkerMode
   markersOnScreen: { [key: string]: Marker }
   markerSize: number
   pinMarker: Marker | null
-  pinMarkerMode: PinMarkerMode
+  pinMarkerMode?: PinMarkerMode
   selectedClusterId: string | null
   selectedFeatureId: string | null
   sourceId: string
   ticking: boolean
-  unClusterMode: UnClusterMode
+  teritorioClusterMode: TeritorioClusterMode
 
   constructor(
     map: maplibregl.Map,
     source: string,
-    options: {
-      clusterMaxZoom?: number,
-      clusterMode?: ClusterMode,
-      clusterSize?: number
-      markerMode?: MarkerMode,
-      markerSize?: number,
-      unClusterMode?: UnClusterMode,
-      pinMarkerMode?: PinMarkerMode
+    options?: {
+      clusterMaxZoom: number,
+      clusterMode: ClusterMode,
+      clusterSize: number
+      markerMode: MarkerMode,
+      markerSize: number,
+      teritorioClusterMode: TeritorioClusterMode,
+      pinMarkerMode: PinMarkerMode
     }
   ) {
     super()
 
     this.map = map
     this.clusterLeaves = new Map<string, MapGeoJSONFeature[]>()
-    this.clusterMaxZoom = options.clusterMaxZoom || 17
-    this.clusterMode = options.clusterMode || 'default'
-    this.clusterSize = options.clusterSize || 38
+    this.clusterMaxZoom = options?.clusterMaxZoom || 17
+    this.clusterMode = options?.clusterMode
+    this.clusterSize = options?.clusterSize || 38
     this.markers = {}
-    this.markerMode = options.markerMode || 'default'
+    this.markerMode = options?.markerMode
     this.markersOnScreen = {}
-    this.markerSize = options.markerSize || 24
+    this.markerSize = options?.markerSize || 24
     this.pinMarker = null
-    this.pinMarkerMode = options.pinMarkerMode || 'default'
+    this.pinMarkerMode = options?.pinMarkerMode
     this.selectedClusterId = null
     this.selectedFeatureId = null
     this.sourceId = source
     this.ticking = false
-    this.unClusterMode = options.unClusterMode || 'default'
+    this.teritorioClusterMode = options?.teritorioClusterMode || 'default'
 
     this.map.on('click', this.onClick)
   }
 
-  onClick = (e: MapMouseEvent) => {
-    console.log('click', e)
+  onClick = () => {
     this.selectedClusterId = null
     this.selectedFeatureId = null
     this.pinMarker?.remove()
@@ -82,35 +81,33 @@ export class UnCluster extends EventTarget {
   }
 
   renderPinMarker = (coords: LngLatLike, offset: Point = new Point(0, 0)) => {
-    if (this.pinMarkerMode === 'default')
-      return displayPinMarkerDefault(coords, offset)
-    else
-      return this.pinMarkerMode(coords, offset)
+    return !this.pinMarkerMode
+      ? displayPinMarkerDefault(coords, offset)
+      : this.pinMarkerMode(coords, offset)
   }
 
   renderMarker = (feature: MapGeoJSONFeature) => {
     const element = document.createElement('div')
     element.id = this.getFeatureId(feature)
 
-    if (this.markerMode === 'default')
-      displayMarkerDefault(element, this.markerSize)
-    else
-      this.markerMode(element, feature, this.markerSize)
+    !this.markerMode
+      ? displayMarkerDefault(element, this.markerSize)
+      : this.markerMode(element, feature, this.markerSize)
 
     return element
   }
 
-  renderUncluster = (id: string, leaves: MapGeoJSONFeature[]) => {
+  renderTeritorioCluster = (id: string, leaves: MapGeoJSONFeature[]) => {
     const element = document.createElement('div')
     element.id = id
-    element.classList.add('uncluster')
+    element.classList.add('teritorio-cluster')
 
-    switch (this.unClusterMode) {
+    switch (this.teritorioClusterMode) {
       case 'circle':
-        displayUnclusterInCircle(element, leaves, this.markerSize, this.renderMarker, this.featureClickHandler)
+        displayTeritorioClusterInCircle(element, leaves, this.markerSize, this.renderMarker, this.featureClickHandler)
         break
       default:
-        displayUnclusterDefault(element, leaves, this.renderMarker, this.featureClickHandler)
+        displayTeritorioClusterDefault(element, leaves, this.renderMarker, this.featureClickHandler)
         break
     }
 
@@ -120,10 +117,9 @@ export class UnCluster extends EventTarget {
   renderCluster = (props: MapGeoJSONFeature['properties']) => {
     const element = document.createElement('div')
 
-    if (this.clusterMode === 'default')
-      displayClusterDefault(element, props, this.clusterSize)
-    else
-      this.clusterMode(element, props)
+    !this.clusterMode
+      ? displayClusterDefault(element, props, this.clusterSize)
+      : this.clusterMode(element, props)
 
     return element;
   }
@@ -172,9 +168,9 @@ export class UnCluster extends EventTarget {
         let marker: Marker | undefined = this.markers[id];
 
         if (
-          (marker && maxZoomLimit && !marker.getElement().classList.contains('uncluster'))
+          (marker && maxZoomLimit && !marker.getElement().classList.contains('teritorio-cluster'))
           ||
-          (marker && !maxZoomLimit && marker.getElement().classList.contains('uncluster') && this.markersOnScreen[id])
+          (marker && !maxZoomLimit && marker.getElement().classList.contains('teritorio-cluster') && this.markersOnScreen[id])
         ) {
           marker = undefined
           delete this.markers[id]
@@ -187,7 +183,7 @@ export class UnCluster extends EventTarget {
           const leaves = this.clusterLeaves.get(id)
 
           if (leaves && ((leaves.length <= 5) || maxZoomLimit)) {
-            element = this.renderUncluster(id, leaves)
+            element = this.renderTeritorioCluster(id, leaves)
           } else {
             // Create default HTML Cluster
             element = this.renderCluster(props)
@@ -322,7 +318,7 @@ export class UnCluster extends EventTarget {
       this.pinMarker = null
     }
 
-    // If element is within Uncluster
+    // If element is within TeritorioCluster
     if (!markerOnScreen && clusterId) {
       this.selectedClusterId = clusterId
 
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 53bff35..8e22aee 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -10,7 +10,7 @@ export const buildCss = (htmlEl: HTMLElement, styles: { [key: string]: string })
 }
 
 // Circle shape
-export const displayUnclusterInCircle = (
+export const displayTeritorioClusterInCircle = (
   parent: HTMLDivElement,
   items: MapGeoJSONFeature[],
   itemSize: number,
@@ -53,8 +53,8 @@ export const displayUnclusterInCircle = (
   })
 }
 
-// Uncluster default styles
-export const displayUnclusterDefault = (
+// TeritorioCluster default styles
+export const displayTeritorioClusterDefault = (
   parent: HTMLDivElement,
   items: MapGeoJSONFeature[],
   renderMarker: (feature: MapGeoJSONFeature) => HTMLDivElement,
@@ -68,7 +68,7 @@ export const displayUnclusterDefault = (
     'cursor': 'pointer'
   })
 
-  // Create Uncluster HTML leaves
+  // Create TeritorioCluster HTML leaves
   items.forEach(feature => {
     const featureHTML = renderMarker(feature)
 
diff --git a/style.json b/style.json
new file mode 100644
index 0000000..dd58b25
--- /dev/null
+++ b/style.json
@@ -0,0 +1,38 @@
+{
+  "version": 8,
+  "name": "Empty Style",
+  "metadata": {"maputnik:renderer": "mlgljs"},
+  "sources": {
+    "points": {
+      "type": "geojson",
+      "cluster": true,
+      "clusterRadius": 80,
+      "clusterMaxZoom": 22,
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "id": 1 },
+            "geometry": {"type": "Point", "coordinates": [0, 0]}
+          },
+          {
+            "type": "Feature",
+            "properties": { "id": 2 },
+            "geometry": {"type": "Point", "coordinates": [0, 1]}
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "cluster",
+      "type": "circle",
+      "source": "points"
+    }
+  ],
+  "id": "muks8j3"
+}
\ No newline at end of file