Fork me on GitHub

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

Demonstration

<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)

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