Features
Rockstar Map is a WordPress plugin for displaying an interactive map with locations, navigation and more. It's perfect for any Contacts page and it's super easy to setup and use. It has features like fullscreen mode, smooth animations, inertia, fluid width, touch gestures and a beautiful interface that is visible and reads well with any image in the background.
Rockstar Map is also available as a stand-alone jQuery plugin. For more information please see the product description.
Mobile First!
Rockstar Map is designed with mobile devices in mind from the ground up! It's fully responsive, the width dynamically changes when the viewport is resized (for example when the device goes in landscape mode), and it remains responsive in fullscreen mode as well. The demo in this page has fluid width. Resize the browser and look!
Finger gestures are also supported! The map is even more intuitive to use on a touchscreen device, because of that. Pinch to zoom, tap and move to navigate around - it's all there.
Comes with 190+ maps
There are maps for almost all countries bundled in Rockstar Map for super fast setup. All maps have the same graphic style for better visual consistency. You can also use any image you want, it doesn't even have to be a map!
Web app for placing events on the map
One of the biggest pains when using similar plugins is that you need to specify the coordinates for each location on the map. Rockstar Map comes with a great web app that removes that hassle. You just drag and drop pins on the map, move them around, edit the text and you are done!
Fullscreen
One of the coolest features of Rockstar Map is the fullscreen support. With a click of a button the map fills the screen and the experience is so much better!
Smooth navigation & cool interface
The plugin has smooth animations built in - when you click a menu item to go to a location, or when you click the navigation buttons. Also, the interface will stay visible and it will read well with any image in the background, even the most colorful one! And let's not forget the built-in inertia which makes interacting with the map that much more intuitive, especially on touchscreen devices.
Cross-Platform & Cross-Browser
Rockstar map has been extensively tested on iPhone, iPad, Mac, Windows machines and in all modern browsers. And in IE8.
Documentation
Installation
Rockstar Map installs just like any other jQuery plugin.
- Include the JavaScript
<script src="js/rockstar.map.js"></script>
- Include the CSS
<link rel="stylesheet" href="css/rockstar.map.css" type="text/css" />
The content
Once you have installed the plugin, it's time to give it some HTML content to use. You can do that in two ways - you can just type in the HTML, or you can use the HTML Composer web app that comes with the plugin. One by one:
Typing the HTML by hand
Rockstar Map accepts very simple html in order to work. It looks like this:
<div id="rockstar-map">
<!-- You will copy the following div as many locations you want to have. -->
<div class="location" id="berlin" data-title="Berlin" data-x="300" data-y="100">
<h1>Headquarters</h1>
<h2>Berlin, Germany</h2>
<p class="address">The street address.</p>
<p class="phone">The phone number.</p>
<p class="content">The additional content.</p>
</div>
<!-- -->
</div>
The most important thing here is the id of the wrapper div, you will need that later. The other important element is the div with class "location". You specify the coordinates as attributes and the script will place the pin in that location. The "data-title" attribute is used for the navigation menu on the left, and the ID is just user internally by the script. Everything inside that div is completely optional. You can replace it's contents with something entirely different, it's up to you.
Using the HTML Composer
If you wish to stick to the standard content (phone, address, etc.) I highly recommend you to use the HTML Composer app that comes with this plugin. When you open it it pretty much speaks for itself. A few things to note:
- Before you start, put the map image in the "images" folder and name it "map.jpg" (or .png, whatever extension your image has).
- When you open the app, start by dragging and dropping a pin on the map. Click the pin to select it, press the "edit" icon, or just scroll down to get to the form. Edit the contents of the pin as you like, you can use <br> for line breaks. Repeat for each location that you wish to add.
- After you have places all the locations that you need on the map, press the big red button at the bottom and there you go. Copy and paste the HTML code in your site and you are done with this step.
Calling the plugin & Options
One last thing, champ. You need to activate the plugin! Open your .js file and activate the plugin like this:
$('#rockstar-map').rmap({
image : {
src : 'path-to-the-image/map.png',
width : 1000, // These are the dimentions of the image when it's not zoomed.
height: 500
}
});
That's all you need to get the plugin going, but you also have a whole bunch of options to play with:
$('#rockstar-map').rmap({
width : 'auto',
height : 'auto',
image : {
src : 'images/map.jpg'
},
nav_ui : {
show : true,
autohide : false,
move_ui : true,
zoom_ui : true
},
menu : {
show : true
},
animations : {
move : true,
inertia : true
},
zoom : {
initial : 1,
max : 5
},
fullscreen : {
enabled : true,
start_in_fullscreen : false
}
});
Each option explained:
- width: The width of the top-level element. Do not specify it if you want the map to have fluid width. Defaults to 'auto'.
- height: The height of the top-level element. Do not specify it if you want the map to have fluid height. Defaults to 'auto'.
- image -> src: The path to the map image.
- nav_ui -> show: If set to false, it will hide the slider and the move controls. Defaults to true.
- nav_ui -> autohide: If set to true all UI elements will show only when the mouse is over the map. Defaults to false.
- nav_ui -> move_ui: Set to false if you wish to hide the move controls. Defaults to false.
- nav_ui -> zoom_ui: Set to false if you wish to hide the slider controls. Defaults to false.
- menu -> show: Set to false if you wish to hide the menu. Defaults to true.
- animations -> move: Set to false if you don't wish to have smooth moving animations. Defaults to true.
- animations -> inertia: Set to false if you don't wish to have inertia when moving. Defaults to true.
- zoom -> initial: Specify the zoom level of the map on page load. Must be a whole number. Defaults to 1.
- zoom -> max: Specify the maximum zoom level of the map. Must be a whole number. Defaults to 5.
- fullscreen -> enabled: Set this to true if you wish to have fullscreen mode enabled. The script will add a button for fullscreen mode. Defaults to true.
- fullscreen -> start_in_fullscreen: Set to true if you wish the map to go fullscreen on page load. Careful with that one! Defaults to false.
That's pretty much it, have fun with it!