How to create a weather app with zoom and pan in Justinmind
Want to design a beautiful weather app? Add in a zoom and pan map interface for an awesome user experience.
At Justinmind we love talking about the weather. And not just as awkward conversation filler, either. Everyone wants to know what the weather’s going to be like for our evening commute, for tomorrow’s game or for a weekend away in the mountains. So it’s no surprise that mobile weather apps are a popular category on app stores for all mobile platforms.
In this post, we’ll show you how to design a modern-looking weather app prototype including a simulated zoom and pan interface which users will love, whatever the weather.
Weather apps – a range of UI styles
While there are hundreds of weather apps out there – and tons of weather app concepts and prototypes – most tend to stick to a simple formula. The user chooses their location and views weather forecast data for the next few days using text and icons.
Some weather apps differentiate themselves with animated graphics and even haptics to illustrate current weather conditions. A graphic lightning strike which causes your phone’s screen to flash and vibrate may catch your attention more than a simple icon.
In our opinion, the very best weather apps include a map with a zoom and pan interface which lets the user navigate a map to see the weather forecast for a specific geographical area, zooming in or out to change the level of detail shown.
Zoom and Pan, a winning UI paradigm
Zoom and pan interfaces are perfectly suited to mobile apps because they allow users to navigate highly detailed maps with ease. All a user has to do is drag the map one way or another – panning – and pinch in or out to zoom the map to the desired scale or level of detail.
While the concept of zoomable datasets has been around for ages, it wasn’t until the arrival of the iPhone in 2007 with its touch screen and multi-touch gestures that a new UI paradigm was established.
Design and prototype your mobile app with Justinmind. Download now.
Pinching to zoom in and out on an image was described as feeling “quite natural” in early previews of the first iPhone. In the years that have followed, zoom and pan has become a familiar user interaction method in mobile apps and increasingly, traditional computing interfaces.
Zoom and pan also helps solve a problem for UX designers, namely: how can I fit all the data I have into one screen without it looking like a confusing mess? Zoom and pan allows an app to present lots of different datasets in a virtually limitless hierarchical structure, without overloading the display. When the user zooms in or out to see more or less detail, they are really navigating between different datasets. So a seamless, natural-feeling experience for the user also saves the designer a headache. That’s what we call a win-win.
Creating a weather app with zoom and pan
Step one: Download Justinmind
If you haven’t installed Justinmind yet, download it here to start prototyping your app.
Step two: the first Dynamic Panel
First, add a Dynamic Panel to fill the device screen. Then add your map image into the newly created panel. In order to be able to pan, the original image’s dimensions need to be significantly larger than the dynamic panel. In the image Properties palette, set the image size to be smaller so that when it’s zoomed, it doesn’t end up looking pixelated. Center the image (more or less: this is just to stop you panning to its edge immediately).
Now’s a good time to add the top bar and status bar for your app’s OS. You can find examples in the widgets which come with the UI Kit.
With the image selected, Add an Event. In the New Event panel, pick On Drag from the Tap section of the first pulldown, and then select Move from the second pulldown. Now set the X and Y pulldowns to With Cursor. This means that when a user drags the map image, it will follow her finger.
Finally, add another action to the event: Insert Into and select the main Panel in your Dynamic Panel. This prevents the user from dragging the entire panel.
Step three: the weather data cards
Add a new Dynamic Panel at the top of the screen, and call it something like “Dynamic_panel_Information_Card”. Then mark it as hidden by checking the Hide component checkbox in the Dynamic Panel properties palette.
In the Dynamic_panel_Information_Card, add 3 new Panels. These panels contain your weather data cards. They’ll be activated by the buttons we’ll add later on. Don’t worry, we’ll get to that.
In each of the 3 panels you created, insert your weather data card image. So in our example, that’s one data card each for three cities (San Francisco, Santa Clara and Nevada).
Step four: adding the control buttons
Now we’re going to add the buttons which control the info cards. Add in three buttons, name each one to match the cities on the data cards.
Working with just one of the buttons, add an event: select On Toggle and Move. In the Outline, select the map image. Now you need to add in the coordinates by which you want the map to move, so that it’s centered on the corresponding city. This can involve a bit of trial and error, but it shouldn’t take long.
Set X and Y to Fixed and then set the coordinates. Be aware that they might well be negative values, and could be outside the part of the image that’s visible in the Dynamic Panel.
Step five – zooming the map with the button
Next, working with the same button, add another action: Resize. You need to create an expression here to explain how the map should be zoomed. Pick Calculated for both X and Y axes, then click the Add Expression link that appears next to the Width field.
In the Edit Expression screen, drag the map image from the preview or the Outline into the circle for the first part of the expression and select Width in the dropdown. Now drag the Multiply function icon into the expression. Finally, drag the Text constant icon to the end of the expression, double click the text area and enter 1.5 as the ratio by which you want to zoom. Repeat this process for the Height dimension, being careful to apply the same resize ratio as you did for the Width dimension.
Back in the Event screen, add in a Swing easing effect, with a duration of 500 ms.
Step six – displaying the weather data card with the button
Staying in the same button, add another action: Show, then select the Dynamic_panel_Information_Card and from the pulldown, pick the data panel that corresponds to the city named on the button. Add a Slide Up effect, with Swing easing and a 600 ms duration.
Now, add one more action: Set Active and select that same data panel that you just picked. Make sure that the last action happens with the previous one. You do this in the Events palette, by clicking the arrow icon between the different actions. The first two should remain as they are, but you should change the third to WITH previous.
Step seven – apply to the other buttons
You can now copy and paste these actions to the other buttons. In the Events palette, click the Copy all events button. Then select another button and click on Paste all events. Afterwards, edit the actions to add in the correct coordinates on the map image, as well as the correct data panel to be shown and made active.
A weather app with Zoom and Pan
And you’re done! As we’ve seen, there are a few variations in the UI design for weather apps. We think that including an interactive zoom and pan map makes for an all round better weather app user experience. So brighten up your user’s day and add in that zoom and pan experience.