webmap | Live map for FiveM and RedM servers

You need to map port 5432 on the container to a port on the host and connect through that.

Let's say you want to use port 55432 on the host. Then you'd add the parameter -r 55432:5432 to your docker run command and then connect to port 55432 on your docker host machine.

You also need to allow incoming connections on port 55432 on your host machine's firewall to be able to connect from outside the host.

Add a while True and break when the code is done:

Sorry for not directly responding to your described error, but I would not use esri-loader with newer versions of ArcGIS for JavaScript API. Why not npm as ES modules which do not require a separate script loader?

Build with ES Module

This way you can do simple imports like this:

import WebMap from "@arcgis/core/WebMap";

Here are the initial setup instructions:

Install instructions

Finally, here is a sample react app from Esri using exactly that:

Esri React App example

Your path to MapView incorrect, you miss views directory. Try import MapView from "@arcgis/core/views/MapView"; like in official docs

If you just want to create the default popup template (the table with all the fields), then you just need to use FeatureLayer function createPopupTemplate, it will do everything for you (ArcGIS JS API - FeatureLayer createPopupTemplate).

Now if you want to do some extra configuration, you can use the same method or popupUtils method, wich has an extra parameter.

Here is an example I made for you to show a possible use, in there all I do is to change alias values to make it look nicer.

The problem that you are having is because you do not have a node for the image, screenshotImage is no on the component.

I am not sure how you want to show the image, so I will use this example I made for you.

You need to think of the popup template as a descriptor for individual features. As the name implied, is a template for presenting the information of a single feature.

In that way the correct content for the popup template in your code should be,

• the field content, to generate a field:value table, where you set which fields will appear and how using FieldInfo; here the key is the fieldName property with relates to the name of the field that you set in the FeatureLayer,

You have many ways to add your data to your map. You could use a FeatureLayer or a GraphicLayer, you could even add it to the view graphics collection.

I will propose you to use FeatureLayer in this example I made for you. Although it is not using Angular, you can easily translate to your code. To use FeatureLayer with data on the client you need to:

• set the source property with a collection of Graphic, in the example I use an array of Object (it auto cast to the expected),
• set the geometryType, in this case point,
• and the objectIDField.

I assume that you have the data at the start, if you need to add/update/delete data while running the application, you can use the method applyEdits of the FeatureLayer.

ArcGIS JS API - FeatureLayer

Example:

I think that in your code you are having a context problem with the variable i. When the popup shows the value of i always gonna be vehicleData.length.

So you can solve the context problem using let instead of var, but I will suggest you another approach.

Declare template, the popup template, outside the loop, and use two new properties that we will add in the next step.