Rpg Maker Developers Group

Greetings.
I am new at RMMV, and aims to develop a (simple) rougelike game. To achieve this, first I have to understand the map loading mechanism... (since rougelike style indicates highly random map)

I know how to program with javascript, and had read this post about understanding the map structure.
https://forums.rpgmakerweb.com/index.php?threads/understanding-map-data.83140/

Also, I know how to store map data into game variables and restore it when in need.
But my problem is, I don't know how the map loading mechanism works. For example, I have a map looks like this:
Protected download

And I want the map turn into something like this (just for exercise) after triggered some events:
Protected download

Actually, I can already achieve that by modifying $dataMap.data by running some javascript codes. However, the map changes back immediately after I opened & closed menu.

So my question is, how can I replace a map data when entering area, also keep it the same when I open/close menu, or after other possible actions? (map data can be generated by algorithm)