tooltip hover extrusions

[KravMaguy]

Emailed support about this question yesterday:
How to get a tooltip hover over fill extrusion?
example where a hover tooltip follows the mouse on enter:
https://imgur.com/a6qjmlA

mapbox-gl-js version:
https://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/

Question

I took the following code from your example:
https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/

` map.on('mouseenter', 'places', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';

    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description;

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
});

map.on('mouseleave', 'places', function() {
    map.getCanvas().style.cursor = '';
    popup.remove();
});`

I replaced it with the following code:
` map.on('mouseenter', 'room-extrusion', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';

    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.name;

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
});

map.on('mouseleave', 'room-extrusion', function() {
    map.getCanvas().style.cursor = '';
    popup.remove();
});`

Something is working correctly but I dont get the tooltip on hover I am receiving the following errors in the console when I do hover over an extrusion:
https://imgur.com/FLM1pho

Its telling me LngLatLike arguement must be an instance, object or array.

Links to related documentation

https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike

How do I fix this and have the tooltip appear on hover over extrusions? as well I wanted to understand the difference in your example
https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/
where the tooltip only appears @ a specific point, and something like this:
http://jsfiddle.net/q46Xz/187/
Where the tooltip follows the mouse when it enters the div, and how I can do this with an extrusion.

[peterqliu]

@KravMaguy can you make a test case of what you're trying to do, in a jsfiddle?

[KravMaguy]

@peterqliu
Yes sir, here is a codepen I did a while back:
https://codepen.io/kravmaguy/pen/NEvvzd
Victor Temprano was able to do it on his website here:
https://native-land.ca/
The only difference is im trying to do it with the 3-D polygon extrusions.

[ryanhamley]

@KravMaguy The functionality that makes this possible was just merged into master last week. We needed to implement ray picking to allow for 3d extrusion selection in queryRenderedFeatures. It will be available in our next release on January 30th.

What you're looking for is a combination of these two examples:
https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/
https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/

Issue: #3122
PR: #7499

[peterqliu]

@KravMaguy You'll also need to update the popup position as the mouse moves, in order to track it to the cursor. https://www.mapbox.com/mapbox-gl-js/example/mouse-position/ gets you the coordinate which you can use for popup.setLngLat()

[KravMaguy]

@KravMaguy The functionality that makes this possible was just merged into master last week. We needed to implement ray picking to allow for 3d extrusion selection in queryRenderedFeatures. It will be available in our next release on January 30th.

What you're looking for is a combination of these two examples:
https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/
https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/

Issue: #3122
PR: #7499

Thank you peter, and Mapbox,
I will be looking forward to the new ray picking feature. I can indeed implement a point on the map that will on hover show a tooltip with info about individual units in the building, but this is only on the first floor, can you please:

If exists, refer me to documentation that shows how I can give these points a height property, as not all units for rent will be on ground level.
Is there a way to give the raster image of the space plan a height property as well, in the app I made as well as in your documentation, the geo located raster image of the space plan is on the ground floor, but in order to do the second floor, I wish to add a height property so the second floor space plan can float above the first floor.

[KravMaguy]

@KravMaguy You'll also need to update the popup position as the mouse moves, in order to track it to the cursor. https://www.mapbox.com/mapbox-gl-js/example/mouse-position/ gets you the coordinate which you can use for popup.setLngLat()

Yes, and thank you peter,
I can do this on the first floor, However how can I achieve this effect on a building that has more than one floor? The purpose being to differentiate between first and second floor units.

[ryanhamley]

You'll need to stack multiple extrusions. Basically each floor will be its own fill-extrusion layer. You can use the fill-extrusion-base property to set the height of each successive floor. For further support questions, please contact Mapbox support.

[KravMaguy]

You'll need to stack multiple extrusions. Basically each floor will be its own fill-extrusion layer. You can use the fill-extrusion-base property to set the height of each successive floor. For further support questions, please contact Mapbox support.

Thank you ryan,
I understand how to build multiple floors using the mapbox program, and understand setting base height properties to fill extrusions, as well as stacking multiple extrusions. This is not what I am asking. what I want to know is how I can display information about an individual unit, whether this unit exists on the second, third, fourth floor etc... I thought about using a tooltip when a user hovers over the area, it doesnt really matter how I do it.

Imagine an apartment building in NYC, or an office building, this building has many floors, each floor has its own individual apartments or offices, you want to display information to the user about the individual apartment/office/whatever for rent, you can do this when the user hovers over it, or when he clicks, doesnt really matter, this is the best way I can explain what I am trying to do.

This issue is not really closed. Can you please re-open it?

[ryanhamley]

If I'm understanding your issue correctly, I believe that ray picking will allow what you're trying to accomplish. If you have an extruded building built up out of a stack of individual layers, then you can track the mouse position, call queryRenderedFeatures on mousemove and whichever floor or portion of the building you're pointing at will be the first element in the array of features returned by queryRenderedFeatures. In this gif, the first element in the array returned by queryRenderedFeatures is colored red. You can see how it moves down the building along with the mouse. You can play with this example yourself by going into a local copy of the GL JS library, running MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} yarn run start-debug and going to http://localhost:9966/debug/extrusion-query.html in your browser. (More info on running GL JS locally here) You can view the source code for this example here.

[KravMaguy]

Yes that is exactly what I want to do, I have to wait two weeks to do it? (Implement it in my app)
Can you please show me how to do this now, I dont want to wait.

[ryanhamley]

No, it's in the master branch. You can use it right now if you are ok with using master rather than an official release. The official release comes out at the end of the month. How you would go about doing this is dependent on your app structure and setup so I can't offer support there. If you use Mapbox as an npm package, you should be able to just point the dependency in package.json to a specific branch rather than a release. If you need additional support on using master in your app, our support staff may be able to help or we highly recommend sites like Stack Overflow for general how-to questions.

[KravMaguy]

Gentlemen,
How can we access localhost url with the yarn run command specifically the token MAPBOX_ACCESS_TOKEN={pk.eyJ1IjoidWJpbGFicyIsImEiOiJjaXc3dGQzb2wwMDEwMnlwNXlsejAyOXF6In0.2C7DfhUhiVWgE_ek5N5GzQ} yarn run start-debug, when I put http://localhost:9966/debug/extrusion-query.html in the browser it takes me to the page and I see the coordinates as a get request in the url however no map is displayed.
I am seeing the following errors in the console:
AJAXError
message: "Unauthorized: you may have provided an invalid Mapbox access token. See https://www.mapbox.com/api-documentation/#access-tokens"
name: "AJAXError"
status: 401
url: "https://api.mapbox.com/styles/v1/mapbox/streets-v10?access_token=null"
proto: Error

[ryanhamley]

You have to remove the {} around the access token. It should just be MAPBOX_ACCESS_TOKEN=pk.... yarn run start-debug

[KravMaguy]

Please see my setup and what I am doing wrong?
MapboxSetup.txt
still no map and receiving 401

[ryanhamley]

This command MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoiZ3JleWtyYXYiLCJhIjoiY2pvYW1xenphMXRldzNzcGI0anZ2c3Y1cCJ9.xMuYS2juq83bbMCiYaiNTQ yarn run start-debug worked as expected for me. If you need further support or have "how to" questions, please contact Mapbox support as the development team does not have the resources to offer support through the issues queue. Thanks!