Features for Inspiration

Displaying user’s geolocation

Here are examples of possible ways to display a user’s geolocation on a map. The maps are embedded in a WordPress page using a shortcode. In shortcode settings the map is set to “fullwidth”, at a map height of 700 pixels and a map width of 90%. You can also disable the zoom action in the shortcode settings so that the zoom level doesn’t change when you scroll over the map with the mouse. Get creative and play around with the shortcode settings to create the map style that matches your preference and your web project requirements.

Display the user’s location at the initial map loading.

These examples of maps was created using the Mapbox Streets and custom Treweler Dark map styles, with New York City as the location. The Zoom Level is initially set to 12. Choosing the zoom range from a minimum zoom level of 0 to a maximum zoom level of 24 allows users to focus on all map details. The two types of attributes required by Mapbox are set at the lower left and lower right corners of the map.

Display the user’s location using the “Geolocation” button.

An impressively-designed map placed in a strategic part of your project webpage can instantly enhance the appearance of your page and immediately show plenty of information visually through one map. Just set the shortcode settings, copy the shortcode from the map page and paste the code precisely where you want the map to be placed on your page. If you are using custom WordPress themes or WordPress builders such as Elementor, WPBakery Page Builder or Visual Composer, you can also use shortcodes to embed your customized map into your WordPress page.

You’re a few clicks away from discovering the joy of mapping