Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yigityuce/Leaflet.Control.Custom
Customizable Leaflet Control Panel
https://github.com/yigityuce/Leaflet.Control.Custom
Last synced: 18 days ago
JSON representation
Customizable Leaflet Control Panel
- Host: GitHub
- URL: https://github.com/yigityuce/Leaflet.Control.Custom
- Owner: yigityuce
- License: mit
- Created: 2017-01-09T11:10:36.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-17T07:31:49.000Z (almost 8 years ago)
- Last Synced: 2024-10-08T18:48:13.140Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://yigityuce.github.io/Leaflet.Control.Custom/
- Size: 14.6 KB
- Stars: 91
- Watchers: 8
- Forks: 31
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaflet.Control.Custom
A Customizable Leaflet Control Panel.
You can insert any HTML element to map corners with
- Custom **id**
- Custom **title**
- Custom **classes**
- Custom **styles**
- Custom **data attributes**
- Custom **events**
## Requirements
Leaflet v0.6.0+
## Installation
Include script inside the head tag after Leaflet:
```
```
## Examples
[Basic Demo](https://yigityuce.github.io/Leaflet.Control.Custom/examples/index.html)
## Usage
```
var map = L.map('map').setView([41.044663,29.033775], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
L.control.custom({
position: 'topright',
content : ''+
' '+
''+
''+
' '+
''+
''+
' '+
''+
''+
' '+
''+
''+
' '+
''+
''+
' '+
'',
classes : 'btn-group-vertical btn-group-sm',
style :
{
margin: '10px',
padding: '0px 0 0 0',
cursor: 'pointer',
},
datas :
{
'foo': 'bar',
},
events:
{
click: function(data)
{
console.log('wrapper div element clicked');
console.log(data);
},
dblclick: function(data)
{
console.log('wrapper div element dblclicked');
console.log(data);
},
contextmenu: function(data)
{
console.log('wrapper div element contextmenu');
console.log(data);
},
}
})
.addTo(map);
```
## Options
Option | Values | Default | Description
:--- | :--- | :--- | :---
position | "topleft", "topright", "bottomleft", "bottomright" | "topright" | map position of element
| id | String | - | wrapper div element's id
| title | String | - | wrapper div element's title
| classes | String | - | wrapper div element's class(es) [*Seperate multiple class with space character*] [MDN Element.className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
| content | String | - | html content
| style | Object | - | wrapper div element's class(es) [MDN HTMLElement.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
| datas | Object | - | wrapper div element's data(s) [MDN HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
| events | Object | - | wrapper div element's event(s) and its callbacks
## License
MIT
## Version History
Version | Date | Description
:--- | :--- | :--- | :---
| v1.0.1 | Jan 17, 2017 | Stopped scroll propagation over control wrapper
| v1.0.0 | Jan 10, 2017 | -