Image maps for WordPress

Sometimes you need to take a raster image (JPEG or PNG), select some parts of it which should be clickable and insert that image map to your WordPress website. It could be a 3D model or drawing of a building, aerial photo of building site, neighborhood, or any other image.

You can do that with MapSVG WordPress mapping plugin.

Click on New Image Map button on MapSVG start screen and choose your JPEG or PNG image.

MapSVG creates an empty SVG file and adds your image into it (the file is stored in default WordPress uploads folder). This allows you to add vector shapes on top of your image by using a new feature added in MapSVG 4.0: Draw mode.

Click on Draw button on top toolbar to swtich editor to "Draw" mode.

Drawing tools appear on the left side. Click on pencil icon. Click on the map to start drawing a path. Close path by pressing Enter or double-click left mouse button. Enter object ID when asked. Remember that object must have an ID if you want it to appear in MapSVG "Regions" list.

Add more shapes if needed.

Then click on button to switch to "Edit" mode.

Click on any shape to see its properties. You can change ID, Title, colors. Also in "Edit" mode you can move, delete or add new path points.

Note there is also a "Snap" button which makes it easier to create multiple shapes with perfectly connected borders.

Also there is a "Undo" which cancels the last change.

When you finish, click Save SVG file on the top toolbar and swtich to Settings mode to return to MapSVG settings.

Go to MapSVG > Regions to see updated list of regions.

Now you can continue with the map settings as you do that usually with any of the default MapSVG maps.