Skip to content

Commit

Permalink
Build improvement (#42)
Browse files Browse the repository at this point in the history
* chore(deps): move maplibre as dev dep and peer dep #41

* chore(vite): add build format in filename #41

* chore(types): use alias for maplibre.Map import #41

* chore(demo): move html to demo folder #41

* chore(lib): simply library architecture #41

* chore(build): set basic build with sourcemaps #41

* chore(types): add types to the build result #41

* chore(assets): move images to proper folders #41

* chore(ignore): add tarball to ignore #41

* fix: use maplibre default import #41

* chore: add vite base url #41

* chore(build): build demo as a separate process  #41
  • Loading branch information
wazolab authored Dec 3, 2024
1 parent 76b9e43 commit f751c2f
Show file tree
Hide file tree
Showing 13 changed files with 883 additions and 409 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ jobs:
- name: Upload Build Artifacts 📦
uses: actions/upload-pages-artifact@v3
with:
path: ./dist # Path to the build output directory
path: ./demo # Path to the build output directory

- name: Deploy to GitHub Pages 🌐
id: deployment
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
node_modules
dist
demo
coverage/
*.tgz

# Yarn v2
.pnp.*
Expand Down
3 changes: 2 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,6 @@
"scss",
"pcss",
"postcss"
]
],
"typescript.tsdk": "node_modules/typescript/lib"
}
8 changes: 5 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Can display and interact with small cluster without the need to zoom or uncluste

See the [Demo page](https://teritorio.github.io/maplibre-gl-teritorio-cluster/index.html).

![alt text](image.png)
![alt text](public/image.png)

## Usage

Expand Down Expand Up @@ -149,9 +149,11 @@ Serve the demo page
yarn dev
```

## Requirements
## Peer Dependencies

Requires [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) >= v4.0.0.
This library requires the following peer dependencies to be installed in your project:

- [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js) >= v4.5.0.

## Contribution

Expand Down
12 changes: 6 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="teritorio.png" />
<link rel="icon" type="image/png" href="./teritorio.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:description"
content="Allow visualization and interaction with all markers, even when superposed. Can display and interact with small cluster without the need to zoom or uncluster." />
<title>MapLibre GL Teritorio Cluster</title>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
<script type="module" src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<style>
body {
display: flex;
Expand Down Expand Up @@ -43,6 +41,8 @@
</header>
<div id="map"></div>
<script type="module">
import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import { buildCss, unfoldedClusterRenderSmart as unfoldedClusterRender, TeritorioCluster } from './src/index'

let geojson;
Expand Down Expand Up @@ -140,11 +140,11 @@
features: [...geojson.features, ...vidoGeojson.features]
})
}

const removeData = () => {
if(teritorioCluster.ticking)
if (teritorioCluster.ticking)
return

const source = map.getSource('earthquakes')

source.setData({
Expand Down
18 changes: 13 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,20 @@
},
"exports": {
".": {
"types": "./dist/maplibre-gl-teritorio-cluster.d.ts",
"import": "./dist/maplibre-gl-teritorio-cluster.js",
"require": "./dist/maplibre-gl-teritorio-cluster.umd.cjs"
}
},
"main": "./dist/maplibre-gl-teritorio-cluster.umd.cjs",
"module": "./dist/maplibre-gl-teritorio-cluster.js",
"types": "./dist/index.d.ts",
"types": "./dist/maplibre-gl-teritorio-cluster.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "vite build && tsc",
"build:demo": "vite build --mode development",
"build": "vite build",
"build:demo": "vite build --mode demo",
"coverage": "vitest run --coverage",
"dev": "vite",
"lint": "eslint .",
Expand All @@ -38,10 +39,12 @@
"preview": "vite preview",
"test": "vitest"
},
"peerDependencies": {
"maplibre-gl": "^4.5.0"
},
"dependencies": {
"@turf/bbox": "^7.1.0",
"@turf/helpers": "^7.1.0",
"maplibre-gl": "^4.7.0"
"@turf/helpers": "^7.1.0"
},
"devDependencies": {
"@antfu/eslint-config": "^3.9.2",
Expand All @@ -50,11 +53,16 @@
"@vitest/coverage-v8": "^2.1.5",
"eslint": "^9.15.0",
"lint-staged": "^15.2.10",
"maplibre-gl": "^4.5.0",
"simple-git-hooks": "^2.11.1",
"typescript": "^5.6.2",
"vite": "^5.4.4",
"vite-plugin-dts": "^4.3.0",
"vitest": "^2.1.5"
},
"resolutions": {
"@microsoft/api-extractor/typescript": "^5.6.2"
},
"simple-git-hooks": {
"commit-msg": "yarn dlx commitlint --edit $1",
"pre-commit": "yarn dlx lint-staged",
Expand Down
File renamed without changes
22 changes: 11 additions & 11 deletions src/teritorio-cluster.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { FitBoundsOptions, GeoJSONSource, LngLatLike, MapGeoJSONFeature, MapSourceDataEvent } from 'maplibre-gl'
import type { FitBoundsOptions, GeoJSONSource, LngLatLike, MapGeoJSONFeature, Map as MapGL, MapSourceDataEvent, Marker, Point } from 'maplibre-gl'
import bbox from '@turf/bbox'
import { featureCollection } from '@turf/helpers'
import { LngLat, Marker, Point } from 'maplibre-gl'
import maplibre from 'maplibre-gl'
import {
clusterRenderDefault,
markerRenderDefault,
Expand Down Expand Up @@ -43,7 +43,7 @@ type FeatureMatch = FeatureInClusterMatch | MapGeoJSONFeature
const UnfoldedClusterClass = 'teritorio-unfolded-cluster'

export class TeritorioCluster extends EventTarget {
map: maplibregl.Map
map: MapGL
clusterLeaves: Map<string, MapGeoJSONFeature[]>
clusterMaxZoom: number
clusterMinZoom: number
Expand All @@ -64,7 +64,7 @@ export class TeritorioCluster extends EventTarget {
unfoldedClusterMaxLeaves: number

constructor(
map: maplibregl.Map,
map: MapGL,
sourceId: string,
options?: {
clusterMaxZoom?: number
Expand Down Expand Up @@ -139,7 +139,7 @@ export class TeritorioCluster extends EventTarget {
// Sets a Pin Marker on a specific coordinates which isn't related to any feature from data source
this.resetSelectedFeature()
this.selectedFeatureId = id
this.#renderPinMarker(new LngLat(feature.geometry.coordinates[0], feature.geometry.coordinates[1]))
this.#renderPinMarker(new maplibre.LngLat(feature.geometry.coordinates[0], feature.geometry.coordinates[1]))

return
}
Expand All @@ -150,7 +150,7 @@ export class TeritorioCluster extends EventTarget {
if ('type' in match && match.type === 'Feature' && match.geometry.type === 'Point') {
const coords = match.geometry.coordinates

this.#renderPinMarker(new LngLat(coords[0], coords[1]))
this.#renderPinMarker(new maplibre.LngLat(coords[0], coords[1]))
}
else if ('feature' in match && match.feature.geometry.type === 'Point') {
const cluster = this.markersOnScreen.get(match.clusterId)
Expand All @@ -173,7 +173,7 @@ export class TeritorioCluster extends EventTarget {
const { clusterXCenter, clusterYCenter } = this.#getClusterCenter(cluster)
const { x, y, height, width } = marker.getBoundingClientRect()

return new Point(x - clusterXCenter + (width / 2), y - clusterYCenter + (height / 2))
return new maplibre.Point(x - clusterXCenter + (width / 2), y - clusterYCenter + (height / 2))
}

#featureClickHandler = (e: Event, feature: MapGeoJSONFeature): void => {
Expand Down Expand Up @@ -283,7 +283,7 @@ export class TeritorioCluster extends EventTarget {
return element
}

#renderPinMarker = (coords: LngLatLike, offset: Point = new Point(0, 0)): void => {
#renderPinMarker = (coords: LngLatLike, offset: Point = new maplibre.Point(0, 0)): void => {
this.pinMarker = !this.pinMarkerRender
? pinMarkerRenderDefault(coords, offset)
: this.pinMarkerRender(coords, offset)
Expand Down Expand Up @@ -349,7 +349,7 @@ export class TeritorioCluster extends EventTarget {
}

this.featuresMap.forEach((feature) => {
const coords = feature.geometry.type === 'Point' ? new LngLat(feature.geometry.coordinates[0], feature.geometry.coordinates[1]) : undefined
const coords = feature.geometry.type === 'Point' ? new maplibre.LngLat(feature.geometry.coordinates[0], feature.geometry.coordinates[1]) : undefined
const id = this.#getFeatureId(feature)

if (!coords) {
Expand Down Expand Up @@ -387,7 +387,7 @@ export class TeritorioCluster extends EventTarget {
else
element = this.#renderCluster(id, props)

marker = new Marker({ element }).setLngLat(coords).addTo(this.map)
marker = new maplibre.Marker({ element }).setLngLat(coords).addTo(this.map)

// If selected feature is now part of this new cluster
// We position the Pin marker on it's new position
Expand All @@ -411,7 +411,7 @@ export class TeritorioCluster extends EventTarget {
if (!marker) {
const element = this.#renderMarker(feature)

marker = new Marker({ element }).setLngLat(coords).addTo(this.map)
marker = new maplibre.Marker({ element }).setLngLat(coords).addTo(this.map)
element.addEventListener('click', (e: Event) => this.#featureClickHandler(e, feature))

// Keep Pin Marker on top
Expand Down
8 changes: 4 additions & 4 deletions src/utils/helpers.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { LngLatLike, MapGeoJSONFeature } from 'maplibre-gl'
import { Marker, Point } from 'maplibre-gl'
import type { LngLatLike, MapGeoJSONFeature, Marker, Point } from 'maplibre-gl'
import maplibre from 'maplibre-gl'

// Helper to apply styles on DOM element
export function buildCss(htmlEl: HTMLElement, styles: { [key: string]: string }): void {
Expand Down Expand Up @@ -145,6 +145,6 @@ export function markerRenderDefault(element: HTMLDivElement, markerSize: number)
}

// Pin Marker default styles
export function pinMarkerRenderDefault(coords: LngLatLike, offset: Point = new Point(0, 0)): Marker {
return new Marker({ anchor: 'bottom' }).setLngLat(coords).setOffset(offset)
export function pinMarkerRenderDefault(coords: LngLatLike, offset: Point = new maplibre.Point(0, 0)): Marker {
return new maplibre.Marker({ anchor: 'bottom' }).setLngLat(coords).setOffset(offset)
}
2 changes: 1 addition & 1 deletion tests/teritorio-cluster.test.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Map as MapGL } from 'maplibre-gl'
import { beforeEach, describe, expect, it } from 'vitest'
import { TeritorioCluster } from '../src/teritorio-cluster'
import { TeritorioCluster } from '../src/index'

describe('teritorio cluster class implementation', () => {
let map: MapGL
Expand Down
25 changes: 6 additions & 19 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,27 +1,14 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"moduleDetection": "force",
"useDefineForClassFields": true,
"target": "ESNext",
"module": "ESNext",

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,

/* Linting */
"moduleResolution": "Node",
"strict": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"declaration": true,
"declarationMap": true,
"emitDeclarationOnly": true,
"outDir": "dist",
"outDir": "./dist",
"sourceMap": true,
"isolatedModules": true,
"skipLibCheck": true
"esModuleInterop": true
},
"include": ["src"]
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
54 changes: 37 additions & 17 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,44 @@
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig(({ command, mode }) => {
return {
base: command === 'build' ? '/maplibre-gl-teritorio-cluster/' : '/',
build: mode === 'production'
? {
lib: {
entry: 'src/index.ts',
name: 'MaplibreGlTeritorioCluster',
fileName: 'maplibre-gl-teritorio-cluster',
},
rollupOptions: {
external: ['maplibre-gl'], // Exclude maplibre-gl from the bundle
output: {
globals: {
'maplibre-gl': 'maplibregl', // Define the global variable for maplibre-gl in the browser
},
// Demo build config
if (command === 'build' && mode === 'demo') {
return {
base: '/maplibre-gl-teritorio-cluster/',
build: {
outDir: './demo',
},
}
}

// Library build config
if (command === 'build') {
return {
build: {
lib: {
entry: './src/index.ts',
name: 'MaplibreGlTeritorioCluster',
fileName: 'maplibre-gl-teritorio-cluster',
},
sourcemap: true,
rollupOptions: {
external: ['maplibre-gl'], // Exclude maplibre-gl from the bundle
output: {
globals: {
'maplibre-gl': 'maplibregl', // Define the global variable for maplibre-gl in the browser
},
},
}
: undefined,
},
},
plugins: [
dts({
rollupTypes: true,
}),
],
}
}

// Local Development config
return {}
})
Loading

0 comments on commit f751c2f

Please sign in to comment.