add image layer

src/editor/components/components/AddLayerPanel/createLayerFunctions.js

@@ -157,7 +157,7 @@ export function createCustomModel() {
   // accepts a path for a glTF (or glb) file hosted on any publicly accessible HTTP server.
   // Then create entity with model from that path by using gltf-model component
   const modelUrl = prompt(
-    'Please enter a URL to custom glTF/Glb model',
+    'Please enter a URL to custom glTF/GLB model',
     'https://cdn.glitch.global/690c7ea3-3f1c-434b-8b8d-3907b16de83c/Mission_Bay_school_low_poly_model_v03_draco.glb'
   );
   if (modelUrl && modelUrl !== '') {
@@ -184,6 +184,27 @@ export function createPrimitiveGeometry() {
   AFRAME.INSPECTOR.execute('entitycreate', definition);
 }
 
+export function createImageEntity(position) {
+  // This component accepts a svgString and creates a new entity with geometry extruded
+  // from the svg and applies the default mixin material grass.
+  const imagePath = prompt(
+    'Please enter an image path that is publicly accessible on the web and starts with https://',
+    `https://assets.3dstreet.app/images/signs/Sign-Speed-30kph-Kiritimati.png`
+  );
+  if (imagePath && imagePath !== '') {
+    const definition = {
+      element: 'a-entity',
+      components: {
+        position: position ?? '0 0 0', // TODO: How to override only the height (y) value? We don't want the sign in the ground
+        geometry: 'primitive: plane; height: 1.5; width: 1;',
+        material: `src: url(${imagePath})`,
+        'data-layer-name': 'Image • User Specified Path'
+      }
+    };
+    AFRAME.INSPECTOR.execute('entitycreate', definition);
+  }
+}
+
 export function createIntersection() {
   const definition = {
     'data-layer-name': 'Street • Intersection 90º',

src/editor/components/components/AddLayerPanel/layersData.js

@@ -10,7 +10,8 @@ import {
   create60ftRightOfWay,
   create80ftRightOfWay,
   create94ftRightOfWay,
-  create150ftRightOfWay
+  create150ftRightOfWay,
+  createImageEntity
 } from './createLayerFunctions';
 
 export const streetLayersData = [
@@ -126,5 +127,15 @@ export const layersData = [
       'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
     id: 6,
     handlerFunction: createIntersection
+  }, // createImageEntity
+  {
+    name: 'Place New Image Entity',
+    img: '',
+    requiresPro: true,
+    icon: 'ui_assets/cards/icons/gallery24.png',
+    description:
+      'Place an image such as a sign, reference photo, custom map, etc.',
+    id: 7,
+    handlerFunction: createImageEntity
   }
 ];