Maps made easy

Map examples

All map examples were generated with our plugin. Most examples can be imported directly to your plugin. A download button can be found at the end of each example page.

Load content from another page

This example shows how to load content from another page. We will basically use jQuery and the load method. You will need some knowledge in jQuery und about selectors.

All maps from this plugin allow to execute a JavaScript code whenever a region, marker or text is clicked. You can define an individual click value for each of these map elements. This value is available in the JavaScript code and can be used to do certain actions. This will also be useful in this example.

The first step is to pick two random places. We will simply use Berlin and Paris. This is what we want to achieve: If we click on Berlin, we want to get the latest map example from this site. If we click on Paris, we want to get the current version of this plugin.

We can load both values from the frontpage of this site. We only have to find the right selector for jQuery. The latest map example can be found by "#example-section .map-box:first a". The current version can be found by using "#current-version".

The load method allows to get content from another page. We will use "url + selector" as a parameter for the load function. For example, for Paris we would have the parameter "http://meisterpixel.com/interactive-map-builder/ #current-version".

We can proceed and create our map now:

  1. We start with a new map. We select from the left admin menu I Map Builder Map Builder.
  2. We select a region where both markers fit in best. Therefore, we will pick “Western Europe”.
  3. In the display mode box we will select “Markers” and “Use coordinates”.
  4. We will now add the markers:
    • We click on “Add marker”. A form should open.
    • To find the correct coordinates, we will click on “Find coordinates” and search for Berlin.
    • We pick a color, for example #445599.
    • We set the click value for Berlin to "http://meisterpixel.com/interactive-map-builder/ #example-section .map-box:first a".
    • Then we click on “Add”.
    • We do the same for Paris by using the color #AABB00 and the click value "http://meisterpixel.com/interactive-map-builder/ #current-version".
  5. We will have to pick a location around the map where we want to display our data when a marker is clicked. In this example, we will pick a location below the map. We have to extend the default HTML of the map. We click on “Map Template”. The box should expand and will allow us to add our custom HTML. We change it to:
    <div id="{cssid}">
      %%map%%
      <div id="data">
        
      </div>
    </div>
    
  6. The next step is to add our JavaScript code and the load method. We insert:
    jQuery("#" + cssid + " #data").load(click_value);
    
    This will load the click value and will display the data in our #data div.
  7. Since we won’t use tooltips in this example, we will simply disable them in the tooltip box (right column, last box).
  8. The last step is to click on “Save”.

The final map is the one from above. The map configuration can be seen here:

Name Value Description
Region Western Europe List with all available regions
Width auto Width of the map in pixel. 'Auto' means that the map is centered in the available width.
Height auto Height of the map in pixel. 'Auto' means that the map is centered in the available height.
Display mode Markers Specifies the display mode of the map.
Border resolution Countries The resolution of the map borders.
Tooltips Off Allows to display a tooltip for highlighted map elements.
Tooltips: Trigger none The user interaction that causes the tooltip to be displayed.
Tooltips: Use HTML Off Specifies if the tooltips should use HTML. This allows to customize the tooltips even more. For example, if this property is on, it is possible to display images wihtin the tooltip.
CSS
#{cssid} circle {
 cursor: pointer;
}
#{cssid} #data {
 padding: 10px;
}
#{cssid} circle {
 cursor: pointer; 
}
HTML
<div id="{cssid}">
  %%map%%
  <div id="data">
    
  </div>
</div>

JavaScript

Executed when a marker/region is clicked.

Click value can be defined for each map element.

jQuery("#" + cssid + " #data").load(click_value);
Color Name Click Value
Paris http://meisterpixel.com/interactive-map-builder/ #current-version
Berlin http://meisterpixel.com/interactive-map-builder/ #example-section .map-box:first a

Comments

If you need help or have questions, please leave a comment.


  • Adrien Fl├╝eler

    Hello,
    How can I add a new map if the maps within the plugin are not what I need?
    I would like to use only parts of a map of Sweden. Basically I need to create 2 different maps, displaying each a specific county of Sweden; with its municipalities within each county.
    I will try to generate or find the desired map elsewhere (SVG file); but my question is: how and where can I add a new map then and edit it?
    Thanks a lot for the indications.

Search

Responsive? Yes!

Our maps are fully responsive. They automatically fit into the available width. Try it by resizing your browser window.

Did you know…

  • All examples are importable to your plugin.
  • We extend our set of examples from time to time. If you think there is an example missing, write us a message and we will try to add it!

User reviews

  • Best map-plugin I could find.
  • Great support. Real fast response. This was exactly what I needed. Very flexible and useful.
  • Was waiting for plugin like this for ages! Customer support is also great.
  • Customer support is excellent and very quick. I have no hesitation in recommending this product.

Example for a sidebar map


All maps can also easily be added to your sidebar.