Kitchen Plugin Leaflet Mapbox

Kitchen Plugin Leaflet Mapbox

mkdir ~/.meteor-kitchen/plugins/leaflet
then create plugin.js and plugin.json and copy the codes below
after that, you can use recipe.yaml below to create your sample app

FOR PLUGIN.JS

var kitchen = require('meteor-kitchen');
var component = kitchen.getInput();

var zoom   = component.properties.zoom;
var point  = component.properties.point;
var height = component.properties.height;
var key    = component.properties.key;
var legend = component.properties.legend;
var title  = component.properties.title;
var source = component.properties.source;
var layers = []; var colors = []; var labels = [];

for (i=0; i<11; i++) {
  if (component.properties.layers != undefined) {
    if (component.properties.layers[i] != undefined) {layers.push(component.properties.layers[i])}
  }
}

for (i=0; i<11; i++) {
  if (component.properties.colors != undefined) {
    if (component.properties.colors[i] != undefined) {colors.push(component.properties.colors[i])}
  }
  if (component.properties.labels != undefined) {
    if (component.properties.labels[i] != undefined) {colors.push(component.properties.labels[i])}
  }
}

if (zoom   === undefined) {var zoom = 13;}
if (point  === undefined) {var point = '0.50710, 101.44870';}
if (layer  === undefined) {var layer = 'https://api.mapbox.com/styles/v1/dishutriau/cixofsubt002t2rphjjycg7xw/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A';}
if (height === undefined) {var height = 600;}
if (key    === undefined) {var key = 'pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A';}
if (legend === undefined) {var legend = false;}
if (title  === undefined) {var title = 'Legenda Peta';}
if (source === undefined) {var source = '<small>Sumber: SK Menhut 393</small>';}
if (layers[0] === undefined) {layers[0] = ["Warna Peta", "https://api.mapbox.com/styles/v1/dishutriau/cixofsubt002t2rphjjycg7xw/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A"]}
if (layers[1] === undefined) {layers[1] = ["Label Peta", "https://api.mapbox.com/styles/v1/dishutriau/cixyh6dh3005q2sqdz1orhxnp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A"]}
if (colors[0] === undefined) {colors[0] = ['AD40FE', '606A60', '8AF200', 'FFFF00', 'FF5EFF']}
if (labels[0] === undefined) {labels[0] = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5']}
if (colors[1] === undefined) {colors[1] = ['AD40FE', '606A60', '8AF200', 'FFFF00', 'FF5EFF']}
if (labels[1] === undefined) {labels[1] = ['Label1', 'Label2', 'Label3', 'Label4', 'Label5']}

component.js =  '';
component.js += 'Template.TEMPLATE_NAME.rendered = function() {' + '\n';
component.js += '  Mapbox.debug = true;' + '\n';
component.js += '  Mapbox.load({plugins:["locate"]});' + '\n';
component.js += '  this.autorun(function() {' + '\n';
component.js += '    if(Mapbox.loaded()) {' + '\n';
component.js += '      L.mapbox.accessToken = "'+key+'";' + '\n';
component.js += '      var map = L.mapbox.map("map");' + '\n';
component.js += '      map.setView(['+point+'], '+zoom+');' + '\n';


component.js += '      L.control.layers({}, {' + '\n';
for (i=0; i<11; i++) {
  if (layers[i] != undefined) {
    component.js += '      "'+layers[i][0]+'": L.tileLayer("'+layers[i][1]+'").addTo(map),' + '\n';
  }
}
component.js += '      }).addTo(map);' + '\n';

component.js += '      map.addControl(L.mapbox.geocoderControl("mapbox.places"));' + '\n';
component.js += '      L.control.locate().addTo(map);' + '\n';
if (legend != false) {component.js += '      map.legendControl.addLegend(document.getElementById("legend").innerHTML);' + '\n';}
component.js += '      L.control.scale().addTo(map);' + '\n';

/* marker from geocoder form */
component.js += '      $("form.leaflet-control-mapbox-geocoder-form").find("input").addClass("coordinate");' + '\n';
component.js += '      $(".coordinate").attr("placeholder", "Lat, Lon    /    Place");' + '\n';
component.js += '      $(".coordinate").keypress(function(e) {' + '\n';
component.js += '        if(e.which == 13) {' + '\n';
component.js += '          var coordinate = $(".coordinate").val().toString().split(", ");' + '\n';
component.js += '          var lat = coordinate[0];' + '\n';
component.js += '          var lng = coordinate[1];' + '\n';
component.js += '          L.marker([lat, lng]).bindPopup("Lat: "+lat+"<br /> Lon: "+lng).addTo(map);' + '\n';
component.js += '          map.panTo(new L.LatLng(lat, lng));' + '\n';
component.js += '        }' + '\n';
component.js += '      });' + '\n';
component.js += '    };' + '\n';
component.js += '  });' + '\n';
component.js += '};';

component.html =  '';
component.html += '<template name="TEMPLATE_NAME">' + '\n';
component.html += '  <style>' + '\n';
component.html += '    .legend label, .legend span {' + '\n';
component.html += '      display:block; float:left; height:15px; width:20%;' + '\n';
component.html += '      text-align:center; font-size:9px; color:#808080;' + '\n';
component.html += '    },' + '\n';
component.html += '    .search-ui {' + '\n';
component.html += '      position:absolute; top:10px;' + '\n';
component.html += '      right:10px; z-index:1000;' + '\n';
component.html += '    }' + '\n';
component.html += '  </style>' + '\n';
component.html += '  <div>' + '\n';
component.html += '    <div id="legend" style="display:none;">' + '\n';
component.html += '      <strong>'+title+'</strong>' + '\n';

for (j=0; j<colors.length; j++) {
  if (colors[j] != undefined) {
    component.html += '      <nav class="legend clearfix">' + '\n';
    for (i=0; i<5; i++) {component.html += '        <span style="background:#'+colors[j][i]+';"></span>' + '\n';}
    for (i=0; i<5; i++) {component.html += '        <label>'+labels[j][i]+'</label>' + '\n';}
    component.html += '      </nav>' + '\n';
  }
}

component.html += '<strong>Sumber: SK Menhut 393 Dinas Kehutanan Provinsi Riau</strong>';
component.html += '    </div>' + '\n';
component.html += '    <div id="map" style="height:'+height+'px"></div>' + '\n';
component.html += '  </div>' + '\n';
component.html += '</template>';

kitchen.setOutput(component);



FOR PLUGIN.JSON

{
  "packages" : {
    "meteor": [
      "reactive-dict",
      "bevanhunt:leaflet",
      "pauloborges:mapbox",
      "ianng:leaflet-control-geocoder"
    ]
  }
}

FOR RECIPE.YAML
all properties are optional
colors and labels arrays only accept exactly 5 each

application:
  title: Example application
  free_zone:
    pages:
      - name: home
        title: Home page
    components:
      - name: your_map
        type: leaflet
        properties:
          zoom: 13
          point: '0.50710, 101.4487'
          height: 600
          key: pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A
          legend: active
          title: Title for Legends
          source: Footer for Legends
          layers[0]: ['Name 1', 'https://api.mapbox.com/styles/v1/dishutriau/cixofsubt002t2rphjjycg7xw/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A']
          layers[1]: ['Name 2', 'https://api.mapbox.com/styles/v1/dishutriau/cixyh6dh3005q2sqdz1orhxnp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGlzaHV0cmlhdSIsImEiOiJjaXg5YjdzMXUwMDNyMnludnpraHhjaWR4In0.uMF7Cahdvczs11rdQGyu9A']
          colors[0]: ['1191bc', '8edd54', 'a33437', 'caa873', '8a9933']
          labels[0]: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']
          colors[1]: ['29dd4f', 'd77b03', 'fc7790', '0db57c', '6b2520']
          labels[1]: ['Label 6', 'Label 7', 'Label 8', 'Label 9', 'Label 10']
      - name: about
        title: About
        text: >-
          For another map
    components:
      - name: main_menu
        type: menu
        items:
          - title: Home page
            route: home
            icon_class: fa fa-home
          - title: About
            route: about