Rockstar Map

Beautiful & interactive next-gen map with locations for your contact page...

Los Angeles

USA

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

New Orleans

USA

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Washington, DC

USA

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

New York

USA

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mexico City

Mexico

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rio de Janeiro

Brazil

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Berlin

China

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paris

France

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Moscow

Russia

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Beijing

China

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Melbourne

Australia

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Istanbul

Turkey

13 Random Str. 9000
Second line address

+359 876 122011
+359 882 109953
+359 872 121010

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

  1. Include the JavaScript
    <script src="js/rockstar.map.js"></script>
  2. 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:

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:

That's pretty much it, have fun with it!