Map

Map constructor. All Map subclasses should call this first with super(...).

TODO:

• With the type of the map we can do an if statement inside constructor to use or not some of the variables.

Aesthetic objects that were saved.

This is the Gisplay API Background map wrapper. It contains the background map provider object to access it's methods (zoom, coordinates,etc). This map(Gisplay Map) will be drawn over the background map(bGMap).

JSON object with the geometry that was read from the file.

All the options available in the Gisplay API.

Polygons do/do not exist. This is used to know if it to create a rtree or not on buildTrees method.

This map unique identifier.

KdTree object to hold that will be used to calculate the closest point to the coordinates where the user made a click.

See:

• Diogo's thesis Page 61.
• https://github.com/ubilabs/kd-tree-javascript

This is the maixmum value found on the dataset. The final value for the break. E.g. [2, 37[ 37 is the max. Used for PSymbol Map and Change Map because on those maps it's important to take in consideration this values to define the Feature color.

See:

• Diogo's thesis page 63 5.1.3

This is the minimum value found on the dataset. The initial value for the break. E.g. [2, 37[ 2 is the min. Used for PSymbol Map and Change Map because on those maps it's important to take in consideration this values to define the Feature color.

See:

• Diogo's thesis page 63 5.1.3

RBush(Rtree implementation) that is used to calculate the polygon closest to the coordinates where the user made a click.

See:

• Diogo's thesis page 61.
• https://github.com/pelias/polygon-lookup
• https://github.com/mourner/rbush

Holds the points for each Aesthethic object.

This object holds for each point it's long, lat and associated properties. This points will be used by k-d Tree. And k-d Tree is used to find the closest point to where the user clicked.

See:

• Diogo's thesis page 64+

M17) Creates a Legend element suitable for polygons based on the Aesthethic objects. Should be overriden by subclasses.

M19) Receives the dataset as parameter. This dataset in each row contains geometry and associated properties, then it creates one tree either for points or polygons. This tree can be k-d Treee or RBush(RTree)

See:

• Diogo's thesis page 62

M12) Calculates the class breaks using the algorithm given(k-means, quantile or equidistant). There will be as many class breaks as number of classes(numberOfClasses) given as input.

See:

• http://gka.github.io/chroma.js/#chroma-limits

M22) Clear current buffers to preset values.

See:

• https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/clear

To be called when the user clicks on the map.

M14) Creates a Feature and then calls a method to insert said Feature in one or more Aesthetic objects.

See:

• http://geojson.org/geojson-spec.html#geometry-objects

M4) Creates a canvas element and WebGL associated information.

M10) Defaults for each map. Subclasses should override this method.

M21) Draw map function. Must be overriden by subclasses.

M24) Receiving an Aesthetics object, draws the borders contained in it's Features, aplying the color specified in the Aeshteic object for the line color(Aeshteic.strokeColor).

M26) Receiving an Aesthetics object, draws the points contained in it's Features, aplying the values specified in that Aesthetic object visual variables (color and size).

M27) Receiving an Aesthetics object, draws the points contained in it's Features, aplying the color specified in the Aeshteic object for the line color(Aeshteic.strokeColor) and the size of the point is based on the attribute value and the specified limits.

M23) Receiving an Aesthetics object, draws the triangles contained in it's Features, using the color that the Aesthethics object has.

See:

• Diogo's thesis Page 58/59

M18) Returns an array of Aesthetic ids that tells us the objects where the Feature belongs.

Returns the colors for this map given the number of classes and the nature of the data (sequential, diverging or qualitative).

M3) Initializes the API by: creating canvas, the WebGL program and setting up all needed events.

M17) Inserts the Feature into one or more Aesthetic objects. If the Feature does not fit in any Aesthetic then does nothing.

M20) Similar to insertFeature, in this case inserts a group of Features like it was only one. It creates one WebGLBuffer with all the points instead of one WebGLBuffer per point. This method should only be used when we already grouped the Features by Aesthetic class (fitFeature() method). This method exists to provide one alternative less expensive in terms of memory for low end devices. Used only on Dot Map because on those we can easily end up with millions of different Features.

M13) Loads GeoJSON object that came from the file uploaded by the user. Extracts the Features present in the geometry object and inserts them in Aesthetic object(s) This method will create and insert features to Aesthetic objects and build trees of relationships between points or polygons.

See:

• https://www.dashingd3js.com/lessons/geojson

M1) Loads user and default options. For each case if it isn't provided by the user, then it uses the default option. 1st method to be called.

M9) Method that executes all the process associated with the creation of the thematic map.

M11) Creates Aesthetic objects. If there's the need to calculate the class intervals, the method calcClassBreaks is called

This function should be implemented by any subclass that wants to use another way of processing data. By default it loads GeoJSON but if the user wants to load another type of data it should do so by implementing this method. A function similar to loadGeoJSON should also be implemented

M15) Deals with polygon triangulation.

See:

• http://www.macwright.org/2015/03/23/geojson-second-bite.html#polygons

Search the rtree for the closest point from the lng, lat that was clicked.

Search the rtree for the closest polygon from the lng, lat that was clicked.

This method will set all matrices needed to compute each point/vertex position. This will use the Before sending the matrix to webGL we change the last column transformation in X and Y to the last row X and Y because WebGL is column major. See MMatrix[6] =...

M8) Setup all events used by the API. Right now the API uses: drag, zoom and click events. This events will be fired by the background map provider and we can use them to draw(zoom and pan) or alert information(click). Pan/Zoom = move, click = click rtree will be used to find the closest polygon to the where the clicked event happened. kdtree will be used to find the closest point to where the click event happened.

See:

• https://www.mapbox.com/mapbox-gl-js/api/#events
• http://stackoverflow.com/a/34349737

TODO:

• This method is doing uneccessary job if the user set interative to false and mapOnClickFunction is undefined.

M2) Calls the Background Map Wrapper to create the loader to be used later when the user feeds data to the API.