diff options
| -rw-r--r-- | resources/map.css | 24 | ||||
| -rw-r--r-- | resources/map.js | 10 |
2 files changed, 34 insertions, 0 deletions
diff --git a/resources/map.css b/resources/map.css index 8035091..918cf4d 100644 --- a/resources/map.css +++ b/resources/map.css @@ -6,3 +6,27 @@ body { html, body, #map { height: 100%; } + +.info { + padding: 6px 8px; + font: 14px/16px Arial, Helvetica, sans-serif; + background: white; + background: rgba(255,255,255,0.8); + box-shadow: 0 0 15px rgba(0,0,0,0.2); + border-radius: 5px; +} +.info h4 { + margin: 0 0 5px; + color: #777; +} +.legend { + line-height: 18px; + color: #555; +} +.legend i { + width: 18px; + height: 18px; + float: left; + margin-right: 8px; + opacity: 0.7; +} diff --git a/resources/map.js b/resources/map.js index 50fdd87..95ef6b5 100644 --- a/resources/map.js +++ b/resources/map.js @@ -61,6 +61,16 @@ $(document).ready(function() { map.locate({setView: true, maxZoom: 12}); + var legend = L.control({position: 'bottomright'}); + legend.onAdd = function (map) { + var div = L.DomUtil.create('div', 'info legend'); + + div.innerHTML += '<img href="resources/img/hospital.png"> Hospital<br>'; + + return div; + }; + legend.addTo(map); + function buildLayer(data) { return L.geoJson(data, { onEachFeature: function(feature, layer) { |