Within my controller, the following code is present:
public async Task<IActionResult> Index()
{
HttpResponseMessage responseMessage = await _httpClient.GetAsync(_getDataControlerApiUrl + "/getUserData");
string stringData = await responseMessage.Content.ReadAsStringAsync();
var options = new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
};
List<UserNeighborhoodData> data = System.Text.Json.JsonSerializer.Deserialize<List<UserNeighborhoodData>>(stringData, options);
string aor = data.Where( x => x.Username == User.Identity.Name).FirstOrDefault().AOR;
ViewBag.UsersData = JsonSerializer.Serialize(data.Where(x => x.AOR == aor).ToList());
return View();
}
I aim to pass this list to the View so that when loaded, I can incorporate markers onto a map.
@{
var userData = (List<UserNeighborhoodData>)ViewBag.UsersData;
}
<div id="map" style="margin:10px; width:70%; height:770px;"></div>
<script>
mapboxgl.accessToken ='MY-KEY';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [19.6860534, 45.1163156],
zoom: 7.2
});
map.addControl(new mapboxgl.NavigationControl());
window.onload = function () {
data = @userData
var i;
for (i = 0; i < data.Count; i++)
{
var popup = new mapboxgl.Popup({ offset: 25 }).setText(
"Username:" + data[i].Username + "Energy to grid in this month: " + data[i].CurrentSoldEnergyInAMonth
);
var el = document.createElement('div');
el.id = 'marker' + i;
new mapboxgl.Marker(el)
.setLngLat([data[i].Longitude, data[i].Latitude])
.setPopup(popup) // sets a popup on this marker
.addTo(map);
}
}
However, queries have arisen as it seems data cannot be passed in such a manner. I am now at a standstill and unsure of how to transmit data from the controller to JavaScript for marker creation purposes.