markers coloured

OsmAnd/assets/server/css/leaflet.awesome-markers.css

@@ -0,0 +1,57 @@
+/*
+Author: L. Voogdt
+License: MIT
+Version: 1.0
+*/
+
+/* Marker setup */
+.awesome-marker {
+    margin-top:-42px;
+    margin-left: -17px;
+    position:absolute;
+    left:0;
+    top:0;
+    display: block;
+    text-align: center;
+}
+
+.awesome-marker .material-icons {
+    font-size: 17px;
+}
+
+.awesome-marker-shadow {
+    background: url('/images/markers-shadow.png') no-repeat 0 0;
+    width: 36px;
+    height: 16px;
+}
+
+/* Retina displays */
+@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
+(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
+    .awesome-marker-shadow {
+        background-image: url('/images/markers-shadow@2x.png');
+        background-size: 35px 16px;
+    }
+}
+
+.awesome-marker i {
+    color: #333;
+    margin-top: 10px;
+    display: inline-block;
+    font-size: 14px;
+}
+
+.awesome-marker .icon-white {
+    color: #fff;
+}
+
+/* Colors */
+
+.awesome-marker-background {
+    fill: #fff;
+}
+
+.awesome-marker:hover {
+  top: 2px;
+  opacity: 0.9;
+}

OsmAnd/assets/server/go.html

@@ -17,57 +17,60 @@
     <!--
       <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
     -->
+    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
+    <link rel="stylesheet" href="css/leaflet.awesome-markers.css">
+    <script src="/scripts/leaflet.awesome-markers.js"></script>
 
     <script type="text/javascript" src="/scripts/js.cookie.js"></script>
     <script type="text/javascript" src="/scripts/go.js?v=5"></script>
 
     <script>
         function getMarkerContent(feature) {
-		var p = feature.properties;
+            var p = feature.properties;
-		var popupContent = p.title;
+            var popupContent = p.title;
-		if(p.opr_id) {
+            if (p.opr_id) {
-			popupContent += " (" + p.opr_id+") ";
+                popupContent += " (" + p.opr_id + ") ";
-		}
+            }
-		if(p.tags) {
+            if (p.tags) {
-			for (var t in p.tags) {
+                for (var t in p.tags) {
-				popupContent += "<br>" + t + " " + p.tags[t];
+                    popupContent += "<br>" + t + " " + p.tags[t];
-			}
+                }
-		}
+            }
-		if(p.opr_id) {
+            if (p.opr_id) {
-			popupContent += "<br><a href=\'/api/admin?view=objects&browse=type&type=opr.place&subtype=id&key=" +
+                popupContent += "<br><a href=\'/api/admin?view=objects&browse=type&type=opr.place&subtype=id&key=" +
-				p.opr_id + "\'>OpenPlaceReviews</a>";
+                    p.opr_id + "\'>OpenPlaceReviews</a>";
-		}
+            }
-		if(p.osm_id) {
+            if (p.osm_id) {
-			popupContent += "<br><a href=\'https://www.openstreetmap.org/" +
+                popupContent += "<br><a href=\'https://www.openstreetmap.org/" +
-				p.osm_type + "/" + p.osm_id + "\'>OpenStreetMap</a>";
+                    p.osm_type + "/" + p.osm_id + "\'>OpenStreetMap</a>";
-		}
+            }
-		return popupContent;
+            return popupContent;
-	    }
+        }
 
-	    function markerClick(e){
+        function markerClick(e) {
 
-	    }
+        }
 
-        function setupMarkers(){
+        function setupMarkers() {
             $.ajax({
                 type: 'GET',
                 url: "/favorites",
                 async: false,
                 contentType: "application/json",
                 dataType: 'json',
-            complete: function(r) {
+                complete: function (r) {
-                var points = JSON.parse(r.responseText);
+                    var points = JSON.parse(r.responseText);
-                points.forEach(e => {
+                    points.forEach(e => {
-		    	    window.goMap.map.addPopupMarker(e,markerClick);
+                        window.goMap.map.addPopupMarker(e, markerClick);
-                });
+                    });
-            },
+                },
-            error: function(e) {
+                error: function (e) {
-                alert("Error happened while getting favourite points "+e.message);
+                    alert("Error happened while getting favourite points " + e.message);
-            }
+                }
             });
         }
 
-        $( document ).ready(function() {
+        $(document).ready(function () {
             setupMarkers();
         });
 
@@ -90,7 +93,7 @@
         <h1>Did you know</h1>
         <p>OsmAnd has an iOS application</p>
         <a class="button yes" href="javascript:void(0);">Yep, I've already got it</a>
-        <a class="button no" href="javascript::void(0);">Nope, but I'd love to try it</a>
+        <a class="button no" href="javascript:void(0);">Nope, but I'd love to try it</a>
         <a class="button cancel" href="javascript:void(0);">Leave me alone</a>
     </div>
 </div>

OsmAnd/assets/server/scripts/go.js

@@ -126,7 +126,12 @@ function toColor(num) {
 			                "name: <b>" + favorite.name + "</b><br/>" +
 			                "address: <i>" + favorite.address + "</i><br/>"
 			                 + "category: " + favorite.category);
-			    L.marker([point.lat, point.lon])
+				var customMarker = L.AwesomeMarkers.icon({
+					icon: 'home',
+					markerColor: toColor(favorite.color),
+					iconColor: toColor(favorite.color)
+				});
+				L.marker([point.lat, point.lon],{icon: customMarker})
 			        .bindPopup(popup)
 			        .addTo(mapobj.map)
 			        .on('click', function(e) {

OsmAnd/assets/server/scripts/leaflet.awesome-markers.js

@@ -0,0 +1,134 @@
+/*
+  Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
+  (c) 2012-2013, Lennard Voogdt
+
+  http://leafletjs.com
+  https://github.com/lvoogdt
+*/
+
+/*global L*/
+
+(function (window, document, undefined) {
+    "use strict";
+    /*
+     * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
+     */
+
+    L.AwesomeMarkers = {};
+
+    L.AwesomeMarkers.version = '2.0.1';
+
+    L.AwesomeMarkers.Icon = L.Icon.extend({
+        options: {
+            shadowAnchor: [10, 12],
+            shadowSize: [36, 16],
+            className: 'awesome-marker',
+            icon: 'block',
+            markerColor: 'white',
+            iconColor: 'white'
+        },
+
+        initialize: function (options) {
+            options = L.Util.setOptions(this, options);
+        },
+
+        createIcon: function () {
+            var options = L.Util.setOptions(this);
+            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            var path = document.createElementNS('http://www.w3.org/2000/svg', "path");
+            var backgroundCircle = document.createElementNS('http://www.w3.org/2000/svg', "circle");
+            var icongroup = document.createElementNS('http://www.w3.org/2000/svg', "g");
+            var icon = document.createElementNS('http://www.w3.org/2000/svg', "text");
+
+            svg.setAttribute('width', '31');
+            svg.setAttribute('height', '42');
+            svg.setAttribute('class', 'awesome-marker');
+            svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
+            
+            backgroundCircle.setAttribute('cx', '15.5');
+            backgroundCircle.setAttribute('cy', '15');
+            backgroundCircle.setAttribute('r', '11');
+            backgroundCircle.setAttribute('fill', options.markerColor);
+
+            path.setAttributeNS(null, "d", "M15.6,1c-7.7,0-14,6.3-14,14c0,10.5,14,26,14,26s14-15.5,14-26C29.6,7.3,23.3,1,15.6,1z");
+            //path.setAttribute('class', 'awesome-marker-background');
+            path.setAttribute('stroke', 'white');
+            path.setAttribute('style', 'fill:' + options.markerColor)
+
+            icon.textContent = options.icon;
+            icon.setAttribute('x', '7');
+            icon.setAttribute('y', '23');
+            icon.setAttribute('class', 'material-icons');
+            icon.setAttribute('fill', options.iconColor);
+            icon.setAttribute('font-family', 'Material Icons');
+
+            svg.appendChild(path);
+            svg.appendChild(backgroundCircle);
+            icongroup.appendChild(icon);
+            svg.appendChild(icongroup);
+
+            return svg;
+        },
+
+        _createInner: function() {
+            var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;
+
+            if (options.spin && typeof options.spinClass === "string") {
+                iconSpinClass = options.spinClass;
+            }
+
+            if (options.iconColor) {
+                if (options.iconColor === 'white' || options.iconColor === 'black') {
+                    iconColorClass = "icon-" + options.iconColor;
+                } else {
+                    iconColorStyle = "style='color: " + options.iconColor + "' ";
+                }
+            }
+            //return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>"
+            return options.extraClasses + " " + iconClass + " " + iconSpinClass + " " + iconColorClass;
+        },
+
+        _setIconStyles: function (img, name) {
+            var options = this.options,
+                size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
+                anchor;
+
+            if (name === 'shadow') {
+                anchor = L.point(options.shadowAnchor || options.iconAnchor);
+            } else {
+                anchor = L.point(options.iconAnchor);
+            }
+
+            if (!anchor && size) {
+                anchor = size.divideBy(2, true);
+            }
+
+            img.className = 'awesome-marker-' + name + ' ' + options.className;
+
+            if (anchor) {
+                img.style.marginLeft = (-anchor.x) + 'px';
+                img.style.marginTop  = (-anchor.y) + 'px';
+            }
+
+            if (size) {
+                img.style.width  = size.x + 'px';
+                img.style.height = size.y + 'px';
+            }
+        },
+
+        createShadow: function () {
+            var div = document.createElement('div');
+
+            this._setIconStyles(div, 'shadow');
+            return div;
+      }
+    });
+        
+    L.AwesomeMarkers.icon = function (options) {
+        return new L.AwesomeMarkers.Icon(options);
+    };
+
+}(this, document));
+
+
+

OsmAnd/assets/server/scripts/leaflet.awesome-markers.min.js

@@ -0,0 +1,7 @@
+/*
+  Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
+  (c) 2012-2013, Lennard Voogdt
+
+  http://leafletjs.com
+  https://github.com/lvoogdt
+*//*global L*/(function(e,t,n){"use strict";L.AwesomeMarkers={};L.AwesomeMarkers.version="2.0.1";L.AwesomeMarkers.Icon=L.Icon.extend({options:{iconSize:[35,45],iconAnchor:[17,42],popupAnchor:[1,-32],shadowAnchor:[10,12],shadowSize:[36,16],className:"awesome-marker",prefix:"glyphicon",spinClass:"fa-spin",icon:"home",markerColor:"blue",iconColor:"white"},initialize:function(e){e=L.Util.setOptions(this,e)},createIcon:function(){var e=t.createElement("div"),n=this.options;n.icon&&(e.innerHTML=this._createInner());n.bgPos&&(e.style.backgroundPosition=-n.bgPos.x+"px "+ -n.bgPos.y+"px");this._setIconStyles(e,"icon-"+n.markerColor);return e},_createInner:function(){var e,t="",n="",r="",i=this.options;i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?e=i.icon:e=i.prefix+"-"+i.icon;i.spin&&typeof i.spinClass=="string"&&(t=i.spinClass);i.iconColor&&(i.iconColor==="white"||i.iconColor==="black"?n="icon-"+i.iconColor:r="style='color: "+i.iconColor+"' ");return"<i "+r+"class='"+i.prefix+" "+e+" "+t+" "+n+"'></i>"},_setIconStyles:function(e,t){var n=this.options,r=L.point(n[t==="shadow"?"shadowSize":"iconSize"]),i;t==="shadow"?i=L.point(n.shadowAnchor||n.iconAnchor):i=L.point(n.iconAnchor);!i&&r&&(i=r.divideBy(2,!0));e.className="awesome-marker-"+t+" "+n.className;if(i){e.style.marginLeft=-i.x+"px";e.style.marginTop=-i.y+"px"}if(r){e.style.width=r.x+"px";e.style.height=r.y+"px"}},createShadow:function(){var e=t.createElement("div");this._setIconStyles(e,"shadow");return e}});L.AwesomeMarkers.icon=function(e){return new L.AwesomeMarkers.Icon(e)}})(this,document);