nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dinamic visualization of CAD map

PaoloF

Hi everyone into the community.

I'm developing an Angular application and my goal is to visualize a CAD map as layer on basemap.

I have loaded into ArcGIS Pro the DXF file and georeferenced the polylines

Now, into Angular frontend I have a control to choose a geographical position: at that point I get coordinates from database and pan the map to that position. At the same time I would like to load into application the georeferenced CAD data and display them as layer over the basemap.

I shared the CAD data as Layer package into ARcGIS Pro, but I cannot understand how to load it through JS API over the map.

Am I following a correct flow operation or is there a valid alternative to realize my goal?

Thanks in advance and best regards.

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

DheerajBhaskar

Hi,

Let me know if you have found solution for this.

PaoloF

Hi.

I don't know if your expectation could be possible. I converted some of the CAD layers (with data join) into a feature layer to display it over a basemap after a georeferencing operation.
Kind regards

SU00861536

Hi @PaoloF is you cad file overlay on map without any geoprocessing service. I am looking a solution to just upload the cad file and it overlay on map without any service....is it possible?

PaoloF

And finally I got success in Angular application.
I have just a little issue with access into organization content (I defined an API key but it seems not working, because if I omit it into code, I load successfully the layer just inserting the organization credentials).

But finally I have a working flow to convertthe CAD and load as map layer.

I really appreciated your precious efforts, suggestions and indications in helping me to gain my goal.

Thanks again, best regards.

PaoloF

Hi and thanks for your suggestion.

I have finally got CAD map as layer into a sample JS application, now I have to understand how to move that code into Angular application. I will update you.

Thanks again.

DougSims_GT

I'm not familiar with the ESM version of the JS API, so I don't know if I'll be much help. I didn't even know you could add a layer using the portal ID. I usually specify the service URL for the feature layer. Just glancing at it looks like it should work though. I've only used the portal Id add an entire map to a web page.

My suggestion would be to see if the layer will display in a sample vanilla JS web page to narrow down if the problem is in the Angular app or in the feature layer. The problem could be permissions or some other rendering issue.

PaoloF

Thanks for your continuos support.
I got that video, but having only the CAD data I haven't understood a crucial step that I understood looking at this one

https://youtu.be/dZE9USM6FH8

Here I discovered the step regarding Data Export Features that creates a new layer which is shareable as Feature Layer into Organization content.
Reached this point I created an Angular test application, but now I have the issue regarding how to load that feature layer as one of the map displyed in my web app.
This is the code I wrote:

import {
  Component,
  AfterViewInit,
  ViewChild,
  ElementRef,
  Input,
} from '@angular/core';

import Config from '@arcgis/core/config';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import Zoom from '@arcgis/core/widgets/Zoom';
import BasemapToggle from '@arcgis/core/widgets/BasemapToggle';
import BasemapLayerList from '@arcgis/core/widgets/BasemapLayerList';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import TileLayer from '@arcgis/core/layers/TileLayer';

@Component({
  selector: 'app-MapViewer',
  templateUrl: './MapViewer.component.html',
  styleUrls: ['./MapViewer.component.scss'],
})
export class MapViewerComponent implements AfterViewInit {
  @ViewChild('mappa', { static: false }) viewNode: ElementRef;
  map: Map;
  mapView: MapView;
  zoomControl: Zoom;

  constructor() {}

  @Input() lat?: number;
  @Input() long?: number;
  @Input() zoom?: number;

  public addLayer(idItem: string) : void {
    let layer = new FeatureLayer({
      portalItem: {
        id: idItem
      }
    });
    this.map.add(layer, 0);
    let basemapLayerList = new BasemapLayerList({
      view: this.mapView,
    });
    // Adds the widget below other elements in the top left corner of the view
    this.mapView.ui.add(basemapLayerList, {
      position: 'bottom-left',
    });
  }

  ngAfterViewInit() {
    Config.apiKey =
      'MY-API-KEY';

    this.map = new Map({
      basemap: 'satellite',
    });

    this.mapView = new MapView({
      container: this.viewNode.nativeElement,
      center: [this.long, this.lat],
      zoom: this.zoom,
      map: this.map,
      ui: {
        components: ['attribution'],
      },
    });

    this.zoomControl = new Zoom({
      view: this.mapView,
    });

    this.mapView.ui.add(this.zoomControl, 'top-right');

    this.addLayer('MY-ORGANIZATION-ITEM-ID');
  }
}

but no layer appears over the basemap.

MY-ORGANIZATION-ITEM-ID is the code I found into ArcGIS Online URL of the feature layer item:

https://<orgname>.maps.arcgis.com/home/item.html?id=<MY-ORGANIZATION-ITEM-ID>
Any suggestion? What am I doing wrong at this time?

Have a nice day, my work one is finishing...

Best regards.

DougSims_GT

Once the CAD map is in ArcGIS Pro (or ArcMap), then you'll need to run a geoprocessing task to convert the CAD linework (or points) to the appropriate features in a geodatabase.

Once you have the layers in the map sourced from a geodatabase, then you'll need to publish only those layers to a hosted feature service. You can't publish raw CAD data.

I thought there was a training course on ESRI's site about this, but I can't find it now. Here is one that shows one way to convert the CAD data to feature layers tough. https://youtu.be/Kwk5ndihFd0

PaoloF

Thanks for your reply.

I tried following your directions, but the problem is just how to share the polylines from the CAD map online.
These are the steps I made:

- created a Map project

- set Imagery as Basemap to help me into georeference procedure

- addition of the CAD DXF file dragging onto map from Catalog view

- georeference of the CAD over the imagemap through definition of two control points

And here is the problem: trying to share (right clicking on CAD polyline layer and selecting Share as Web layer I got these following errors during Analyze phase:

00102: Selected layer does not contain a required layer type for web feature layer
24078: Layer's data source is not supperted: <CAD file polyline>

My goal is to have a portal item to load as layer over a basemap into an Angular application.

I really appreciate your effort to support my requests.

Best regards.

DougSims_GT

You'll need to convert the CAD features into appropriate geodatabase features (point, line, polygon) and then publish them to arcgis online or enterprise. Than the layers will be able to be displayed in a web front-end.

Unless you are wanting to preserve the way the CAD map looks, then you can render the CAD drawing into an image and georeference the image and upload it to arcgis online or enterprise. That would be a sub-par experience in my opinion though.

There may be other libraries or tools that will do what you are asking, but going through ArcGIS Pro and using the JS API from ESRI will require you to get the CAD data in a format that the API can understand (and published in a location it can read the data).

If you have a large number of CAD files that need this to happen to, I would suggest looking into the Data Interoperability extension and setting up a data translation from CAD to feature layers. That is not a web front-end task though.

PaoloF

Thanks for your reply, but it's just how to realize the export operation to a kind of layer (I thought as feature layer) that I don't understand.

In export procedure I found just a generic Layer file as available choice, both as item in online organization and as local file. I searched around into documentation, but I haven't found anything useful to understand how to choose a particular kind of layer as export format.

Best regards.

BenElan

In order to load the data into the JS API it needs to be in the form of one of the layers described in this doc:

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html

The doc has a table that describes the capabilities of the different layers. For most of the layer options you will need to use ArcGIS Pro to publish the layer to ArcGIS Online or Enterprise. There are a few options that allow you to host a file on your own web server (CSVLayer, GeoJSONLayer, etc)

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.