0

I am trying to load a country map into A-Frame and have difficulty.

My code is below, it is based on "https://earthlinginteractive.github.io/aframe-geo-projection-component/examples/basic/topojson.html"

and their json file https://unpkg.com/us-atlas@1.0.2/us/10m.json

but do not know how to generate such an json file for any arbitrary map with additional info.

Live demo of my code is here https://fluttering-midnight-team.glitch.me/index%20map%20issue.html

<html>
 <head>
<!-- https://github.com/EarthlingInteractive/aframe-geo-projection-component -->
 <!-- <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>   -->
 <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <!-- <script src="https://unpkg.com/aframe-map/dist/aframe-map.min.js"></script> -->
 <script src="https://earthlinginteractive.github.io/aframe-geo-projection-component/dist/aframe-geo-projection-component.min.js"></script>

</head>
<body>

<a-scene>
 <a-assets>  

 <!-- this does not work-->
  <a-asset-item id="json-us" src="https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/regional_council_2018_generalised_topojson.json?v=1657665906674" />  

      <!-- this does not work-->
  <a-asset-item id="json-us" src="https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/AU.json?v=1657679130671" /> 

<!-- this does not work-->
  <a-asset-item id="json-us" src="https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/NZ1.json?v=1657677743779" />

  <!-- this works-->
  <!--   <a-asset-item id="json-us" src="https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/10m.json?v=1657679167267" />
   -->
  </a-assets>


  <a-entity rotation="-90 0 0"
            material="color: #A46C39;"
            topojson-loader="src: #json-us; topologyObject: states;" <!-- states needs to be changed but do not know to what!-->
            geo-projection="
              projection: geoIdentity;
              height: 10;
              width: 20;"
            geo-shape-renderer
            geo-outline-renderer="color: blue"
  >
  </a-entity>

 <a-box  position="0 2 -5" rotation="0 45 45" scale="1 1 1"></a-box>

</a-scene>
   
</body>

By changing "states" to different words (e.g. geometry/bbox (when I change the path to https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/regional_council_2018_generalised_topojson.json?v=1657665906674) as it is in the json file) I get the below JS error

Uncaught Error: TopologyObject with name bbox could not be found.
 at i.parseGeoJson (aframe-geo-projection-component.min.js:6:173)
 at i.onSrcLoaded (aframe-geo-projection-component.min.js:5:31972)
 at three.js:30404:20
Moh-Spark
  • 131
  • 7
  • The US json file is pre-projected - its coordinates are pixel values. Yours has geographic coordinates, and the default projections of D3 with unmodified parameters don't centre on NZ (and treating NZ geographic coordinates isn't ideal as the latitudes are all negative). I'm not certain as to how one would specify projection parameters for the aframe-geo-projection-component, only projection types, but it doesn't appear to be easy, leaving an option to [preproject](https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c) your geometry instead. – Andrew Reid Jul 13 '22 at 05:17
  • https://stackoverflow.com/questions/72962464/how-to-show-a-country-map-with-city-boundaries-in-aframe – Moh-Spark Jul 13 '22 at 07:32

1 Answers1

0

I was able to fix it and I had to use a different projection style

<html>
  <head>
    <!-- https://github.com/EarthlingInteractive/aframe-geo-projection-component -->
   <!-- <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>   -->
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
   <!-- <script src="https://unpkg.com/aframe-map/dist/aframe-map.min.js"></script> -->
     <script src="https://earthlinginteractive.github.io/aframe-geo-projection-component/dist/aframe-geo-projection-component.min.js"></script>
   
  </head>
  <body>
  <a-scene>
      <a-assets>
        <a-asset-item id="json-world" src="https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/nz_ta_1.geojson?v=1657702016406" />
      </a-assets>

      <a-entity rotation="-90 0 0"
                material="color: #A46C39;"
                geojson-loader="src: #json-world;"
                geo-projection="
                  projection: geoMercator;
                  height: 10;
                  width: 20;
                        "
                geo-shape-renderer
                geo-outline-renderer="color: red;"
      >
      </a-entity>
    </a-scene>
  </body>
</html>

Output

and my JSON is

different projection methods:https://d3-wiki.readthedocs.io/zh_CN/master/Geo-Projections/

got NZ geojson from here:https://exploratory.io/map

Now my new problem is "how to colorcode this map based on different values" which I posted as a new question here: How to show a color-coded country map (with city boundaries) in Aframe

Moh-Spark
  • 131
  • 7