web-mapping-leaflet 0.1.1 → 0.1.2

data/assets/js/leaflet-beautify-marker-icon.js

@@ -0,0 +1,206 @@
+/*
+  Leaflet.BeautifyIcon, a plugin that adds colorful iconic markers for Leaflet by giving full control of style to end user, It has also ability to adjust font awesome
+  and glyphicon icons
+  (c) 2016-2017, Muhammad Arslan Sajid
+  http://leafletjs.com
+*/
+
+/*global L of leaflet*/
+
+(function (window, document, undefined) {
+
+    'use strict';
+
+    /*
+    * Leaflet.BeautifyIcon assumes that you have already included the Leaflet library.
+    */
+
+    /*
+    * Default settings for various style markers
+    */
+    var defaults = {
+
+        iconColor: '#1EB300',
+
+        iconAnchor: {
+            'marker': [14, 36]
+            , 'circle': [11, 10]
+            , 'circle-dot': [5, 5]
+            , 'rectangle-dot': [5, 6]
+            , 'doughnut': [8, 8]
+        },
+
+        popupAnchor: {
+            'marker': [0, -25]
+            , 'circle': [-3, -76]
+            , 'circle-dot': [0, -2]
+            , 'rectangle-dot': [0, -2]
+            , 'doughnut': [0, -2]
+        },
+
+        innerIconAnchor: {
+            'marker': [-2, 5]
+            , 'circle': [0, 2]
+        },
+
+        iconSize: {
+            'marker': [28, 28]
+            , 'circle': [22, 22]
+            , 'circle-dot': [2, 2]
+            , 'rectangle-dot': [2, 2]
+            , 'doughnut': [15, 15]
+        }
+    };
+
+    L.BeautifyIcon = {
+
+        Icon: L.Icon.extend({
+
+            options: {
+                icon: 'leaf'
+               , iconSize: defaults.iconSize.circle
+               , iconAnchor: defaults.iconAnchor.circle
+               , iconShape: 'circle'
+               , iconStyle: ''
+               , innerIconAnchor: [0, 3] // circle with fa or glyphicon or marker with text
+               , innerIconStyle: ''
+               , isAlphaNumericIcon: false
+               , text: 1
+               , borderColor: defaults.iconColor
+               , borderWidth: 2
+               , borderStyle: 'solid'
+               , backgroundColor: 'white'
+               , textColor: defaults.iconColor
+               , customClasses: ''
+               , spin: false
+               , prefix: 'fa'
+               , html: ''
+            },
+
+            initialize: function (options) {
+
+                this.applyDefaults(options);
+                this.options = (!options || !options.html)  ? L.Util.setOptions(this, options) : options;
+            },
+
+            applyDefaults: function (options) {
+
+                if (options) {
+                    if (!options.iconSize && options.iconShape) {
+                        options.iconSize = defaults.iconSize[options.iconShape];
+                    }
+
+                    if (!options.iconAnchor && options.iconShape) {
+                        options.iconAnchor = defaults.iconAnchor[options.iconShape];
+                    }
+
+                    if (!options.popupAnchor && options.iconShape) {
+                        options.popupAnchor = defaults.popupAnchor[options.iconShape];
+                    }
+
+                    if (!options.innerIconAnchor) {
+                        // if icon is type of circle or marker
+                        if (options.iconShape === 'circle' || options.iconShape === 'marker') {
+                            if (options.iconShape === 'circle' && options.isAlphaNumericIcon) { // if circle with text
+                                options.innerIconAnchor = [0, -1];
+                            }
+                            else if (options.iconShape === 'marker' && !options.isAlphaNumericIcon) {// marker with icon
+                                options.innerIconAnchor = defaults.innerIconAnchor[options.iconShape];
+                            }
+                        }
+                    }
+                }
+            },
+
+            createIcon: function () {
+
+                var iconDiv = document.createElement('div')
+                    , options = this.options;
+
+                iconDiv.innerHTML = !options.html ? this.createIconInnerHtml() : options.html;
+                this._setIconStyles(iconDiv);
+                
+                // having a marker requires an extra parent div for rotation correction
+                if (this.options.iconShape === 'marker') { 
+                    var wrapperDiv = document.createElement('div');
+                    wrapperDiv.className = 'beautify-marker';
+                    wrapperDiv.appendChild(iconDiv);
+                    return wrapperDiv;
+                }
+
+                return iconDiv;
+            },
+
+            createIconInnerHtml: function () {
+
+                var options = this.options;
+
+                if (options.iconShape === 'circle-dot' || options.iconShape === 'rectangle-dot' || options.iconShape === 'doughnut') {
+                    return '';
+                }
+
+                var innerIconStyle = this.getInnerIconStyle(options);
+                if (options.isAlphaNumericIcon) {
+                    return '<div style="' + innerIconStyle + '">' + options.text + '</div>';
+                }
+
+                var spinClass = '';
+                if (options.spin) {
+                    spinClass = ' fa-spin';
+                }
+
+                return '<i class="' + options.prefix + ' ' + options.prefix + '-' + options.icon + spinClass + '" style="' + innerIconStyle + '"></i>';
+            },
+
+            getInnerIconStyle: function (options) {
+
+                var innerAnchor = L.point(options.innerIconAnchor)
+                return 'color:' + options.textColor + ';margin-top:' + innerAnchor.y + 'px; margin-left:' + innerAnchor.x + 'px;' + options.innerIconStyle;
+            },
+
+            _setIconStyles: function (iconDiv) {
+
+                var options = this.options
+                    , size = L.point(options.iconSize)
+                    , anchor = L.point(options.iconAnchor);
+
+                iconDiv.className = 'beautify-marker ';
+
+                if (options.iconShape) {
+                    iconDiv.className += options.iconShape;
+                }
+
+                if (options.customClasses) {
+                    iconDiv.className += ' ' + options.customClasses;
+                }
+
+                iconDiv.style.backgroundColor = options.backgroundColor;
+                iconDiv.style.color = options.textColor;
+                iconDiv.style.borderColor = options.borderColor;
+                iconDiv.style.borderWidth = options.borderWidth + 'px';
+                iconDiv.style.borderStyle = options.borderStyle;
+
+                if (size) {
+                    iconDiv.style.width = size.x + 'px';
+                    iconDiv.style.height = size.y + 'px';
+                }
+
+                if (anchor) {
+                    iconDiv.style.marginLeft = (-anchor.x) + 'px';
+                    iconDiv.style.marginTop = (-anchor.y) + 'px';
+                }
+
+                if (options.iconStyle) {
+                    var cStyle = iconDiv.getAttribute('style');
+                    cStyle += options.iconStyle;
+                    iconDiv.setAttribute('style', cStyle);
+                }
+            }
+        })
+    };
+
+    L.BeautifyIcon.icon = function (options) {
+        return new L.BeautifyIcon.Icon(options);
+    }
+
+}(this, document));

data/assets/polyline.geojson

@@ -1,8 +1,8 @@
-{
-"type": "FeatureCollection",
-"name": "polyline",
-"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-"features": [
-{ "type": "Feature", "properties": { "id": 1, "Remark": "Just a route" }, "geometry": { "type": "LineString", "coordinates": [ [ -9.048305, 39.755093 ], [ -20.094827002741617, 33.113108009574347 ], [ -25.840755341503833, 20.389980973743732 ], [ -25.019908435966371, 8.077277390681843 ], [ -18.453133191666698, 2.741772504688356 ], [ -12.091569673751387, 0.484443514460338 ], [ -8.192546872448453, 0.894866967229063 ], [ 9.830284, 1.067894 ], [ 9.830284, 1.067894 ], [ -1.215348175380051, -8.750084172836083 ], [ 0.631557362079228, -25.987869189122733 ], [ 8.429602964685095, -32.349432707038034 ], [ 11.712990586834934, -33.375491338959847 ], [ 15.201589935369135, -33.785914791728601 ], [ 19.193278, -34.462599 ], [ 29.976834235043405, -41.994383847103194 ], [ 45.367713713870764, -38.710996224953334 ], [ 51.113642052632976, -35.427608602803502 ], [ 53.165759316476631, -32.965067886191122 ], [ 55.423088306704635, -30.297315443194378 ], [ 60.758593192698122, -28.03998645296636 ], [ 81.787959, 7.523055 ], [ 100.085757, 6.464489 ] ] } }
-]
-}
+{
+"type": "FeatureCollection",
+"name": "polyline",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "Remark": "Just a route" }, "geometry": { "type": "LineString", "coordinates": [ [ -9.048305, 39.755093 ], [ -20.094827002741617, 33.113108009574347 ], [ -25.840755341503833, 20.389980973743732 ], [ -25.019908435966371, 8.077277390681843 ], [ -18.453133191666698, 2.741772504688356 ], [ -12.091569673751387, 0.484443514460338 ], [ -8.192546872448453, 0.894866967229063 ], [ 9.830284, 1.067894 ], [ 9.830284, 1.067894 ], [ -1.215348175380051, -8.750084172836083 ], [ 0.631557362079228, -25.987869189122733 ], [ 8.429602964685095, -32.349432707038034 ], [ 11.712990586834934, -33.375491338959847 ], [ 15.201589935369135, -33.785914791728601 ], [ 19.193278, -34.462599 ], [ 29.976834235043405, -41.994383847103194 ], [ 45.367713713870764, -38.710996224953334 ], [ 51.113642052632976, -35.427608602803502 ], [ 53.165759316476631, -32.965067886191122 ], [ 55.423088306704635, -30.297315443194378 ], [ 60.758593192698122, -28.03998645296636 ], [ 81.787959, 7.523055 ], [ 100.085757, 6.464489 ] ] } }
+]
+}