` in which to embed the Leaflet map * Loads the AgentMaps script at the end ```HTML

``` Assume we have the GeoJSON of a neighborhood stored in a variable like this, where the ellipses stand in for a list of map features (like streets): ```javascript let map_data = { "type": "FeatureCollection", "features": [ ... ... ... ] }; ``` You can use the sample data from the demos [here](../resources/map_data.js). Have the top left and bottom right corners of a rectangle containing the neighborhood stored as an array of the corners' coordinates (i.e. [[lat, lon], [lat, lon]]): ```javascript let bounding_points = [[39.9058, -86.0910], [39.8992, -86.1017]]; ``` Create a Leaflet map in the "demo\_map" `

` of our HTML document: ```javascript let map = L.map("demo_map").fitBounds(bounding_points); ``` The map will be empty, so tile it with OpenStreetMap's map tiles to see what's where: ```javascript L.tileLayer( "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "Thanks to OpenStreetMap community", } ).addTo(map); ``` Now that we have our map in place and the geographic data for our neighborhood in hand, create an Agentmap from the map: ```javascript let agentmap = L.A.agentmap(map); ``` Now generate buildings and functional roads on the map based on the geographic data: ```javascript agentmap.buildingify(map_data, bounding_points); ``` Now you can place agents on the map according to the rules of a custom agentFeatureMaker function. We'll use the built-in seqUnitAgentMaker, which just assigns a number to each agent it generates in sequence, counting up from 0 to the number of agents you want, and places each agent in the center of the unit with the same index as that number in the list of units. We'll make 50: ```javascript agentmap.agentify(50, agentmap.seqUnitAgentMaker); ``` The simulation will start once we call `agentmap.run()`. The simulation is divided into consecutive "ticks", starting at tick 0. On each tick, the following happens: * The Agentmap runs its user-defined `Agentmap.controller()` (which we haven't defined yet) * Each agent runs its own user-defined `Agent.controller()` (we'll leave that empty) * Before and after each step an agent takes during the tick, it runs its own user-defined `Agent.fine_controller()` (we'll leave that empty too) The number of ticks elapsed at any point in the simulation is set in `agentmap.state.ticks`, functioning as a kind of clock. We can call `agentmap.pause()` to stop the simulation, during which the ticks elapsed won't change, and then `agentmap.run()` to continue it. So, let's define a controller function for our Agentmap: ```javascript agentmap.controller = function() { }; ``` What do we want to happen on each tick? That is, what will we put in the controller function's body? A simple simulation will involve the agents moving to a random unit every 300 ticks. So first, we will have the `Agentmap.controller` check if the current number of ticks is a multiple of 300, as we only want anything to happen every 300 ticks: ```javascript if (agentmap.state.ticks % 300 === 0) { } ``` Then, if number of ticks _is_ a multiple of 300, we want to tell each agent to do something, so we will set up a loop that operates on each agent: ```javascript agentmap.agents.eachLayer(function(agent) { } ``` Now, for each agent, we'll generate a random number between 0 and the total number of units, and store the unit whose index is that number, its ID, and the coordinates of its center: ```javascript 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(); ``` Then we will schedule for the agent a trip to that unit's center at approximately 1 meter per tick: ```javascript agent.scheduleTrip(random_unit_center, {type: "unit", id: random_unit_id}, 1, false, true); ``` We want the agent to move along whatever path it has scheduled at each tick, so we will add the following to the end of our controller function, outside of the 300 tick condition: ```javascript agent.moveIt(); ``` Altogether, our Agentmap's controller will look like this: ```javascript 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}, false, true); } } agent.moveIt(); } ``` Finally, now that we've got our Agentmap, buildings and agents loaded, and a controller defined, we can add: ```javascript agentmap.run(); ``` Once we load our HTML document, the simulation should begin and we can watch our agents move around the neighborhood.