Skip to content

Highlight mouseover elements (WIP)#75

Open
trafficonese wants to merge 3 commits into
robertleeplummerjr:masterfrom
trafficonese:highlight
Open

Highlight mouseover elements (WIP)#75
trafficonese wants to merge 3 commits into
robertleeplummerjr:masterfrom
trafficonese:highlight

Conversation

@trafficonese

Copy link
Copy Markdown
Contributor

This is a follow-up from #53 and includes #74 .

Although everything seems to work fine, I am seeing Problems in Visual Studio:

Property 'glify' does not exist on type 'typeof import("c:/../Leaflet.glify/node_modules/@types/leaflet/index")'

I also had to include import L from 'leaflet'; for lines/shapes/points, as otherwise I would have had 3 additional problems.

I am not sure why this happens or how it is done correctly. I tried different approaches without success.
Using new Lines instead of L.glify.lines fixes the problem in VS but it doesn't work and throws several webGL warnings and an error in the console:

Uncaught Error: shader variable color not found

I hope someone can shed some light on these problems.

@robertleeplummerjr robertleeplummerjr left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks fantastic, just a little cleanup.

Comment thread src/points.ts
delete map["highlightPoints"];
}

map["highlightPoints"] = L.glify.points({

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you just use points here, otherwise the implementer cannot overload leaflet, which is a need in some cases.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, can we use a different means of saving the instance of the points on the highlighted map? Otherwise, we're modifying something we don't own. My suggestion would be potentially to store it as a static value within the points class.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could only use glify.points when exporting glify from index.ts and using import { glify } from './index'; in points.ts.

I managed to store the highlighted points in instance.settings.highlightedPoints, but after some heavy hovering I am getting the following errors:

Exceeded 300 live WebGL contexts for this principal, losing the least recently used one. glify-browser.js:12:656
WebGL context was lost. glify-browser.js:12:656

and sometimes this one:

Uncaught TypeError: t is null
_redraw glify-browser.js:10:2040

Everything seems to still work fine in Firefox, but Chrome removes all layers from the map as soon as the WebGL error occurs. Do you have any suggestions?

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems new instances of webgl are being created? Perhaps caching them and reusing them would fix this?

Comment thread src/shapes.ts
var data = Object.assign({"type":"FeatureCollection",
"features": [feature]});

map["highlightPolygon"] = L.glify.shapes({

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same idea here with using shapes, we should be able to use this more directly.

@robertleeplummerjr

Copy link
Copy Markdown
Owner

Conflicts.

@robertleeplummerjr

Copy link
Copy Markdown
Owner

Can you look at these conflicts when you get a chance?

@robertleeplummerjr

Copy link
Copy Markdown
Owner

Part of this just went into master. Still looking to add highlight.

@utilmind

utilmind commented Jul 22, 2025

Copy link
Copy Markdown
Contributor

The Leaflet's geoJSON is incompatible with WebGL, it works with [lng,lat] instead of [lat,lng]. So geoJSON(features).getBounds() will always return invalid bounding rectangle. (Valid only for Leaflet.js, invalid for Glify/WebGL.)

My fix #179 solved that issue with hovering the line features without geoJSON.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants