@blaze-cms/plugin-google-maps-fe

Google maps Blaze plugin

Base files for Google maps plugin in FE

Helpers

addZoomListener

This function builds the shapes array with any additional information needed from the parent (entityGroups). It calls the function setShapes while also setting the listener for the zoom_changed event so the setShapes is called again if the zoom level changes.

buildMapTypeIds

Used to configure Google maps view types. By default, this control is visible and appears in the top left corner of the map. There are toggles in admin for enabling/disabling satellite and terrain modes.

buildQuery

In this helper we take advantage of the object entityConfigs that is returned from the setEntityConfigs function. For each entity type, we read these three properties action, ids, propsQuery. We put all the entity ids in one array. We call another function that should build the query and we pass it the entity identifier, action and propsQuery so we could expect it to return something like this page: getPublishedPages(where: $where) { ${propsQuery} }. In the end we return the query that contains all the entity specific queries and the array of all the entity ids that will be passed to the query variables ({ where: { id: { _in: ids } } }) .

getImageIds

Returns an array of imageIds. It gets the imageIds from each entity type and adds it to one array and also checks if any of the entity records chosen to display (itemsToDisplay in shape) has the image set. If that is the case, add that imageId to the array as well.

getPath

Helper that receives the paths array of objects with latitude and longitude and returns an array with the correct format. Probably could be improved if the latitude & longitude were stored under the names lat, lng so there would be no need for this helper, although the field names would be abbreviations instead full descriptive names. If this change were to be made, it would require a database update of records.

setEntityConfigs

This function goes over the entityGroups array and builds an object that for each entity type sets:

• action (for the entity type, we get the getAllPublished or getAll action)
• propsQuery (props that will be used in the query, gets the propsToDisplay from the data summaries; it adds the url and/or imageId to the propsQuery in case the entity has the url/imageId in its properties respectively; adds the id as well so we can find specific entity record when putting shapes on map)
• ids (gathers all the ids of the chosen entity records of that entity type)
• imageIds (ids of images uploaded in a specific shape for that entity)

setMapOptions

Sets the map configuration based on the settings in admin. Map center, default zoom, min/max zoom etc. It also sets some custom styles.

setShapes

Function used to place shapes on the map. It is called on initial map load, if the map is in viewport so that we use the lazy loading functionality. It is also called every time the zoom level changes. For each shape it checks the min & max zoom level and if the current zoom is inside the range of that shape, the shape will be shown, otherwise no. That is also why everytime we add a shape to the map, we store the reference in the shapesArray so that we can then call the function clearShapes and remove all the shapes from the map on zoom level change.

There are 5 types of shapes we are showing on the map.

marker

First we check if the latitude & longitude are correct (they need to be numbers). For the marker it is possible to set an icon that will display instead of the default pin from Google maps. That is the iconUrl, that we set for the icon's url along with the size (can be set in admin or it will default to 50x50). We can set the label in the admin, that will display as a title on the marker when we hover over it. In all the shapes we call the addShapeListeners that will be explained further down.

polyline

Function getPath is called to get the paths in the correct format. If there is data in the array, the polyline is added to the map. setStyleOptions function is called for each shape type except marker and it's used to define custom styling to the shapes related to the stroke and fill.

polygon

Same as for polyline. The last point of the polygon doesnt need to have the same the coordinates as the first one, Google maps API will "close" the shape by default.

rectangle

For this shape, there are 4 values for each bound/corner. areRectangleBoundsNumbers checks if all of them are valid numbers and then adds the rectangle to the map along with any custom styling returned from the setStyleOptions function.

circle

First checks if the latitude and longitude of the center are correct and the value of the radius is a number, if yes - it shows the circle.

---

addShapeListeners

This function adds an event listener to display an info pane/window when we click on the shape, in case the enableInfoPane is set to true. If enableInfoPane is set to false and there is an url set for that entity, it should navigate to the url - when clicking on shape. When showing the info window, first it will close any already opened info window. That way it prevents that multiple info windows are open and that they overlap. In the Info window we display an image if the chosen entity record for the shape has an image set and the data summaries added through admin. The image and the data summary of type heading large will be links with url in case the entity has the url (valid for publishable entities).