osmLeaflet.jQuery, a jQuery plugin for Open Street Map

What is osmLeaflet.jQuery?

It's a jQuery plugin which is designed to help you in using the Leaflet API to display maps based on Open Street Map.

Skills

Choose the zoom level at initialization
Then, play with the wheel mouse or zoom buttons
Put markers
Put a popup
Give it a rich HTML content
Handle maps events

Multiples instances
Manage maps easily
BSD Licence, do what you want
Without any constraints
Simplified API in comparison to Leaflet
Based on Leaflet and Open Street Map

<div id="mini_map" style="height: 140px; width: 800px;"></div>
// Just provide a JSON object and go for it! To create another instance: change the id sent to jQuery selector.
$("#mini_map").osmLeaflet({
    zoom : 9,
    latitude : 48.833,
    longitude : 2.333,
    popup : {
	latitude : 48.859,
	longitude : 2.333,
	text : 'Hello !'
    }
});

<div id="mini_map" style="height: 140px; width: 800px;"></div>
// No JSON object, more verbose but not really readable, no? To create another instance: change the map var name and the selector.
var map = new L.Map("mini_map"),
    cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
        maxZoom: 18,
	attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade'
    }),
    popup = new L.Popup();
map.setView(new L.LatLng(48.833, 2.333, 9).addLayer(cloudmade);

popup.setLatLng(new L.LatLng(48.859, 2.333));
popup.setContent('Hello !');
map.openPopup(popup);

Follow

RSS

Documentation

init (options)
addMarker (options)
addPopup (options)
onClick (callback)

init (options)

Create the map. Called by default if no parameters are passed.

Takes the following options:

Name	Type	Optionnal	Description
latitude	Number	No	Map's latitude.
longitude	Number	No	Map's longitude.
markers	Array	Yes	Contains a list of markers with their description.
onClick	Function	Yes	Callback function which will be called on each click on the map. This function has the event object as parameter.
popup	Object	Yes	Popup's description
zoom	Number	Yes	Map's zoom level. Between 1 and 18.

addMarker (options)

Allows to put one or more marker(s) on the map.

Takes the following options (or an array of these):

Name	Type	Optionnal	Description
click	Object	No	Description of a popup which will be opened when clicking on the marker.
latitude	Number	Yes	Marker's latitude.
longitude	Number	Yes	Marker's longitude.

addPopup (options)

Allows to put a popup on the map. Leaflet API doesn't allow to show more than one popup at a time on a map.

Takes the following options (or an array of these):

Name	Type	Optionnal	Description
content	String	No	Describes, in HTML, the popup's content
latitude	Number	No	Popup's latitude.
longitude	Number	No	Popup's longitude.
autopan	Boolean	Yes	The popup uses the pan effect when it appears on the map. Default value: true.

onClick (callback)

Call the callback function given as a parameter of the click event on any area of the map. Can take an Deferred object instead of the function.

Takes the following parameter:

Name	Type	Optionnal	Description
callback *	Function	No	Callback function.
callback *	Deferred	No	Deferred object which will be resolved at the click event.

* Function or object, not both