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 <div> tag within our HTML doc which will be used as our target element. I’ve decided to set my DIV’s id as place-search to keep things simple:

Step 2:

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

Step 3:

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

Breaking down this event handler, we’ve passed  e 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 e.data.place object. I’ve set the variable p to the e.data.place 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 stateOrCountry which says:

If p.place.state is true (not null / undefined), use p.place.state, otherwise use p.place.country.

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 wxbloxLocalLayout.load() method initiation where wxbloxLocalLayout 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:

WxBlox-PlaceSearch-Example

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: