stevage / map-gl-utils Goto Github PK

Hello! It looks like the published version on NPM is about a year old - do you have intentions of pushing an update at some point? You've fixed the bug I'm hitting with hoverPopup in 2450340, hoping you're able to publish a more recent version for convenience.

I was testing our app with safari v11.0.3 desktop, and I think found an error referencing the destructuring operator (...) related to this code , It doesn't effect newer versions of safari, I think the destructing operator was not supported prior to that in safari.
I've never written a node module before, but I was wondering if even though we use babel/webpack to compile our app, perhaps this requires something additional to instruct npm/yarn to transpile the index.js code as well for older browsers?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Browser_compatibility

This might give a convenient way to alter the style before the map is loaded.

I'm thinking something like:

const map = U.create(mapboxgl, {
  container: 'map',
  style: 'mapbox://styles/blah.foo',
}, {
  transformStyle: style => {
...
});

Map.addImage() allows extra options so U.loadImage() should too.

// Additional properties still work
map.U.addVector('mysource', 'https://example.com/tiles/{z}/{x}/{y}.pbf', { maxzoom: 13 });

Actually this doesn't work.

Hi Steve,

I was wondering if it was technically possible to build this as frontend extension, like mentioned here: https://stackoverflow.com/questions/62279096/include-js-script-from-a-npm-install

There are some instructions, but the last reply implies there may be some integral problems. However I’m not familiar with node … maybe you could elaborate a bit?

Thanks and all the best!

Hi, how could I use these functionalities if I am not running a nodeJS but in just simple plain JS in apache server?
Using rollup.js I have created a bundle.js, but don't know how to implement (if possible) the API on 'standard' JS

Of course this will not work (without nodeJS serving)
const U = require('mapbox-gl-utils').init(map);

Tried several stuff, no success. Thanks in advance

Hello, I'm finding this library very convenient in my commercial mapbox application (not yet published) but noticed this repository doesn't have any license specified.

What is your current standpoint on this? Would you be able to add a license? Since there is none available, default copyright laws apply to use of this code.

Thank you.

Not sure what these would be called exactly, but it would be really convenient to have one function which defines a layer or source, and can be repeatedly called when values change.

Syntax maybe something like:

map.U.lineLayer('myline', 'mysource', {
...
});

So the first time it creates the layer. Subsequent calls just apply all the properties individually.

One function like:

map.U.clickDebug()

then when you click any layer it console logs info about it.

This utility library is really handy. One valuable utility that would solve many people's headaches would be to have a reliable way to detect when a source or layer has been loaded properly.

map.U.onSourceLoad('sourcename', features => {
    // Do whatever with features
});

map.U.onLayerLoad('layername', () => {

});

This would be nice:

map.U.show(/signs-*/)

map.U.show(l => l.type === 'symbol')

map.U.hideSource('foo)' hides all layers that reference foo

Probably some combination of renaming: addFoo -> addFooSource or addFooLayer

So maybe addRasterSource

A function to get a list of all the fonts used in the current style would be helpful. This function does most of it, although it won't find font names referred to in a ['format', ... { 'text-font': ... }] block.

function getFonts(map)
            function findLiterals(expr) {
                if (Array.isArray(expr)) {
                    if (expr[0] === 'literal') {
                        ///
                        fonts.push(...expr[1]);
                    } else {
                        expr.forEach(findLiterals);
                    }
                }
            }
            let fonts = [];
            const fontExprs = map
                .getStyle()
                .layers.map((l) => l.layout && l.layout['text-font'])
                .filter(Boolean);
            for (const fontExpr of fontExprs) {
                // if top level expression is an array of strings, it's hopefully ['Arial', ...] and not ['get', 'font']
                if (fontExpr.every((f) => typeof f === 'string')) {
                    fonts.push(...fontExpr);
                } else {
                    findLiterals(fontExpr);
                }
            }
            return [...new Set(fonts)];
}

I'm trying to use clickPopup on a layer with line features and am receiving the following error:

Uncaught Error: LngLatLike argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ]

It works fine on point layers and hoverPopup seems to work with line features, so I'm wondering if I'm doing something wrong or this is a bug.

Example: https://jsfiddle.net/nh7dsgj6/2/. Click the blue water layer to see the issue.

Thanks!

map.U.addCircleLayer('trees-circle', 'trees', {
    circleColor: 'green', // paint property
    circleRadius: ['interpolate', ['zoom'], 12, 3, 15, 5], // paint property
    circleSortKey: ['get', 'tree-sort-key'], // layout property
    filter: ['!=', 'type', 'stump'], // other property
});

Proposal to make the layer prefix optional in all props. The props above would read color, radius, and sortKey.

Only when disambiguating multiple props of the same kind (stroke- and circle-color in circle layers, icon-, text-, and halo-color in symbol layers, etc) will prefixes be needed. In those cases, the nonprefixed form will refer to the word in the layer type ("color" will refer to circle-color and "width" to line-width)

Hello! This seems like a great library to use together with maplibre-gl that I've started implementing in a project. But there doesn't seem to be any typescript definitions(?), which makes it more or less impossible for me to use in my projects. Is there any chance of that being added? Thanks.

Default to blank featureCollection.

using <script src="https://unpkg.com/map-gl-utils"></script> throws this error:

map-gl-utils:1 Uncaught ReferenceError: regeneratorRuntime is not defined
    at map-gl-utils:1:17623
    at map-gl-utils:1:19350
    at map-gl-utils:1:192
    at map-gl-utils:1:196
(anonymous) @ map-gl-utils:1
(anonymous) @ map-gl-utils:1
(anonymous) @ map-gl-utils:1
(anonymous) @ map-gl-utils:1

a bit of googling leads me to believe this is probably babel-related: babel/babel#14576

hey @stevage, it's Lucas from vetro fiber map

Loving this lib so far. I have forked the lib to add functionality to the clickOneLayer method. Specifically, it passes the click event to the cb, and adds a param for a seperate callback that triggers if there is no matching layer:

clickOneLayer(layers, cb, noMatchCb) {
            map.on('click', e => {
                let match = false;
                for (const layer of layers) {
                    const features = map.queryRenderedFeatures(e.point, { layers: [ layer ] });
                    if (features[0]) {
                        cb(e, {
                            layer,
                            feature: features[0],
                            features,
                        });
                        match = true;
                        break;
                    }
                }

                if (!match && noMatchCb) {
                    noMatchCb(e);
                }
            });
        },

is this something you'd be interested in having in the lib?

It would be useful to know when the image has been fetched and loaded.

I am using a vector tile source that includes frequent url query updates. Currently I am using the recommendation from this mapbox-gl issue 2941. Is there a way to manage source updates using this package?

This might look like:

map.U.setStyle('mapbox://mapbox.blah', { discardRegex: 'mapbox://' })

Then:

1. Fetch new style
2. Find every source in current style whose URL doesn't match the discardRegex, add it to the new style
3. Find every layer in current style belonging to a retained source, copy over`

Alternative:

map.U.checkpointStyle("beforeLoaded");

map.U.setStyle('mapbox://mapbox.blah', 'beforeLoaded`);

That is, define a name for this point in the style, and allow operations to diff between points.

Hello there,

Thanks for this cool lib.

I have a question though, is there a reason why I cannot find setLayerSource in the https://stevage.github.io/map-gl-utils/ docs?

This method is in the readme but somehow not documented.

Hello,

if I grab the drag handler between TOC and content parts to get some space for the content itself w/o the need to scroll horizontally, the handler sticks to the mouse and can no longer be released: click, dblclick, esc -- all do nothing.
That's on Chrome 95 for Win10 with a vanilla mouse.

I have to reload the page and face a screen-estate wasting TOC panel and scroll the content part. Yes, I don't have a HD monitor :-)

May I suggest to reduce the overall width of the left TOC anyway? It's way to large for the short lines present in the TOC wasting alot of horizontal space.

Thanks.

A quick test of the beta release indicates some breaking changes. Will an update to map-gl-utils be required?