Added nearby search

26af9457 · Deployer · a9159fb4 · 26af9457 · 26af9457 · 26af9457
Commit 26af9457 authored Nov 15, 2017 by Deployer
8 changed files
--- a/demos/nearby.html
+++ b/demos/nearby.html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset=utf-8 />
+    <title>CedarMaps - Simple Map Load</title>
+
+    <script src='../dist/v1.3.0/cedarmaps.uncompressed.js'></script>
+    <script src='../access-token.js'></script>
+    <link href='../dist/v1.3.0/cedarmaps.css' rel='stylesheet' />
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        .map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='map' class='map'> </div>
+    <script>
+        try {
+            L.cedarmaps.accessToken = accessToken;
+        } catch (err) {
+            throw new Error('You need to get an access token to be able to use cedarmaps SDK. ' +
+                'Send us an email to <info@cedar.ir>');
+        }
+        L.cedarmaps.nearby('map', [35.737334, 51.355215], {
+            accessToken: accessToken,            
+            categories: ['bus', 'park', 'shopping', 'hospital', 'school'],
+            searchDistance: 5,
+            popupContent: '<h2>html is allowed here</h2>',
+            defaultZoom: 20
+        });        
+    </script>
+</body>
+
+</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/cedarmaps.js
+++ b/src/cedarmaps.js
@@ -10,6 +10,7 @@ L.cedarmaps = L.mapbox;
 L.cedarmaps.VERSION = require('../package.json').version;
 L.cedarmaps.geocoder = require('./geocoder');
 L.cedarmaps.staticMap = require('./static_map');
+L.cedarmaps.nearby = require('./nearby');
 L.cedarmaps.distance = require('./distance');
 L.cedarmaps.map = map.map;
 L.cedarmaps.Map = map.Map;

--- a/src/nearby.js
+++ b/src/nearby.js
+'use strict';
+
+var config = require('./config')
+var corslite = require('corslite')
+
+module.exports = function (container, center, options) {
+    /* 
+    {        
+        defaultZoom: int,        
+        categories: [string, string],
+        poiLimit: int,
+        seachDistance: int,
+        popupContent: string,
+        noPoiLink: boolean,
+        lockScroll: boolean,
+        callback: fn(map, center_marker, pois)
+    }
+    */
+    var stringHelpers = {
+        toFarsi: function (string) {
+            if (!string) {
+                return;
+            }
+            var foreignChars = ['ي', 'ك', '‍', 'دِ', 'بِ', 'زِ', 'ذِ', 'ِشِ', 'ِسِ', '‌', 'ى', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+                persianChars = ['ی', 'ک', '', 'د', 'ب', 'ز', 'ذ', 'ش', 'س', '', 'ی', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'];
+    
+            for (var i = 0, charsLen = foreignChars.length; i < charsLen; i++) {
+                string = string.replace(new RegExp(foreignChars[i], 'g'), persianChars[i]);
+            }
+    
+            return string;
+        },
+        digitSeperator: function (num) {
+            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+    }
+    var markerTools = function (marker) {
+        this.activeMarker = null;
+    
+        function _toggleMarkerStatus(status) {
+            var markerIcon = marker._icon,
+                currentBgPosition = markerIcon.style.backgroundPosition,
+                bgPosition = currentBgPosition.split(' '),
+                newBgPostion;
+            switch (status) {
+                case 'hover':
+                    var currentZIndex = parseInt(markerIcon.style.zIndex);
+                    markerIcon.style.zIndex = currentZIndex + 10000; // TODO: set through leaflet's zIndexOffset method
+                    newBgPostion = bgPosition[0] + ' -53px';
+                    break;
+                case 'normal':
+                    var currentZIndex = parseInt(markerIcon.style.zIndex);
+                    markerIcon.style.zIndex = currentZIndex - 10000;
+                    newBgPostion = bgPosition[0] + ' 0px';
+                    break;
+                case 'active':
+                    newBgPostion = bgPosition[0] + ' -53px';
+                    marker.isActive = true;
+                    break;
+                case 'inactive':
+                    newBgPostion = bgPosition[0] + ' 0px';
+                    marker.isActive = false;
+                    break;
+            }
+    
+            markerIcon.style.backgroundPosition = newBgPostion;
+        };
+        return {
+            onMarkerMouseOver: function (evt) {
+                if (!marker.isActive) {
+                    if (self.activeMarker !== null) _toggleMarkerStatus('inactive');
+                    _toggleMarkerStatus('hover');
+                }
+            },
+            onMarkerMouseOut: function (evt) {
+                if (!marker.isActive) {
+                    _toggleMarkerStatus('normal');
+                }
+            }
+        }
+    }        
+    if(!options.lockScroll) {
+        options.lockScroll = false;
+    }
+    var pois = [];
+    var availableCategories = {
+            park: {
+                slug: 'park',
+                id: 11,
+                parentId: 1,
+                name: 'پارک و بوستان',
+                short_name: 'پارک'
+            },
+            bus: {
+                slug: 'bus-stop',
+                id: 3,
+                parentId: 1,
+                name: 'ایستگاه اتوبوس',
+                short_name: 'اتوبوس'
+            },
+            shopping: {
+                slug: 'shopping-center',
+                id: 208,
+                parentId: 160,
+                name: 'پاساژ و مرکز خرید',
+                short_name: 'خرید'
+            },
+            hospital: {
+                slug: 'hospital',
+                id: 59,
+                parentId: 55,
+                name: 'بیمارستان',
+                short_name: 'درمانی'
+            },
+            school: {
+                slug: 'school',
+                id: 36,
+                parentId: 28,
+                name: 'مدرسه',
+                short_name: 'مدرسه'
+            }
+        },
+        // Tehran bounds with extra padding
+        southWest = new L.LatLng(35.3930, 51.0219),
+        northEast = new L.LatLng(35.8267, 51.6426),
+        bounds = new L.LatLngBounds(southWest, northEast),
+        categoryFeatureGroups = [],
+        geoJsonLayer;
+
+    /**
+     * Initilizing Map View
+     */
+
+    // Getting maps info from a tileJSON source
+    var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
+        
+    var containerElement = document.getElementById(container);
+    containerElement.className += ' kikojas-nearby-widget';
+    var map = L.cedarmaps.map(container, tileJSONUrl, {
+        scrollWheelZoom: true,
+        maxBounds: bounds,
+        minZoom: 12,
+        maxZoom: 17,
+        zoomControl: options.lockScroll,
+        scrollWheelZoom: !options.lockScroll
+    }).setView(center, options.defaultZoom ? options.defaultZoom : 15);
+
+    if (options.categories) {
+        for (var i = 0, l = options.categories.length; i < l; i++) {
+            (function (cat_index) {
+                var category = options.categories[cat_index];
+                if (availableCategories[category]) {
+                    var categoryFeatureGroup = new L.FeatureGroup();
+                    corslite('https://www.kikojas.com/api/search?cat=' + availableCategories[category].name + '&latlng=' + center[0] + ',' + center[1] + '&limit=' + (options.poiLimit ? options.poiLimit : 3) + '&distance=' + (options.seachDistance ? options.seachDistance : 2), function (err, resp) {
+                        if (err) {
+                            throw err;
+                        }
+                        var kikojasResponse = JSON.parse(resp.response);
+                        if (kikojasResponse.meta.code === 200) {
+                            var pois = kikojasResponse.response.items;
+                            pois.forEach(function (poi) {
+                                var popupContent = '<div class="tooltip-wrapper">\
+                                            <div class="basic-info">\
+                                                <div class="icon"><img width="32" height="32" alt="' + availableCategories[category].name + '" src="https://www.kikojas.com' + poi.categories[0].icon + '"></div>\
+                                                <div class="details">';
+                                if(options.noPoiLink && options.noPoiLink == true) {
+                                    popupContent += '<div class="title">' + poi.full_name + '</div>';
+                                } else {
+                                    popupContent += '<div class="title"><a href="https://www.kikojas.com' + poi.url + '" target="_blank">' + poi.full_name + '</a></div>';
+                                }
+                                popupContent += '<div class="category">' + poi.categories[0].name + '</div>\
+                                                    <div class="address">' + poi.address + '</div>\
+                                                </div>\
+                                            </div>\
+                                            <div class="routing" data-from="' + center[0] + ',' + center[1] + '" data-to="' + poi.latlng + '" onclick="routing(this)")">\
+                                                <span class="distance">در حال محاسبه فاصله <img src="https://tools.kikojas.com/images/loading-14-blue.gif"/></span>\
+                                                <div class="route">مسیریابی <img src="https://tools.kikojas.com/images/route-icon.png"/></div>\
+                                            </div>\
+                                            <div class="clear"></div>\
+                                        </div>';
+                                var catMarker = L.marker({
+                                    lon: poi.lng,
+                                    lat: poi.lat
+                                }, {
+                                    icon: L.divIcon({
+                                        html: category == 'bus' ? '' : '<img style="width:27px; margin:2px;" src="https://www.kikojas.com/img/categories/red/32/' + availableCategories[category].slug + '.png"/>',
+                                        iconSize: [34, 44],
+                                        className: 'kikojas-map-marker',
+                                        iconAnchor: [31, 41],
+                                        shadowUrl: 'https://www.kikojas.com/img/marker-shadow.png',
+                                        shadowSize: [61, 20],
+                                        shadowAnchor: [59, 5],
+                                        bgPos: {
+                                            x: category == 'bus' ? 33 * 36 : 30 * 36,
+                                            y: 0
+                                        }
+                                    })
+                                }).bindPopup(popupContent, {
+                                    offset: new L.Point(-15, -33),
+                                    closeButton: false,
+                                    maxWidth: 420,
+                                    autoPan: true
+                                });
+                                var marker_tools = new markerTools(catMarker)
+                                catMarker.on('mouseover', marker_tools.onMarkerMouseOver).on('mouseout', marker_tools.onMarkerMouseOut);
+                                categoryFeatureGroup.addLayer(catMarker);
+                                pois.push(catMarker);
+                            }, this);
+                            if (i == l - 1 && options.callback) {
+                                options.callback(map, centerMarker, pois);
+                            }
+                        }
+                    }, true);
+                    categoryFeatureGroups.push(categoryFeatureGroup);
+                    for (var layer_index = 0, total_layers = categoryFeatureGroups.length; layer_index < total_layers; layer_index++) {
+                        map.addLayer(categoryFeatureGroups[layer_index]);
+                    }
+                    map.on('popupopen', function (e) {
+                        window.distance(e.popup._contentNode.getElementsByClassName('routing')[0]);
+                    });
+                }
+            })(i);
+        }
+    }
+    var centerMarker = L.marker({
+        lon: center[1],
+        lat: center[0]
+    }, {
+        zIndexOffset: 1000,
+        icon: L.divIcon({
+            iconSize: [34, 44],
+            className: 'kikojas-map-marker',
+            iconAnchor: [31, 41],
+            shadowUrl: 'https://www.kikojas.com/img/marker-shadow.png',
+            shadowSize: [61, 20],
+            shadowAnchor: [59, 5],
+            bgPos: {
+                x: 34 * 36,
+                y: 0
+            }
+        })
+    }).addTo(map);
+    var center_marker_tools = new markerTools(centerMarker);
+    centerMarker.on('mouseover', center_marker_tools.onMarkerMouseOver).on('mouseout', center_marker_tools.onMarkerMouseOut)
+    if (options.popupContent) {
+        centerMarker.bindPopup('<div class="basic-info">' + options.popupContent + '</div>', {
+            offset: new L.Point(-15, -33),
+            closeButton: false,
+            className: 'leaflet-popup-poi',
+            maxWidth: document.getElementById(container).offsetWidth - 20
+        }).on('popupopen', function(e) {
+            e.popup.update();
+        });
+    }
+
+    L.Control.CategoryToggle = L.Control.extend({
+        onAdd: function (map) {
+            var divControlContainer = L.DomUtil.create('div');
+            L.DomUtil.addClass(divControlContainer, 'category-panel slider js_slider');
+
+            var mapWidth = document.querySelector('#' + (options.mapContainer ? options.mapContainer : 'map')).offsetWidth;
+            var panelWidth = (mapWidth - 20);
+            var frameWidth = (panelWidth - 50);            
+            var ul = L.DomUtil.create('ul');
+            L.DomUtil.addClass(ul, 'tg-list');
+            for (var i = 0, l = options.categories.length; i < l; i++) {
+                var category = options.categories[i];
+                if (availableCategories[category]) {
+                    var cat = availableCategories[category];
+                    var categoryListItem = L.DomUtil.create('li', 'tg-list-item');
+                    var categoryInput = L.DomUtil.create('input', 'tgl tgl-flip');
+                    categoryInput.setAttribute('type', 'checkbox');
+                    categoryInput.setAttribute('id', cat.slug);
+                    var categoryLabel = L.DomUtil.create('label', 'tgl-btn');
+                    categoryLabel.setAttribute('data-tg-off', cat.short_name);
+                    categoryLabel.setAttribute('data-tg-on', cat.short_name);
+                    categoryLabel.setAttribute('data-toggle', 'on');
+                    categoryLabel.setAttribute('data-cat', i);
+                    categoryLabel.setAttribute('for', cat.slug);
+                    categoryListItem.appendChild(categoryInput);
+                    categoryListItem.appendChild(categoryLabel);
+
+                    categoryListItem.onclick = function (event) {
+                        if (event.target.getAttribute('data-cat')) {
+                            if (event.target.getAttribute('data-toggle') == "on") {
+                                map.removeLayer(categoryFeatureGroups[event.target.getAttribute('data-cat')]);
+                                event.target.setAttribute('data-toggle', 'off');
+                            } else {
+                                map.addLayer(categoryFeatureGroups[event.target.getAttribute('data-cat')]);
+                                event.target.setAttribute('data-toggle', 'on');
+                            }
+                            var bounds = [];
+                            categoryFeatureGroups.forEach(function (featureGroup) {
+                                if(featureGroup.getBounds().isValid()) {
+                                    bounds.push(featureGroup.getBounds());
+                                }                                
+                            });
+                            if(bounds.length > 0) {
+                                map.fitBounds(bounds);
+                            }
+                        }
+                    }
+                    ul.appendChild(categoryListItem);
+                }
+            }
+            divControlContainer.appendChild(ul);
+
+            return divControlContainer;
+        },
+
+        onRemove: function (map) {}
+    });
+    L.control.categoryToggle = function (opts) {
+        return new L.Control.CategoryToggle(opts);
+    }
+    L.control.categoryToggle({
+        position: 'topright'
+    }).addTo(map);
+    window.cedarMapsAccessToken = options.accessToken;
+    window.routing = function (el) {
+        if (el && el.getAttribute('data-from') && el.getAttribute('data-to')) {
+            corslite('https://api.cedarmaps.com/v1/direction/cedarmaps.driving/' + el.getAttribute('data-from') + ';' + el.getAttribute('data-to') + '?access_token=' + window.cedarMapsAccessToken, function (err, result) {
+                if (err) {
+                    throw err;
+                }
+                var r = JSON.parse(result.response).result;
+                if (r.routes && r.routes.length > 0) {
+                    if (geoJsonLayer) {
+                        map.removeLayer(geoJsonLayer);
+                    }
+                    geoJsonLayer = L.geoJson(r.routes[0].geometry);
+                    geoJsonLayer.addTo(map);
+                }
+            });
+        }
+    }
+    window.distance = function (el) {
+        if (el && el.getAttribute('data-from') && el.getAttribute('data-to')) {
+            var url = 'https://api.cedarmaps.com/v1/direction/cedarmaps.driving/' + el.getAttribute('data-from') + ';' + el.getAttribute('data-to') + '?access_token=' + window.cedarMapsAccessToken;
+            var old_el = document.getElementById('to-replace');
+            if (old_el) {
+                old_el.removeAttribute('id');
+            }
+            el.getElementsByClassName('distance')[0].setAttribute('id', 'to-replace')
+            corslite(url, function (err, result) {
+                if (err) {
+                    throw err;
+                }
+                var r = JSON.parse(result.response).result,
+                    el = document.getElementById('to-replace');
+                if (el) {
+                    if (r.routes && r.routes.length > 0) {
+                        var d = r.routes[0].distance,
+                            unit = 'متر';
+                        if (d > 1000) {
+                            d = d / 1000;
+                            unit = 'کیلومتر';
+                        }
+                        el.innerHTML = 'فاصله رانندگی تا مکان مورد نظر شما: ' + stringHelpers.toFarsi(stringHelpers.digitSeperator(Math.round(d))) + ' ' + unit;
+                    }
+                    el.removeAttribute('id');
+                }
+            });
+        }
+    }
+}
\ No newline at end of file
--- a/src/static_map.js
+++ b/src/static_map.js
@@ -2,9 +2,8 @@

 var config = require('./config');

-module.exports = function (options) {
+module.exports = function (container, options) {
 // {
-//     container: string,
 //     alttext: string,
 //     maptype: string,
 //     position: {
@@ -37,9 +36,9 @@ module.exports = function (options) {
    if (!options.dimensions) {
        throw 'Cedarmaps: No dimensions specified.';
    }
-    if (!options.container) {
+    if (!container) {
        throw 'Cedarmaps: No container selector specified.';
-    } else if (!document.querySelector(options.container)) {
+    } else if (!document.querySelector(container)) {
        throw 'Cedarmaps: Could not find element ' + options.container;
    }
    var position = options.position.lat ? (options.position.lat + ',' + options.position.lng + ',' + options.position.zoom) : options.position;

--- a/theme/images/loading-14-blue.gif
+++ b/theme/images/loading-14-blue.gif
--- a/theme/images/route-icon.png
+++ b/theme/images/route-icon.png
--- a/theme/style.css
+++ b/theme/style.css
@@ -53,3 +53,342 @@
    background-image: url(data:image/png;base64,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);
    cursor: pointer;
 }
+
+.kikojas-nearby-widget .clear {
+	display: block;
+    content: "";
+    clear: both;
+}
+
+.kikojas-nearby-widget .category-panel {
+	transition: opacity .25s ease-in-out;
+	background: #fff;
+	opacity: 1;
+	padding: 2px;
+	height: 40px;
+	border-radius: 5px;
+}
+
+.kikojas-nearby-widget .category-panel:hover {
+	opacity: 1;
+}
+
+.kikojas-nearby-widget .category-button {
+	cursor: pointer;
+}
+
+.kikojas-nearby-widget .category-button .category-name {
+	display: none;
+	position: absolute;
+	top: 10px;
+	z-index: 20;
+	padding: 5px;
+	border-radius: 5px;
+	background: rgba(0, 0, 0, 0.8);
+	color: white;
+}
+
+.kikojas-nearby-widget .category-button:hover .category-name {
+	display: inline-block;
+}
+
+.kikojas-nearby-widget .kikojas-map-marker {
+	width: 34px;
+	height: 44px;
+	display: block;
+	background: url('https://www.kikojas.com/img/markers.png') no-repeat;
+}
+
+.kikojas-nearby-widget .leaflet-marker-shadow {
+	background: none!important;
+}
+
+
+/**
+ * Map & Leaflet overrides
+ */
+.kikojas-nearby-widget .leaflet-popup-content-wrapper, .leaflet-popup-content-wrapper p {
+	font-family: IRANSans, sans-serif;
+	font-size: 12px;
+}
+.kikojas-nearby-widget .leaflet-popup-content-wrapper{	
+	border-radius: 8px;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	padding: 0;
+	border: 2px solid #A4A4A4;	
+}
+
+.kikojas-nearby-widget .leaflet-popup-content {
+	margin: 0;
+	width: 400px;
+	height: 100px;
+	direction: rtl;
+	text-align: right;
+	padding: 1px;
+	overflow: hidden;
+}
+
+.kikojas-nearby-widget .leaflet-popup-poi .leaflet-popup-content {	
+	height: auto;
+	width: auto;
+}
+
+.kikojas-nearby-widget .leaflet-popup-poi .leaflet-popup-content .basic-info {
+	width: 100%;
+	float: auto;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .basic-info {
+	padding: 10px;
+	float: right;
+	width: 70%;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .details {
+	padding-right: 42px;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .category {
+	color: #9a9a9a;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .address {
+	font-weight: 300;
+	font-size: 11px;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .icon {
+	float: right;
+	width: 32px;
+	height: 50px;
+	margin-left: 10px;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .routing {
+	float: left;	
+	width: 30%;
+	height: 98px;
+	border-right: 1px solid #a6a6a6;
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+	background: #dbf9ff;
+	color: #000;
+	font-size: 11px;
+	padding: 5px;	
+	position: relative;
+	cursor: pointer;
+	text-align: center;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content .routing .route {
+	border-radius: 4px;
+	background-color: #238fa6;
+	padding: 4px;
+	margin-top: 20px;
+	color: #fff;
+}
+
+.kikojas-nearby-widget .tooltip-wrapper {
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	overflow: hidden;
+	width: 100%;
+}
+
+.kikojas-nearby-widget .leaflet-popup-content-wrapper,
+.kikojas-nearby-widget .leaflet-popup-tip {
+	box-shadow: 0 4px 10px 0 #888888;
+}
+
+.kikojas-nearby-widget .leaflet-top,
+.kikojas-nearby-widget .leaflet-bottom {
+	z-index: 4 !important;
+}
+
+.kikojas-nearby-widget .map-feature-tooltip-wrapper {
+	padding: 15px;
+	text-align: center;
+}
+
+.kikojas-nearby-widget .new-place-tooltip-wrapper {
+	padding: 15px 10px;
+	text-align: center;
+}
+
+.kikojas-nearby-widget .leaflet-popup-tip-container {
+    margin: -2px auto 0;
+    width: 24px;
+    height: 15px;
+    position: relative;
+    overflow: hidden;
+}
+
+.kikojas-nearby-widget .leaflet-popup-tip {
+    height: 8px;
+    background: url(https://www.kikojas.com/img/popup-tip.png) no-repeat top left;
+}
+
+.tgl-flip+.tgl-btn {
+    padding: 2px;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;    
+    -webkit-perspective: 100px;
+    perspective: 100px;
+}
+
+.tgl-flip+.tgl-btn:after,
+.tgl-flip+.tgl-btn:before {
+    display: inline-block;
+    -webkit-transition: all .4s ease;
+    transition: all .4s ease;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    line-height: 2em;
+    font-weight: bold;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    border-radius: 4px;    
+}
+
+.tgl-flip+.tgl-btn:after {
+    content: attr(data-tg-on);
+    background: #6ba53a;
+    -webkit-transform: rotateY(-180deg);
+    transform: rotateY(-180deg);
+}
+
+.tgl-flip+.tgl-btn:before {
+    background: #6ba53a;
+    content: attr(data-tg-off);
+}
+
+.tgl-flip+.tgl-btn:active:before {
+    -webkit-transform: rotateY(-20deg);
+    transform: rotateY(-20deg);
+}
+
+.tgl-flip:checked+.tgl-btn:before {
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+}
+
+.tgl-flip:checked+.tgl-btn:after {
+    -webkit-transform: rotateY(0);
+    transform: rotateY(0);
+    left: 0;
+    background: #a4a3a4;
+}
+
+.tgl-flip:checked+.tgl-btn:active:after {
+    -webkit-transform: rotateY(20deg);
+    transform: rotateY(20deg);
+}
+
+ul.tg-list,
+ul.tg-list li {
+    list-style: none outside none;
+}
+
+.tg-list {    
+    /*display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;*/        
+    padding: 0;    
+    margin: 0;
+    text-align: center;
+}
+
+.tg-list-item {
+    display:inline-block;    
+    margin: 7px 5px;    
+    font-family: IRANSans, sans-serif;
+    font-size: 11px;
+}
+
+.tgl {
+    display: none;
+}
+
+.tgl,
+.tgl:after,
+.tgl:before,
+.tgl *,
+.tgl *:after,
+.tgl *:before,
+.tgl+.tgl-btn {
+    box-sizing: border-box;
+}
+
+.tgl::-moz-selection,
+.tgl:after::-moz-selection,
+.tgl:before::-moz-selection,
+.tgl *::-moz-selection,
+.tgl *:after::-moz-selection,
+.tgl *:before::-moz-selection,
+.tgl+.tgl-btn::-moz-selection {
+    background: none;
+}
+
+.tgl::selection,
+.tgl:after::selection,
+.tgl:before::selection,
+.tgl *::selection,
+.tgl *:after::selection,
+.tgl *:before::selection,
+.tgl+.tgl-btn::selection {
+    background: none;
+}
+
+.tgl+.tgl-btn {
+    outline: 0;
+    display: block;
+    width: 4em;
+    height: 2em;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.tgl+.tgl-btn:after,
+.tgl+.tgl-btn:before {
+    position: relative;
+    display: block;
+    content: "";
+    width: 50%;
+    height: 100%;
+}
+
+.tgl+.tgl-btn:after {
+    left: 0;
+}
+
+.tgl+.tgl-btn:before {
+    display: none;
+}
+
+.tgl:checked+.tgl-btn:after {
+    left: 50%;
+}
+
+@media (max-width: 400px) {
+	.kikojas-nearby-widget .leaflet-popup-content {		
+		width: 310px;
+		height: 150px;
+	}
+	.kikojas-nearby-widget .leaflet-popup-content .routing {
+		height: 149px;		
+	}
+}
\ No newline at end of file