noncomputable / AgentMaps

Make social simulations on real maps! Agent-based modeling for the web.
https://noncomputable.github.io/AgentMaps/
BSD 2-Clause "Simplified" License
918 stars 40 forks source link

Minor fix in documentation #9

Open kcf-jackson opened 4 years ago

kcf-jackson commented 4 years ago

Hi Andrew,

Thank you for the amazing work on building simulation systems on real-world maps.

I would like to report two minor issues regarding the documentation.

Issue 1 In the documentation, under the section Generating buildings (and also the devdocs version), the bounding box is listed as the second argument

agentmap.buildingify(my_data, [[43.3071, -88.0158], [43.2884, -87.9759]]);

but in the implementation, it seems to be the first argument https://github.com/noncomputable/AgentMaps/blob/5f0686ec87e8eb1b515fc73c5836619f55f8d109/src/buildings.js#L28

The same issue also appears in the quick start guide.

As a result, the console throws an error Uncaught TypeError: OSM_data.features is undefined when the example is ran.

How to reproduce it: Here is the relevant HTML file.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
<script src="https://noncomputable.github.io/AgentMaps/resources/map_data.js"></script>
<script src="https://unpkg.com/agentmaps@2/site/dist/agentmaps.js"></script>
</head>

<body>
<div id="demo_map" style="height:400px"></div>

<script>
    let bounding_points = [[39.9058, -86.0910], [39.8992, -86.1017]]; 
    let leaflet_map = L.map("demo_map").fitBounds(bounding_points);
    L.tileLayer(
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 
        { attribution: "Thanks to <a href=\"http://openstreetmap.org\">OpenStreetMap</a> community" }
    ).addTo(leaflet_map);
    let agentmap = L.A.agentmap(leaflet_map);
    agentmap.buildingify(map_data, bounding_points);
</script>
</body>
</html>

How to see it: Open the html file and check the error in the console. Expected behavior: Bounding box should come first in the documentation. More details: N/A

Issue 2 In the quick start guide, near the bottom,

agentmap.controller = function() {
    if (agentmap.state.ticks % 300 === 0) {
        agentmap.agents.eachLayer(function(agent) {
            let random_index = Math.floor(agentmap.units.count() * Math.random()),
            random_unit = agentmap.units.getLayers()[random_index],
            random_unit_id = agentmap.units.getLayerId(random_unit),
            random_unit_center = random_unit.getBounds().getCenter();

            agent.scheduleTrip(random_unit_center, {type: "unit", id: random_unit_id}, 1, false, true);
        }
    }

    agent.moveIt();
}

In the agent.moveIt() line, agent is not bounded. The console throws Uncaught ReferenceError: agent is not defined. Also there is a missing closing round bracket three lines above. Just a typo.

How to reproduce it: Continuing from the last HTML, add to the last script tag

    // continue from the HTML above
    agentmap.buildingify(bounding_points, map_data);   // This line is fixed.
    agentmap.agentify(50, agentmap.seqUnitAgentMaker)
    agentmap.controller = function() {
        if (agentmap.state.ticks % 300 == 0) {
            agentmap.agents.eachLayer(function(agent) {
                let random_index = Math.floor(agentmap.units.count() * Math.random()),
                    random_unit = agentmap.units.getLayers()[random_index],
                    random_unit_id = agentmap.units.getLayerId(random_unit),
                    random_unit_center = random_unit.getBounds().getCenter()
                agent.scheduleTrip(random_unit_center, { type: "unit", id: random_unit_id }, 1, false, true)
            })  // adds a closed round bracket here
        }
    agent.moveIt()
}
agentmap.run()

How to see it: Open the HTML file and check the error in the console. Expected behavior: agent.moveIt() should be

agentmap.agents.eachLayer(function(agent) { agent.moveIt(); } )

More details: N/A

Thank you again for your work. Your doc explains the library so well. It is among the best I have seen.