November 21

Using PlaceSearch View with AerisWeather WeatherBlox

With our release of Aeris WeatherBlox, our clients are able to easily integrate weather data and maps into their websites. As users expand their integrations one common request is how to integrate the PlaceSearch view. Here’s a little guide that should get your PlaceSearch view up and running – and talking to other WeatherBlox components – in no time.

Getting Started:

For starters, I should mention the PlaceSearch view is only supported with the JavaScript method of integration.  However, you can integrate the JavaScript PlaceSearch view into the API version, but this exercise will focus on only using the JavaScript WeatherBlox.  This tutorial will assume you have an Aeris account and you’ve already added a WeatherBlox component (view or layout) to an HTML document.  If neither of these is true, feel free to sign up for a free developer trial, add a WeatherBlox layout to an HTML doc, and follow along!  Lastly, I’ll be using the Local layout.

Step 1:

Let’s create a tag within our HTML doc which will be used as our target element. I’ve decided to set my DIV’s id as to keep things simple:

Step 2:

Within your WeatherBlox tag, declare a variable that pulls in the PlaceSearch view with the appropriate constructor. Again, keeping things simple, I’ll name my variable and set the target element to the DIV we just created:

Step 3:

Next I’ll use the method to trigger my event handler function when the event takes place, which is triggered when the user selects a location from the search results:

Breaking down this event handler, we’ve passed   as an argument which is the Event object. We’ve extended the Event object within the WeatherBlox library to take the response received from the /places endpoint and store it into the object. I’ve set the variable to the  object in order to keep things clean for the next steps. In an attempt to support the city, state and city, country format, we’ve added a conditional statement and called it which says:

If is true (not null / undefined), use , otherwise use .

Now that we’ve accounted for the city, state and city, country scenario, let’s put the last piece into play and tell the PlaceSearch view to load the Local layout with our new location. In the example above, the last piece of code is the method initiation where is the variable I’ve declared for the Local layout. Within this method’s configuration, I’ve passed an object that contains our new location with the previously set variables. That’s it, you’re all done!

Full Example

Furthermore, the entire snippet, including the Local layout, would look something like this:



As a result, the code snippet will render something like this:

Hopefully, this tutorial was helpful, but if you have any questions regarding the capabilities built into WeatherBlox, please feel free to contact our support staff who will be happy to help.

Share this post:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.