This class holds all properties and functions necessary to create a spokenGeoJSON instance. A spokenGeoJSON class instance creates a leaflet.js map which is populated with data from a geojson and then after a button click watches the device's location and gives audible statements regarding the current Location being inside of outside of the polygons that make up the geojson.

This class function has the following behaviors:

  • It calls leaflet.js for a map.
  • NoSleep.js to stop the page from going to sleep when the user is not touching the screen.
  • The browser native SpeechSynthysis API is used to generate speech.
  • The device's current location is found using the browser's native getLocation browser API.
  • Data for the map is added after class object instance initiation. This is currently being done by a function iniated during a window.addEventListener function that starts on page load.
  • The class methods below are approximately but not exactly in the order they are called when in use.

Several functions are designed to be called via HTML buttons that control behavior.

  • getLocation() can be kicked off by a "start" button and it starts location finding and placing markers on the map as well as the loop that runs constantly.
  • stopSpeechUtteranceAndLoop() stops the speaking part but the location finding and map edits continue.
  • changeSpeakingRate() changes how often and when speaking occurs.

To fake movement while testing the application, the triggerNavigatorGeoLocation(moveDirection=false,fakeLocation=false,moveAmountInDecimals=0.1) function can be used see defintion below.

new spokenGeoJSON(divIdForMapString: string): undefined
divIdForMapString (string) , This argument is the string value of the divID in the HTML where the leaflet.js map will be placed.


Currently, all properties of the class object are public and can be populated by simple assignment. Many of the them are changed by internal methods of the spokenGeoJSON class.

These are properties of the spokenGeoJSON class function.

divIDForMap (string) : , This property is the divID of a div on the html page you want the leaflet.js map to appear. It accepts the one argument used to initiated the class, which is the string of the Div element where the map will appear.
polygons (object) : , This property holds data from geojson that is put into the leaflet.js map. At class instance creation, it only has an empty string. An outside function must populate it.
mapCenterAtStart (array) : , This property is the center of the map when first created in order of [long, lat]. Default is [-95.498,29.7604]
currentPositionPoints (object) : , This property is an object in the format of turf.js points that represents the lat/long of the current position of the device.
mapConfig (object) : , This property is min and max magnification of the map. Default value is [-95.498,29.7604]
zoom (integer) : , This property is the initial zoom level of the map
lat (float) : , This property is a float representing a latitude value. It is initially populated with the map center, but once location tracking is started will reflect the most recent location of the device.
lng (float) : , This property is a float representing a longitude value. It is initially populated with the map center, but once location tracking is started will reflect the most recent location of the device.
map (object) : , The leaflet map object that is created by the following code L.map(this.divIDForMap, this.mapConfig).setView([this.lat, this.lng], this.zoom); . For this to work, leaflet.js needs to be loaded via a script tag elment already.
tilelayer (object) : , The tiles for the map background from openstreet map. This can be changed on the fly after class instance creation.
lastSpokenState (string) : , A string representing the last location state that triggered speech.
lastMeasuredLocationState (string) : , A string representation of the latest measured location state. This means lat/long location converted into a location state by comparing the location to polygons in the geojson.
lastSpokenStateAtTime (object) : , A unix date time object created by new Date() code. This is updated on class instance creation and whenever a location state has been spoken. This time is compared to later times to determine if enough time has passed to speak again when location state is spoken at some interval as opposed to only when a new location state is detected.
introductionSpeechSaid (boolean) : , A true or false boolean value for whether or not the introductury text has been said yet. This starts off as false and converts to true once the introductury text has been said. It should be converted back to false if speaking and/or location has been stopped due to button bush and then restarted via a different button push.
sayLocationInLatLong (boolean) : , Determines whether lat long is said or not. Default is to not say it where has a value of false.
speechTool (object) : , This is the result of the code window.speechSynthesis and creates a speech synthesis object available for use by any function in the class, so it doesn't have to recreated each time. Speech synthesis is a native browser capability.
withinFloodplainSpeak (object) : , This is a placeholder for a speechSynthesis object
notWithinFloodplainSpeak (object) : , This is a placeholder for a speechSynthesis object
sayEveryMeasurement (boolean) : , If false, it only speaks when there is a location state change. If true, you get speach every X unit of time as defined by the property speakHowOftenIfNotEveryInSeconds.
speakHowOftenIfNotEveryInSeconds (integer) : , An integer of how many seconds to wait from when a location state is spoken until you say the location state again. This only applies if sayEveryMeasurement is true. Otherwise, the object instance will only speak when a location state has changed. For example, outside a floodplain polygon vs. inside the floodplain polygon.
speechStoppedDueToButtonClick (boolean) : , A true or false for whether a button has been pushed to stop speaking. True = no speaking. false = speak when conditions require it based on other configuration.
interval (object) : , This property holds an object created by calling the native setInterval function that calls the insideLoop function every X time interval. The time interval is set by property speakHowOftenIfNotEveryInSeconds.
undefined: , nothing is returned
Instance Members
onEachFeature(feature, layer)
getLocation(withinFloodplainSpeak, notWithinFloodplainSpeak)
triggerNavigatorGeoLocation(moveDirection, fakeLocation, moveAmountInDecimals)
speakAndUpdate(synthesizedSpeechUtterance, locationState)
changeSpeakingRate(howOften, newtimeInterval)



Merely toggles show or hide on the dropdown list of buttons used to select rate at which "no change" messages are spoken.

showOrHideItemsInTimingList(): undefined
undefined: , nothing is returned

// Close the dropdown of class .dropbtn if the user clicks outside of it

onclick(event: any): undefined
event (any)
undefined: , nothing is returned



This function calls the javascript built-in fetch function to get the geojson data loaded and creates an instance of the spokenGeoJSON class and then adds the data to it as 'polygons' property before calling the onEachFeature method of the spokenGeoJSON class that applies that data to the leaflet map intiated when the class instance was first initiated.

loadDataAndInitiateClassInstance(urlToData: string): undefined
urlToData (string = "./data/FEMA_FIRM_FloodPolygons.json") , A string representation of the URL to the data file. Default is "./data/FEMA_FIRM_FloodPolygons.json"
undefined: , nothing is returned



This function starts calling the initial JavaScript functions after the HTML is loaded. Specifically it calls the loadDataAndInitiateClassInstance () function.

undefined: , nothing is returned