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!
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 |
|
string. Action to take clicking in the marker. Other possible values: infobox, direct, null |
markerClick |
|
function. The function used when action is set to direct. The parameter marker cotains the marker object that clicking in this moment. |
autoOpen |
|
boolean. Open automatically a marker, ONLY if there is only one marker in the map |
spider |
|
boolean. Activate/disactivate the OverlappingMarkerSpiderfier functionality. Note: requaires the OverlappingMarkerSpiderfier library. |
sidebar |
|
object. Settings about using a sidebar with marker list.
|
defaultPoint |
|
object. Default position to load (using only to fallback if no marker is displayed). |
clusterer |
|
object. Settings about MarkerClusterer style.
|
categoryIcons |
|
object. Settings about Marker Icons.
|
geolocation |
|
object. Settings about Geolocation feature.
|
infowindowOptions |
|
object. Options for Infowindow object (view Gmap API). |
infoboxSettings |
|
object. Settings about Infobox style.
|
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) |
Method name | Example | Description |
---|---|---|
update |
|
Update a pre-rendered map. In the update you must pass all the data to the map (view example) |
destroy |
|
Destroy a pre-rendered map, remove map object and clear the map container (view example) |
View all detailed demo: