Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix remove issue #1

Closed
wants to merge 2 commits into from
Closed

Fix remove issue #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d58f812
removing of graticule labels fixed
Prajwalism Jan 5, 2024
934bcd8
fix: verison number fixed
Prajwalism Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "maplibre-graticule",
"version": "0.0.3",
"version": "0.0.4",
"description": "Graticuel / Grid plugin for MapLibre GL JS / Mapbox GL JS",
"keywords": [
"maplibre",
Expand Down
140 changes: 82 additions & 58 deletions src/maplibre-graticule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { getGraticule } from './generator';
import { Map, LinePaint, GeoJSONSource } from 'maplibre-gl';
// @ts-nocheck
import { getGraticule } from "./generator";
import { Map, LinePaint, GeoJSONSource } from "maplibre-gl";

export interface GraticuleConfig {
minZoom?: number;
maxZoom?: number;
showLabels?: boolean;
labelType?: 'hdms' | 'decimal';
labelType?: "hdms" | "decimal";
labelSize?: number;
labelColor?: string;
longitudePosition?: 'top' | 'bottom';
latitudePosition?: 'left' | 'right';
longitudePosition?: "top" | "bottom";
latitudePosition?: "left" | "right";
longitudeOffset?: number[];
latitudeOffset?: number[];
paint?: LinePaint;
Expand All @@ -25,9 +26,9 @@ export function randomString() {
}

/**
*
* @param {Map} map
* @returns
*
* @param {Map} map
* @returns
*/
function calculateResolution(map: Map) {
const zoom = map.getZoom();
Expand All @@ -44,7 +45,7 @@ function calculateResolution(map: Map) {
return {
x: resolutionX,
y: resolutionY,
}
};
}

export class MaplibreGraticule {
Expand All @@ -63,22 +64,21 @@ export class MaplibreGraticule {
this.labelSize = this.config.labelSize;
}


/**
* @param {Map} map
* @returns {HTMLElement}
*/
onAdd(map: Map): HTMLElement {
this.map = map;

this.map.on('load', this.updateBound);
this.map.on('move', this.updateBound);
this.map.on("load", this.updateBound);
this.map.on("move", this.updateBound);

if (this.map.loaded()) {
this.update();
}

return document.createElement('div');
return document.createElement("div");
}

/**
Expand All @@ -89,6 +89,16 @@ export class MaplibreGraticule {
return;
}

// Remove symbol layers
const xSymbolLayer = this.map.getLayer(`symbols${this.xid}`);
if (xSymbolLayer) {
this.map.removeLayer(`symbols${this.xid}`);
}
const ySymbolLayer = this.map.getLayer(`symbols${this.yid}`);
if (ySymbolLayer) {
this.map.removeLayer(`symbols${this.yid}`);
}

const xsource = this.map.getSource(this.xid);
if (xsource) {
this.map.removeLayer(this.xid);
Expand All @@ -101,8 +111,8 @@ export class MaplibreGraticule {
this.map.removeSource(this.yid);
}

this.map.off('load', this.updateBound);
this.map.off('move', this.updateBound);
this.map.off("load", this.updateBound);
this.map.off("move", this.updateBound);

this.map = undefined;
}
Expand All @@ -115,97 +125,111 @@ export class MaplibreGraticule {
return;
}

const longitudePosition = this.config.longitudePosition ?? 'bottom';
const latitudePosition = this.config.latitudePosition ?? 'right';
const labelType = this.config.labelType ?? 'hdms';
const longitudePosition = this.config.longitudePosition ?? "bottom";
const latitudePosition = this.config.latitudePosition ?? "right";
const labelType = this.config.labelType ?? "hdms";

const resolution = calculateResolution(this.map);
const xWidth = resolution.x / 100 * 2;
const yWidth = resolution.y / 100 * 2;
const xWidth = (resolution.x / 100) * 2;
const yWidth = (resolution.y / 100) * 2;

/** @type {graticuleJson} */
let graticule: graticuleJson = {
meridians: [],
parallels: []
parallels: [],
};
if (this.active) {
graticule = getGraticule(this.bbox, xWidth, yWidth, 'kilometers', labelType, longitudePosition, latitudePosition);
graticule = getGraticule(
this.bbox,
xWidth,
yWidth,
"kilometers",
labelType,
longitudePosition,
latitudePosition
);
}

const xsource: GeoJSONSource = (this.map.getSource(this.xid));
const xsource: GeoJSONSource = this.map.getSource(this.xid);
if (!xsource) {
this.map.addSource(this.xid, {
type: 'geojson',
data: { type: 'FeatureCollection', features: graticule.meridians }
type: "geojson",
data: { type: "FeatureCollection", features: graticule.meridians },
});

this.map.addLayer({
id: this.xid,
source: this.xid,
type: 'line',
paint: this.config.paint ?? {}
type: "line",
paint: this.config.paint ?? {},
});

if (this.config.showLabels) {
this.map.addLayer({
"id": `symbols${this.xid}`,
"type": "symbol",
"source": this.xid,
"layout": {
id: `symbols${this.xid}`,
type: "symbol",
source: this.xid,
layout: {
"symbol-placement": "point",
"text-field": '{coord}',
"text-field": "{coord}",
"text-size": this.config.labelSize ?? 12,
'text-anchor': longitudePosition === 'top' ? 'top' : 'bottom',
'text-offset': this.config.longitudeOffset ?? [0, 0]
"text-anchor": longitudePosition === "top" ? "top" : "bottom",
"text-offset": this.config.longitudeOffset ?? [0, 0],
},
"paint": {
paint: {
"text-color": this.config.labelColor ?? "#000000",
"text-halo-blur": 1,
"text-halo-color": "rgba(255,255,255,1)",
"text-halo-width": 3
}
"text-halo-width": 3,
},
});
}
} else {
xsource.setData({ type: 'FeatureCollection', features: graticule.meridians });
xsource.setData({
type: "FeatureCollection",
features: graticule.meridians,
});
}

const ysource: GeoJSONSource = (this.map.getSource(this.yid));
const ysource: GeoJSONSource = this.map.getSource(this.yid);
if (!ysource) {
this.map.addSource(this.yid, {
type: 'geojson',
data: { type: 'FeatureCollection', features: graticule.parallels }
type: "geojson",
data: { type: "FeatureCollection", features: graticule.parallels },
});

this.map.addLayer({
id: this.yid,
source: this.yid,
type: 'line',
paint: this.config.paint ?? {}
type: "line",
paint: this.config.paint ?? {},
});

if (this.config.showLabels) {
this.map.addLayer({
"id": `symbols${this.yid}`,
"type": "symbol",
"source": this.yid,
"layout": {
id: `symbols${this.yid}`,
type: "symbol",
source: this.yid,
layout: {
"symbol-placement": "point",
"text-field": '{coord}',
"text-field": "{coord}",
"text-size": this.config.labelSize ?? 12,
'text-anchor': latitudePosition === 'left' ? 'left' : 'right',
'text-offset': this.config.latitudeOffset ?? [0, 0]
"text-anchor": latitudePosition === "left" ? "left" : "right",
"text-offset": this.config.latitudeOffset ?? [0, 0],
},
"paint": {
paint: {
"text-color": this.config.labelColor ?? "#000000",
"text-halo-blur": 1,
"text-halo-color": "rgba(255,255,255,1)",
"text-halo-width": 3
}
"text-halo-width": 3,
},
});
}
} else {
ysource.setData({ type: 'FeatureCollection', features: graticule.parallels });
ysource.setData({
type: "FeatureCollection",
features: graticule.parallels,
});
}
}

Expand All @@ -229,15 +253,15 @@ export class MaplibreGraticule {
*/
get bbox(): GeoJSON.BBox {
if (!this.map) {
throw new Error('Invalid state');
throw new Error("Invalid state");
}

const bounds = this.map.getBounds();
if (bounds.getEast() - bounds.getWest() >= 360) {
bounds.setNorthEast([bounds.getWest() + 360, bounds.getNorth()]);
}

const bbox = /** @type {GeoJSON.BBox} */ (bounds.toArray().flat());
const bbox = /** @type {GeoJSON.BBox} */ bounds.toArray().flat();
return bbox;
}
}
}