Welcome to the Mission Control Panel! On this interactive map, you can view mission markers and access detailed information for each mission by clicking on buttons inside the popups. Everything is dynamically generated from JSON data, so there are multiple markers corresponding to objects in the JSON array, as well as detailed mission information.
I utilize two JSON files for this project. The "missioni.json" file contains details for populating missions' popups, creating markers, and setting up buttons. The "infomissione.json" file holds specific information about each mission. In my project, these two JSON files are linked via a common key: type code and mission code.
My current achievement is creating dynamic popups that can open modal dialogs from their buttons.
What I aim to do next is dynamically update the content of each modal dialog with the corresponding mission description.
Note: The HTML code is provided here along with scripts and libraries linked from CDNs. There are also images of markers (which can be replaced), CSS styles, and the two required JSON files located at the root directory for proper functionality.
<!DOCTYPE HTML>
<html>
<!-- Rest of the original text has not been changed -->
You can find the JSON files below:
missioni.json:
{
"missioni":
[
{"codmis":"10", "codtipo":"0001", "nome":"black-ops", "lat":"33.568488", "long":"-7.601811", "infobox":"<div ng-controller='ModalDemoCtrl'> <!-- More content -->"}
// Additional mission entries
]
}
infomissione.json:
{
"infomissione":
[
{"codmis":"10", "codtipo":"0001", "nome":"black-ops", "rate":"3","descrizione":"descrizione della missione black-ops"},
// Additional mission details
]
}
This is your unique Mission Control Panel setup: