How To: Create Vector Interactive Maps in WordPress

MapSVG is a WordPress plugin which allows you to create interactive and customizable maps, floorplans, infographics, diagrams and any other type of interactive graphic using SVG files. You can choose from the large number of included country maps and world maps or you can upload any SVG file to create a graphic to use. You can then customize the graphic with regions, colors, markers, tooltips, popovers and more. In this review we will be looking at how to use the plugin, creating a map and customizing it and also creating an interactive graphic from a custom uploaded SVG. After you have uploaded and activated the plugin, you will see a new menu item named “MapSVG”, if you visit this you can begin creating your first map. Use the dropdown menu and you will see a list of all the maps included by the plugin, there are maps for each country and World Maps to choose from. Once you have selected your chosen map, the plugin will change to a new page with your map shown on the left hand side and on the right are the settings for your map. You can use these settings to give your map a name and set the width and height of it. Further down are more options for locking the aspect ratio, setting a start position, turning responsive on or off, allowing scroll and zoom and setting popovers and mouse cursors. You can use the “Colors” tab to customize the map colors, you can change the background and base color, strokes, hover colors and brightness. The “Regions” tab allows you to setup individual options for each defined region on the map, each region has it’s own section where you can define a custom color for it, add a tooltip text, popover text and you can add a link. The “Markers” section allows you to add custom marker pins to the map, you can enter a postcode and the plugin will display the address for you to click or you can enter lattitude / longitude coordinates directly. You then have a choice of pin image to use and you can again enter a tool tip text or popover text and HTML which will display in a box when the marker is clicked. The final tab is “Javascript” which allows you to add your own custom Javascript for the map for events like onClick, mouseover, mouseout, beforeload and afterload. You do not have to just use this plugin for creating interactive maps, one of its most important features is the ability to upload your own SVG file so you can use it to add a custom file. Most vector programs can export in .SVG format – Adobe Illustrator, InkScape, Corel Draw, etc. So you can create a custom graphic such as a floorplan or other illustration to use with the plugin and use the same region / markers and tooltips. To test this, I grabbed a free vector illustration and opened it in illustrator, I deleted the text from it and saved as a SVG and uploaded it within the plugin. The plugin automatically grabbed all the regions from the vector file which you can then add tooltips etc as you would a map. Map SVG is available from Codecanyon for $35 which includes 6 months of support and updates, you can upgrade this to 12 months for a total of $45.50. This is a really good plugin – very easy to use and features all the tools you need to create interactive maps, these could be useful for business sites to display their locations / offices etc. Where I think the plugin really shines though is the custom SVG upload tool, simply uploading a vector file allows you to create some more interesting graphics for your site – for example, you could create interactive infographics which would show information or stats when hovered over. Because the files are all SVG, they are fast loading in the browser and scale to any size so will look good on retina screens, larger desktop displays and mobile devices. Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made. Louis is a nice modern looking WordPress theme which is suitable for business sites, personal blogs […] Life is Grand, Show it! Magnus is a photoblogging WordPress theme named after the latin word for […] Dyad pairs your written content and images together in perfect balance. The theme is geared towards […] Wplift was founded in September 2010 by Oliver Dale, the founder of Kooc Media, to help people with WordPress by providing tutorials, theme roundups, plugin guides and general WordPress news. Since then the blog has grown exponentially & now reaches hundreds of thouands of WordPress users each month. Source.


Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: April 18, 2016 @ 1:02 pm