Advanced configuration
----------------------
This chapter describes somewhat more advanced techniques to configure a ``clld`` app.
Custom map icons
~~~~~~~~~~~~~~~~
``clld`` uses `leaflet `_ to display maps. Thus, techniques to use
custom map markers are based on
`corresponding `_
`mechanisms `_
for leaflet.
Using custom leaflet markers with ``clld`` requires the following steps:
1. Define a javascript function in your app's ``project.js`` which can be used as marker
factory; the signature of this function must be as follows:
.. js:function:: MYAPP.icon_factory(feature, size)
:param feature: GeoJSON `feature object `_.
:param size: Size in pixels of the marker.
:returns: L.Icon instance.
2. Make this function available to ``clld`` by assigning it to a name in ``CLLD.MapIcons``:
.. code-block:: javascript
CLLD.MapIcons['myname'] = MYAPP.icon_factory;
3. Configure a map to use the custom icons:
.. code-block:: python
class MyMap(clld.web.maps.Map):
def get_options(self):
return {
'icons': 'myname',
}
The name passed as map options will be used to look up the function. This function will
be called for each feature object encountered in the GeoJSON object defining a map's
content, i.e. if you want to use special properties of a language or a parameter value
in your algorithm to compute the appropriate marker, you will probably have to define a
custom GeoJSON adapter for the map as well (see :ref:`sec-geojson`).
A full example to create custom icons which display a number on top of a standard icon
could look as follows:
1. In ``myapp/static/project.js`` add
.. code-block:: javascript
MYAPP.NumberedDivIcon = L.Icon.extend({
options: {
number: '',
className: 'my-div-icon'
},
createIcon: function () {
var div = document.createElement('div');
var img = this._createImg(this.options['iconUrl']);
$(img).width(this.options['iconSize'][0]).height(this.options['iconSize'][1]);
var numdiv = document.createElement('div');
numdiv.setAttribute ( "class", "number" );
$(numdiv).css({
top: -this.options['iconSize'][0].toString() + 'px',
left: 0 + 'px',
'font-size': '12px'
});
numdiv.innerHTML = this.options['number'] || '';
div.appendChild (img);
div.appendChild (numdiv);
this._setIconStyles(div, 'icon');
return div;
}
});
CLLD.MapIcons['numbered'] = function(feature, size) {
return new MYAPP.NumberedDivIcon({
iconUrl: url == feature.properties.icon,
iconSize: [size, size],
iconAnchor: [Math.floor(size/2), Math.floor(size/2)],
popupAnchor: [0, 0],
number: feature.properties.number
});
}
2. In ``myapp/static/project.css`` add
.. code-block:: css
.my-div-icon {
background: transparent;
border: none;
}
.leaflet-marker-icon .number{
position: relative;
font-weight: bold;
text-align: center;
vertical-align: middle;
}