Instructions & Help

Usage

Shakemap accepts settings from an object of key/value pairs, and can be assigned to any HTML element.


          //Format
          jQuery(selector).shakemap({key:value, key:value, key:value});
        

          //Simple map
          jQuery("#map").shakemap({data:"path/to/my.json"});
          
          //Preload a data and display
          jQuery.getJSON("path/to/my.json", function(loadedData){
            jQuery("#map".shakemap({data:loadedData});
          })

The data loaded must be formatted as geoJSON, a particular json used for sending and trasmitting information about location.


          //geoJSON example
          {
            "type":"FeatureCollection",
            "features":
              [
                {
                  "type":"Feature",
                  "geometry":{
                    "type":"Point",
                    "coordinates":[13.532209,45.804991]
                  },
                  "properties":{
                    "name":"Monfalcone",
                    "description":"Simple marker"
                  }
                }
              ]
            }

You can add personalized fields to the geoJSON. For example, if you wanto to assing a category (a custom icon) to the position you can add a field to properties...


          {
            "type":"FeatureCollection",
            "features":
              [
                {
                  "type":"Feature",
                  "geometry":{
                    "type":"Point",
                    "coordinates":[13.532209,45.804991]
                  },
                  "properties":{
                    "name":"Monfalcone",
                    "description":"Simple marker",
                    "icon":"test"
                  }
                }
              ]
            }

...and later using in shakemap.


          jQuery("#map").shakemap({
            data:"path/to/my.json",
            categoryIcons:{
              field_name:"icon",
              options:{
                'test':'images/test.png'
              },
              size:[64,64],
              origin:[0,0],
              anchor:[32,64]
            }
          });

Remember to set a defined dimension to the element that contain the map, otherwise the map is not visible!

Settings

Property Default Description
data 
""
 string or object. The data used to generate a map. Must be a string (path to geoJSON) or a geoJSON object
action 
"infowindow"
 string. Action to take clicking in the marker. Other possible values: infobox, direct, null
markerClick 
function(marker){}
 function. The function used when action is set to direct. The parameter marker cotains the marker object that clicking in this moment.
autoOpen 
false
 boolean. Open automatically a marker, ONLY if there is only one marker in the map
spider 
false
 boolean. Activate/disactivate the OverlappingMarkerSpiderfier functionality. Note: requaires the OverlappingMarkerSpiderfier library.
sidebar 

  {
    active:false,
    mid:null,
    target:""
  }
object. Settings about using a sidebar with marker list.
  • active - boolean, Activate/disactivate sidebar functionality
  • mid - string, the name of the field containg reference marker (view example)
  • target - string, the HTML sidebar
defaultPoint 

  {
    lat:0,
    lng:0
  }
object. Default position to load (using only to fallback if no marker is displayed).
clusterer 

  {
    grid_size:50,
    max_zoom:15,
    style:[]
  }
object. Settings about MarkerClusterer style.
  • grid_size - int, the size of the cluster grid
  • max_zoom - int, maximun zoom to apply cluster
  • style - array, the style of the cluster (view example)
categoryIcons 

  {
    field_name:"",
    options:{},
    size:[32,32],
    origin:[0,0],
    anchor:[0,0]
  }
object. Settings about Marker Icons.
  • field_name - string, the name of the field in the geoJSON
  • options - object, list of all cateogry/image icon (view example)
  • size - array, the size of the icon
  • origin - array, origin point of the icon
  • anchor - array, anchor point of the icon
geolocation 

  {
    active:false,
    marker:"",
    manualCoords:[],
    onGeolocation:function(map, position, result){},
    onError:function(error){}
  }
object. Settings about Geolocation feature.
  • active - boolean, indicate if the geolocation is active
  • marker - string, url to the icon using for user position
  • manualCoords - array, manual coordinates that change the user position - rare case!
  • onGeolocation - function, fired after the geolocation success. The paramenter is:
    • map: the map object
    • position: actual user position
    • result: ???
  • onError - function, fired if the geolocation failed. The paramenter error contain the error object from geolocation
infowindowOptions 
{}
 object. Options for Infowindow object (view Gmap API).
infoboxSettings 

  {
    offset:[0,0],
    width:"",
    height:"",
    background:"",
    closeBoxMargin:"0 0 0 0",
    closeBoxURL:""
  }
object. Settings about Infobox style.
  • offset - array, offset of infobox
  • width - string, width od infobox in px
  • height - string, height of infobox in px
  • background - string, background url for infobox
  • closeBoxMargin - string, margin of close button, express like CSS margin property
  • closeBoxURL - string, url of image for close button
mapOptions 
{}
 object. Object containing the option for the map (view Gmap API) (view example)
mapStyle 
[]
 array. Style array (view Gmap API) (Styled Map Wizard) (view example)

Methods

Method name Example Description
update 

  jQuery("#map").shakemap('update', {
    data:"path/to/my.json"
  });
Update a pre-rendered map. In the update you must pass all the data to the map (view example)
destroy 

  jQuery("#map").shakemap('destroy');
Destroy a pre-rendered map, remove map object and clear the map container (view example)

Demo

View all detailed demo: