Ventus Shortcode

Below, you’ll find a detailed guide on how to add the Ventus Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Ventus – Weather Map Widget & Shortcode Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Ventus – Weather Map Widget & Shortcode Plugin and the shortcodes it provides:

Plugin Icon
Ventus – Weather Map Widget & Shortcode

"Ventus – Weather Map Widget & Shortcode is a convenient WordPress plugin. It enables users to easily integrate real-time weather maps and forecasts into their sites using widgets or shortcodes."

★★★★☆ (11) Active Installs: 3000+ Tested with: 6.1.4 PHP Version: 7.0
Included Shortcodes:
  • [weather-map]

Ventus [weather-map] Shortcode

The Weather Map shortcode is a powerful tool that generates an interactive weather map. It utilizes various attributes like latitude, longitude, zoom level, and weather layer to create a personalized weather forecast.

Shortcode: [weather-map]

Parameters

Here is a list of all possible weather-map shortcode parameters and attributes:

  • width – Defines the width of the weather map
  • height – Defines the height of the weather map
  • radius – Sets the border radius of the map
  • lat – Sets the latitude coordinates of the map
  • lon – Sets the longitude coordinates of the map
  • zoom – Determines the zoom level of the map
  • layer – Selects the weather layer to display
  • level – Determines the altitude level for the weather data
  • scale – Sets the temperature scale, Celsius or Fahrenheit
  • units – Defines the wind measurement units
  • marker – Determines if a location marker is displayed
  • pressure – Defines if pressure isolines are shown
  • forecast – Determines if a detailed forecast is displayed
  • time – Sets the forecast time, current or future
  • loading – Sets the lazy-loading property of the map
  • model – Selects the weather forecast model

Examples and Usage

Basic example – Display a weather map with default settings

[weather-map /]

Advanced examples – Customizing the weather map display using shortcode attributes

Display a weather map with specific latitude and longitude, showing the wind layer at surface level.

[weather-map lat="40.7128" lon="-74.0060" layer="wind" level="surface" /]

Display a weather map with a specific width and height, zoomed into a specific level, and showing the temperature in Celsius instead of the default Fahrenheit.

[weather-map width="50%" height="500px" zoom="10" scale="C" /]

Display a weather map with a marker at a specific latitude and longitude, showing the pressure isolines, and using the ECMWF weather forecast model.

[weather-map marker="true" lat="40.7128" lon="-74.0060" pressure="true" model="ecmwf" /]

Display a weather map with a specific forecast time and detail latitude and longitude, showing the wind measurement units in knots.

[weather-map time="2021-09-01 12:00" detailLat="40.7128" detailLon="-74.0060" units="knots" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [weather-map] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'weather-map', array( $this, 'create_the_shortcode' ) ); // maintained for backward-compatibility

Shortcode PHP function:

function create_the_shortcode( $attributes ) {

		// Initialize the output.
		$output = '';

		// Initialize the attributes and their default values.
		$atts = shortcode_atts(
			array(
				'width'    => '100%',
				'height'   => '350px',
				'radius'   => '0',
				'lat'      => '53.199',
				'lon'      => '-7.603',
				'zoom'     => '5',
				'layer'    => 'wind',
				'level'    => 'surface',
				'scale'    => 'C',
				'units'    => 'default',
				'marker'   => '',
				'pressure' => '',
				'forecast' => '',
				'time'     => 'now',
				'loading'  => 'lazy',
				'model'    => 'ecmwf'
			),
			$attributes
		);

		// Start the iframe.
		$output .= '<iframe ';
		
		// Create a unique title attribute.
		$output .= 'title="Ventus Weather Map Shortcode ' . esc_attr( $atts['lat'] ) . ' ' . esc_attr( $atts['lon'] ) . '" ';

		// The lazy-loading property.
		$output .= 'loading="' . esc_attr( $atts['loading'] ) . '" ';

		// Set the iframe width and height.
		$output .= 'style="width: ' . esc_attr( $atts['width'] ) . '; height: ' . esc_attr( $atts['height'] ) . '; ';

		// Set the border radius and box-sizing.
		$output .= 'border-radius: ' . esc_attr( $atts['radius'] ) . '; box-sizing: border-box;" ';

		// The iframe source URL.
		$output .= 'src="https://embed.windy.com/embed2.html?';

		// Latitude and longitude.
		$output .= 'lat=' . esc_attr( $atts['lat'] ) . '&lon=' . esc_attr( $atts['lon'] );

		// Zoom level.
		$output .= '&zoom=' . esc_attr( $atts['zoom'] );

		// The weather layer (overlay).
		$output .= '&overlay=' . esc_attr( $atts['layer'] );

		// Show or hide the marker.
		$output .= '&marker=' . esc_attr( $atts['marker'] );

		// Show or hide pressure isolines.
		$output .= '&pressure=' . esc_attr( $atts['pressure'] );

		// Detail latitude and longitude.
		$output .= '&detailLat=' . esc_attr( $atts['lat'] ) . '&detailLon=' . esc_attr( $atts['lon'] );

		// The wind measurement units.
		$output .= '&metricWind=' . esc_attr( $atts['units'] );

		// The temperature scale.
		$output .= '&metricTemp=°' . esc_attr( strtoupper( $atts['scale'] ) );

		// The spot forecast.
		$output .= '&detail=' . esc_attr( $atts['forecast'] );

		// The forecast time.
		$output .= '&calendar=' . esc_attr( $atts['time'] );

		// The weather forecast model.
		$output .= '&product=' . esc_attr( $atts['model'] );

		// The level (altitude).
		$output .= '&level=' . esc_attr( $atts['level'] );

		// Complete the iframe.
		$output .= '&menu=&message=true&type=map&location=coordinates&radarRange=-1" frameborder="0"></iframe>';

		// Return the complete output.
		return $output;
	}

Code file location:

weather-map-widget/weather-map-widget/classes/class-ventus-shortcode.php

Conclusion

Now that you’ve learned how to embed the Ventus shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *