nytimes / aframe-loader-3dtiles-component

A-Frame component using 3D-Tiles
Other
189 stars 26 forks source link

add support to google 3d tiles for query string #42

Open kfarr opened 6 months ago

kfarr commented 6 months ago

Currently the long / lat / height / API KEY are hardcoded in index.html: https://github.com/3DStreet/aframe-loader-3dtiles-component/blob/dev/examples/google-tiles/index.html#L38-L41

Instead, provide an option such as that a user can specify lat / long / height via querystring.

Optional: create a basic UI allowing user to set these values and set querystring to trigger component reload

Once this is working so a non-technical user can test, then add link to examples index page with screenshot https://github.com/nytimes/aframe-loader-3dtiles-component/blob/dev/index.html

kfarr commented 6 months ago

Here's example code I put together for a different project on glitch that sets lat / long / elevation via querystring

     AFRAME.registerComponent("load-lat-long", {
        init: function () {
          const queryParams = new URLSearchParams(document.location.search);

          // Default is SF Fort Mason Northwest Pier Streetlight
          const demoLat = queryParams.get("lat") ?? 37.807193;
          const demoLong = queryParams.get("long") ?? -122.431964;
          const demoHeight = queryParams.get("elevation") ?? -28;

          console.log(demoLat, demoLong);
          this.el.setAttribute('loader-3dtiles', 'long', demoLong)
          this.el.setAttribute('loader-3dtiles', 'lat', demoLat)
          this.el.setAttribute('loader-3dtiles', 'height', demoHeight)
        },
      });