Thank you for purchasing Custom Interactive Map - jQuery Plugin. Here you can find information about using and customizing the plugin. If you need anything that is beyond of this documentation, please feel free to contact us through our CodeCanyon profile page, we'll be more than happy to help. After purchasing Custom Interactive Map - jQuery Plugin, a ZIP archive file can be downloaded from CodeCanyon. Three folders can be found after unpacking the archive: Follow the instructions to get started with the plugin. This is how you can add a custom interactive map to a new or existing project. There's an empty file, 'locations.json', let's go ahead and open it. The first step is to find out the dimensions of our map file (camera.jpg). There are various to find out the width and height of an image, for example with photoshop, by pressing Ctrl + C. It is highly recommended to include a smaller version of the map for the minimap. In photoshop, a picture can be resized by pressing Ctrl + I. The minified version should be saved with a different name. (camera-small.jpg) In order to determinate the coordinates of a location, we need a photo editing software like Adobe Photostop, Corel Draw etc., every software which can display the position of the cursor over an image can do the job. For example, in Photoshop, by pressing F8, the 'Info' panel will appear, and the cursor's position in pixels is visible. The results obrained are floats between 0 and 1. (ex. 0.8625). Use numbers with 4 decimal places for good accuracy. Similarly, you can add unlimited levels and landmarks. (JSON objects in an array must be comma-separated!) Custom Interactive Map - jQuery Plugin comes with a range of options to customise the application. Here is the list of the default options. You can add, remove, or completely skip out the options object. There is need for a JSON file which provides information about the map files, layers, ladmarks and categories. It is a simple text file that can be edited with the simples editor, however it has to be valid! Several JSON validators can be found on the internet, please use a validator to verify your locations file, or to find possible errors. See the demo for a complete example. Note: this is a simplified example, arrays can have multiple values. Its is only used to describe the meaning of each attribute. For a complete example please check the demo. Custom Interactive Map - jQuery Plugin has a few components that can be customized or enabled/disabled by the options. The sidebar gives place to the search form and the landmark list. It is situated on the left side of the application, however it can be moved to the right side by applying the following CSS style: By default, the sidebar takes 30% of the available width. This can also be modified as illustrated by the example below. The sum of sidebar's and container's width has to be 100%! Minimap eases the navigation. The files used for minimaps are defined in the data file. Any of the supported formats can be used as minimaps, however using JPG is highly advised for best performace. By default, the minimap has a width of 140 pixels. To resize it, we have to alter the width, the height will be adjusted automatically maintaining the aspect ratio. It can be resized using the following style: It is situated on the bottom-right corner of the container. We can use the top/right/bottom/left attributes to move it. For example, if we wanted to move it to the top-left corner: The clear button and level switcher can be positioned in the same manner, using the CSS classes .mapplic-clear-button and .mapplic-levels. SVG is an XML-based vector image format, so it's actually a readable/editable text file. A few things about SVG maps to keep in mind: Once again, thank you for purchasing this plugin. If you have a more general question relating to JSON, SVG or anything that is beyond the scope of this documentation, please consult the internet, there are lots of great resources to rely on. Source.