How We Implemented High-load Real Estate Website with Vue.JS and Google Maps
In this article, we’re going to talk about our experience of implementing the interface of a website for renting and buying real estate in a picturesque, Mediterranean country Malta. The real estate website is called “RBMalta” and if you’re hearing about it for the first time, you should check out the case study on this project.
With that said, let’s see how we were able to implement the aforementioned functionality.
Requirements
User Interface
First of all, we needed to implement the UI part of the website. To be more exact, the task was to implement the following things on the same page:
- maps with markers;
- filters;
- filtering results in the form of a list of elements.
The results of filtering had to be relevant at all times (both on the map and in the list of elements). In other words, the elements to be filtered had to be displayed both on the map and in the form of a list.
The frame of the map (visible area) is also basically a filter: the only properties go to the list are the ones that are currently on the map.
Customization
Second, it was highly important to ensure adequate customization. According to the client’s requirements, the system had to be able to customize both the map and the elements on it. For example, the ability to display markers in the form of circled areas with misplaced and randomly centers. The purpose of such feature is to hide the precise location of real estate and show only the neighborhood that it’s located in.
User Experience
Third, we needed to implement some fine UX. As a rule, such interfaces contain many filtering and other elements, which update quite often. As a result, the entire client-side part of the website is exposed to frequent updates. For example, changing filter values, zooming the map, etc.
Thus, our web development team needed to implement a smooth and high-load interface, ensuring adequate customization capabilities of the UI along with complex event management system.
So how did we solve all of these challenges? More importantly, which tools did we choose to do that?
Long story short, we chose Vue.JS and Google Maps (this you already knew about from the title of the article). From our experience, this technology and the service are perfect solutions when it comes to such tasks.
Implementation
Based on the requirements, the map on the website had to be able to:
- display markers in the form of circled areas, fitting the overall design in terms of color/look;
- display clusters of markers (group closely located properties to one number with a number inside);
- (when clicking a marker) open the window with info about the real estate attached to the marker;
- (when clicking a cluster) open the window with the list of real estate within the cluster, user may click through properties in the overlaid window;
- update the clusters and markers every time the server sends back the response with new data
In addition, we needed to make sure that Google API isn’t used more often than needed (to decrease the server load and stick to the free plan).
The first thing we did was initialize the map and connect it to a prewritten piece of code in which it’s deployed. We also wrote a function that creates and returns the object of the map according to specified parameters:
In this code sample, the function takes the following arguments:
- id — the identifier of the DOM element, to which the map is mounted.
- zoom — the map scaling ratio set by default;
- center — the coordinates of the center of the map.
The received data is passed to the map builder in the form of an object of options with extra fields. For cluster management, we used the library “Marker Clusterer.” It is this library’s builder that we pass the received map object into.
Here is a simple example of receiving the marketClusterer object:
The builder receives the following elements:
- map — the google maps object;
- initialMarkers — the array with initial markers.
As a result, we created a convenient tool for cluster management. Using the methods markerCluster.addMarkers(markers) and markerCluster.clearMarkers() allowed us to manage the set of markers and clusters on the map. The method markerCluster determines whether it’s necessary to create a cluster depending on the current zoom ration and the set of markers.
To implement a circled-area marker, we used the library called “node-MarkerWithLabel”. Here is an example of how such marker is created:
But there is more. We customized the class “marker-style” using CSS to make the marker visible. Also, we created the object “InfoWindow” so that when clicking the marker, the information about this or that piece of real estate would be displayed. For this purpose, we used the following builder:
Here is how the event of clicking the marker looks:
Clicking a marker sets the content of the object “infoWindow” passes the created DOM element containing the information about the real estate to the object. The window is displayed using the method “infoWindow.open()”.After that, the map object and the marker are passed as arguments.
Next, we needed to make that when clicking a cluster of markers in the object “infoWindow”, a window would show. For this purpose, we added a click processor using the following line of code:
Using the method “markerClusterer.getMarkers()” in the processor “handler” enabled us to receive information about markers in a cluster. Based on that information, we can build a DON element with a window, which is passed to the object “infoWindow”. The idea is the same as with the single marker.
When receiving data from the server, an array of markers is created. The click processor is added to the array, which, in its turn, is passed to the method “markerCluster.addMarkers()”. We used the library “MarkerWithLabel” to implement that.
The object “markerCluster” add the markers to the map and creates marker clusters , if necessary. When clicking the markers, the map displays a list of real estate in the form of a window.
Using the aforementioned techniques, we can implement an interface builder responsible for the general map operation. In addition, we can integrate it with Vue.JS. Here is how we can do it.
There is a Vue method “mounted.” It’s called upon the initialization of a Vue component. We add the following code to that component:
As a result, both the map and the object that implements the interface for managing clusters are available from any Vue method.
But there is more. Inside the object “markerCluster” we implemented the method “addMarkersToCluster,” to which the result from the server is passed. In that method, an array of markers is created and then passed directly to the object. At the same time, using the map object “map” allows for defining:
- current map center (this.map.getCenter())
- zoom ratio (this.map.getZoom())
- coordinates of the upper right and the lower left corners of the map (this.map.getBounds()) — they are needed to pass the current visibility scope to the server
Passing identical data to the cluster and the Vue method that is responsible for display of the relevant real estate elements synchronizes the objects on the list and the elements on the map.
Conclusion:
Leveraging the best web development practices, we were able to implement a great website for our client. Speaking of Vue.JS in particular, it has proven itself as a quite versatile technology allowing us to:
- create an easy-to-use way of managing map elements.
- achieve flexibility and ease of development. The Vue.JS framework comes with everything necessary to implement a high-load interface.
- implement great UX. The interface of the website is extremely user-friendly and snappy at the same time.
So if you’ve been looking for a technology that would allow you to do exactly that, Vue.JS is the perfect option.
We hope you enjoyed today’s article. If so, please support it with claps and by hitting the subscribe button below!