← Back to branch summary

~berthold-daum/zora/trunk

« back to all changes in this revision

Viewing changes to com.bdaum.zoom.gps.leaflet/gmap/Leaflet.MakiMarkers.js

  • Committer: bdaum
  • Date: 2015-12-26 10:21:51 UTC
  • Revision ID: berthold.daum@bdaum.de-20151226102151-44f1j5113167thb9
Version 2.4.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
com.bdaum.zoom.gps.leaflet/gmap/Leaflet.MakiMarkers.js
 
1
/*
 
2
 * Leaflet plugin to create map icons using Maki Icons from MapBox.
 
3
 *
 
4
 * References:
 
5
 *   Maki Icons: https://www.mapbox.com/maki/
 
6
 *   MapBox Marker API: https://www.mapbox.com/developers/api/static/#markers
 
7
 *
 
8
 * Usage:
 
9
 *   var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"});
 
10
 *
 
11
 * License:
 
12
 *   MIT: http://jseppi.mit-license.org/
 
13
 */
 
14
 /*global L:false */
 
15
(function () {
 
16
  "use strict";
 
17
  L.MakiMarkers = {
 
18
    // Available Maki Icons
 
19
    icons: ["airfield","airport","alcohol-shop","america-football","art-gallery","bakery","bank","bar",
 
20
      "baseball","basketball","beer","bicycle","building","bus","cafe","camera","campsite","car",
 
21
      "cemetery","chemist","cinema","circle-stroked","circle","city","clothing-store","college",
 
22
      "commercial","cricket","cross","dam","danger","disability","dog-park","embassy",
 
23
      "emergency-telephone","entrance","farm","fast-food","ferry","fire-station","fuel","garden",
 
24
      "golf","grocery","hairdresser","harbor","heart","heliport","hospital","industrial",
 
25
      "land-use","laundry","library","lighthouse","lodging","logging","london-underground",
 
26
      "marker-stroked","marker","minefield","mobilephone","monument","museum","music","oil-well",
 
27
      "park2","park","parking-garage","parking","pharmacy","pitch","place-of-worship",
 
28
      "playground","police","polling-place","post","prison","rail-above","rail-light",
 
29
      "rail-metro","rail-underground","rail","religious-christian","religious-jewish",
 
30
      "religious-muslim","restaurant","roadblock","rocket","school","scooter","shop","skiing",
 
31
      "slaughterhouse","soccer","square-stroked","square","star-stroked","star","suitcase",
 
32
      "swimming","telephone","tennis","theatre","toilets","town-hall","town","triangle-stroked",
 
33
      "triangle","village","warehouse","waste-basket","water","wetland","zoo"
 
34
    ],
 
35
    defaultColor: "#0a0",
 
36
    defaultIcon: "circle-stroked",
 
37
    defaultSize: "m",
 
38
    apiUrl: "https://api.tiles.mapbox.com/v3/marker/",
 
39
    smallOptions: {
 
40
      iconSize: [20, 50],
 
41
      popupAnchor: [0,-20]
 
42
    },
 
43
    mediumOptions: {
 
44
      iconSize: [30,70],
 
45
      popupAnchor: [0,-30]
 
46
    },
 
47
    largeOptions: {
 
48
      iconSize: [36,90],
 
49
      popupAnchor: [0,-40]
 
50
    }
 
51
  };
 
52
 
 
53
  L.MakiMarkers.Icon = L.Icon.extend({
 
54
    options: {
 
55
      //Maki icon: any from https://www.mapbox.com/maki/ (ref: L.MakiMarkers.icons)
 
56
      icon: L.MakiMarkers.defaultIcon,
 
57
      //Marker color: short or long form hex color code
 
58
      color: L.MakiMarkers.defaultColor,
 
59
      //Marker size: "s" (small), "m" (medium), or "l" (large)
 
60
      size: L.MakiMarkers.defaultSize,
 
61
      shadowAnchor: null,
 
62
      shadowSize: null,
 
63
      shadowUrl: null,
 
64
      className: "maki-marker"
 
65
    },
 
66
 
 
67
    initialize: function(options) {
 
68
      var pin;
 
69
 
 
70
      options = L.setOptions(this, options);
 
71
 
 
72
      switch (options.size) {
 
73
        case "s":
 
74
          L.extend(options, L.MakiMarkers.smallOptions);
 
75
          break;
 
76
        case "l":
 
77
          L.extend(options, L.MakiMarkers.largeOptions);
 
78
          break;
 
79
        default:
 
80
          options.size = "m";
 
81
          L.extend(options, L.MakiMarkers.mediumOptions);
 
82
          break;
 
83
      }
 
84
 
 
85
 
 
86
      pin = "pin-" + options.size;
 
87
 
 
88
      if (options.icon !== null) {
 
89
        pin += "-" + options.icon;
 
90
      }
 
91
 
 
92
      if (options.color !== null) {
 
93
        if (options.color.charAt(0) === "#") {
 
94
          options.color = options.color.substr(1);
 
95
        }
 
96
 
 
97
        pin += "+" + options.color;
 
98
      }
 
99
 
 
100
      options.iconUrl = "" + L.MakiMarkers.apiUrl + pin +  ".png";
 
101
      options.iconRetinaUrl = L.MakiMarkers.apiUrl + pin + "@2x.png";
 
102
    }
 
103
  });
 
104
 
 
105
  L.MakiMarkers.icon = function(options) {
 
106
    return new L.MakiMarkers.Icon(options);
 
107
  };
 
108
})();