It's a jQuery plugin which is designed to help you in using the Leaflet API to display maps based on 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);
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. |
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. |
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. |
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. |