geojson point change circle marker to icon

[Chadjhou]

hello gays i use this in my code,

var tile = L.vectorGrid.slicer(geojson,{
                    interactive: true,
                    rendererFactory: L.canvas.tile,
                    vectorTileLayerStyles:{
                        sliced: { icon: new L.Icon.Default()}
                    }
                    }).addTo(map);
tile.on('click', function(e) {
                        var pro = e.layer.properties;
                        var HTML = '';
                        for (var q in pro) {
                            HTML += q + ":" + pro[q] + '<br />';
                        }
                        L.popup()
                            .setContent(HTML)
                            .setLatLng(e.latlng)
                            .openOn(map);
                    })

and now i can get icon on my map but if move mouse moveon icon and i get some error like that ""Uncaught TypeError: Cannot read property 'lat' of undefined""

someone can help me??

i use leaflet 1.2.0 in chrome

example is here : https://plnkr.co/edit/FdHsFj4WbheXT90z1fTm?p=preview thx

[chriszrc]

Same problem here. Switching to the svg renderer gets rid of the mousemove error, but it's still the same problem when clicking on the marker (or the default circlemarker for that matter). My naive investigation of the issue indicates that the problem is here:

if (e.type !== 'keypress') {
            var isMarker = target.getLatLng && (!target._radius || target._radius <= 10);
            data.containerPoint = isMarker ?
                this.latLngToContainerPoint(target.getLatLng()) : this.mouseEventToContainerPoint(e);
            data.layerPoint = this.containerPointToLayerPoint(data.containerPoint);
            data.latlng = isMarker ? target.getLatLng() : this.layerPointToLatLng(data.layerPoint);
        }

When clicking on a marker (a circle marker in my case), the target has a "getLatLng" function, but target.getLatLng() returns undefined.

[chriszrc]

Any help here? It appears that markers (icons and circle markers) are entirely broken right now vectorgrid :(

[chriszrc]

@Chadjhou I'm thinking in order to get this issue addressed, we might want to change the wording to:

Official demo-points VectorGrid demo broken

With a link to the official demo:

http://leaflet.github.io/Leaflet.VectorGrid/demo-points-icons.html

Because it has the exact same problem we're experiencing, and is an easier place to start for debugging-

[chriszrc]

I created a pull request that has a fix for this issue ( #157 ). I have no idea if this is really the right way to solve this problem, but it does fix it, and I'm happily clicking on my point features again :)

[coros-sanborn]

Hello, I'm having the same exact issue described above. Using leaflet 1.3.1. Any updates on this problem? Thanks in advance.

[chriszrc]

Nothing beyond what's been mentioned on this thread, and the commit that just referenced it. If you look at the pull request, (#157 ), you'll see that my fix is probably not the way to go in the long run, but it does fix the problem. The fork is public, if you want to use it. If you're using npm, you can add this to your package:

"leaflet.vectorgrid": "git+https://github.com/chriszrc/Leaflet.VectorGrid.git"

[coros-sanborn]

Thank you. It worked great!

On Thu, Apr 19, 2018 at 1:15 AM, Chris Marx notifications@github.com wrote:

Nothing beyond what's been mentioned on this thread, and the commit that just referenced it. If you look at the pull request, (#157 https://github.com/Leaflet/Leaflet.VectorGrid/pull/157 ), you'll see that my fix is probably not the way to go in the long run, but it does fix the problem. The fork is public, if you want to use it. If you're using npm, you can add this to your package:

"leaflet.vectorgrid": "git+https://github.com/chriszrc/Leaflet.VectorGrid. git"

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet.VectorGrid/issues/148#issuecomment-382577995, or mute the thread https://github.com/notifications/unsubscribe-auth/Ac6oB3waT52UffYbiGszRYuTniOjbuLvks5tp-UigaJpZM4Sh9-P .

-- Carolyn Oros Software Engineer II

Sanborn 1935 Jamboree Drive, Suite 100 Colorado Springs, CO 80920-5358 719-264-5484 Phone coros@sanborn.com www.sanborn.com

[leafyeh7]

Ran into the same issues with ""Uncaught TypeError: Cannot read property 'lat' of undefined"". @chriszrc 's solution fixed the problem with Leaflet 1.3.1.

[danielbarela]

This is still a problem and the pull request (#157 ) still has not been pulled. Any updates?

[Divinare]

Still a problem with leaflet.vectorgrid 1.3. Using "leaflet.vectorgrid": "git+https://github.com/chriszrc/Leaflet.VectorGrid.git" seems to work. Wish that #157 would get pulled soon.

[yippee2015]

Nothing beyond what's been mentioned on this thread, and the commit that just referenced it. If you look at the pull request, (#157 ), you'll see that my fix is probably not the way to go in the long run, but it does fix the problem. The fork is public, if you want to use it. If you're using npm, you can add this to your package:

"leaflet.vectorgrid": "git+https://github.com/chriszrc/Leaflet.VectorGrid.git"

I created a pull request that has a fix for this issue ( #157 ). I have no idea if this is really the right way to solve this problem, but it does fix it, and I'm happily clicking on my point features again :)

It seems that the problem still exists. How did you solve it?

[yippee2015]

Nothing beyond what's been mentioned on this thread, and the commit that just referenced it. If you look at the pull request, (#157 ), you'll see that my fix is probably not the way to go in the long run, but it does fix the problem. The fork is public, if you want to use it. If you're using npm, you can add this to your package: "leaflet.vectorgrid": "git+https://github.com/chriszrc/Leaflet.VectorGrid.git"

I created a pull request that has a fix for this issue ( #157 ). I have no idea if this is really the right way to solve this problem, but it does fix it, and I'm happily clicking on my point features again :)

It seems that the problem still exists. How did you solve it?

look forward to your reply ~~ ：（

[yippee2015]

@Chadjhou look forward to your reply！

[yippee2015]

@Chadjhou I want to use vectorgrid protobuf support with points and have mouseover and click events work.But it can not be running properly，so how to resolve it？

[chriszrc]

The pull request was merged, but it looks like a new release hasn't been pushed yet. Probably your best bet is to build the lib from source locally-

[yippee2015]

The pull request was merged, but it looks like a new release hasn't been pushed yet. Probably your best bet is to build the lib from source locally-

The problem has been solved. Thank you very much for your method.

[yippee2015]

@Chadjhou How to symbolize Points with label in VectorGrid？like this { stroke: #000000; stroke-width: 0.5; fill: #0099cc; label: [name]; label-anchor: 0.5 0.5; font-family: "Microsoft YaHei"; font-fill: #000000; font-size: 14; }

[abuehlmann]

Thank you, I built the lib from source locally as @chriszrc mentioned, this worked perfect.

[abuehlmann]

I don't understand what you mean, do I have to close my request or something like that?

On 11 Sep 2019, at 10:34, Stefan Brand notifications@github.com wrote:

Anyone maintaining this repo?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Leaflet/Leaflet.VectorGrid/issues/148?email_source=notifications&email_token=AG4VXRQNFJA6CR44OCYAJELQJCUSLA5CNFSM4EUH36H2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6NXAAA#issuecomment-530280448, or mute the thread https://github.com/notifications/unsubscribe-auth/AG4VXRX5NKOGTA6T37D5NYLQJCUSLANCNFSM4EUH36HQ.

[StefanBrand]

Sorry, this wasn't directed towards you (no action from you required). I removed my comment. Turns out that I hadn't turned on logging in the console, which made me think that the proposed fix doesn't work for me. :sweat_smile:

Still, the owner of this repo should release a new version.

[marcodelmoral]

Im trying to use this example to build a map but I cant even substitute circlemarker for an Icon inside an ajax or fetch call :(

[DanielShinken]

Im trying to use this example to build a map but I cant even substitute circlemarker for an Icon inside an ajax or fetch call :(

Did you manage to draw icons instead of circle markers?

[LunaMooncraft]

Thank you, I built the lib from source locally as @chriszrc mentioned, this worked perfect.

How could you achieve this? I have linked source lib, but got error like: "Can't resolve './slicerWebWorker.js.worker' in @./node_modules/leaflet.vectorgrid/src/Leaflet.VectorGrid.Slicer.js @ ./node_modules/leaflet.vectorgrid/src/bundle.js"

Could anyone tell me which src files I have to link to avoid this error? (leaflet 1.6.0)

[jayarjo]

@DanielShinken were you?

[iamtekson]

I have created the new bug #267. Seems like this one is also the similar one. Any progress here?

[DrJonBall]

I have the same problem with the same error when attempting to remove a marker and have replicated it in version 1.7.1, 1.7.0 and 1.6.0

[slutske22]

I was able to solve this by including the following code before any use of L.VectorGrid code. This overwrites the place in the codebase where .fakeStop is used, and passes the event on to fire correctly without error

L.Canvas.Tile.include({
    _onClick: function (e) {
        var point = this._map.mouseEventToLayerPoint(e).subtract(this.getOffset());
        var layer;
        var clickedLayer;

        for (var id in this._layers) {
            layer = this._layers[id];
            if (
                layer.options.interactive &&
                layer._containsPoint(point) &&
                !this._map._draggableMoved(layer)
            ) {
                clickedLayer = layer;
            }
        }
        if (clickedLayer) {
                         // offending code used to be right here
            clickedLayer.fireEvent(e.type, undefined, true);
        }
    },
});

No need to rebuild the entire plugin yourself, just overwrite the offending code with the .include method.

[dpineda]

as pointed by @slutske22 fakeStop function is no defined short version of his fix:

      // Define fakeStop function Fix
      L.DomEvent.fakeStop = () => 0;