Leaflet Map for enyo

LeafletMap.js

enyo.kind({
	name: "LeafletMap",
	classes: "leaflet-map",
	published: {
		center: { lat: 33.7489, lng: -84.3881},
		showMarker: true,
		zoom: 17,
                // point imagePath to your leaflet images folder
		imagePath: "lib/extra/leaflet/images/",
		cloudmadeApiKey: "",
		tileProvider: "google"
	},
	events: {

	},
	rendered: function() {
		this.inherited(arguments);
		this.renderMap();
	},
	renderMap: function() {
		this.destroyMap();
		this.imagePathChanged();
		this.createMap();
		this.createLayer();
		this.zoomChanged();
		this.showMarkerChanged();
	},
	createMap: function() {
		this.map = L.map(this.hasNode());
		this.map.setView(this.getLatLng(), 13);
	},
	createLayer: function () {
		var tile = this.getTile();
		if (tile) {
			tile.settings.maxZoom = this.zoom;
			L.tileLayer(tile.url, tile.settings).addTo(this.map);
		}
	},
	showMarkerChanged: function () {
		if (this.showMarker) {
			if (this.marker) {
				this.marker.setLatLng(this.getLatLng());
			} else {
				this.marker = L.marker(this.getLatLng());
				this.marker.addTo(this.map);
				//L.circle(this.getLatLng(), 30).addTo(this.map);
			}
		}
	},
	imagePathChanged: function () {
		L.Icon.Default.imagePath = this.imagePath;
	},
	zoomChanged: function() {
		this.map.setZoom(this.zoom);
	},
	setCenter: function(inLat, inLng) {
		this.center.lat = inLat;
		this.center.lng = inLng;
		//this.marker.update();
		this.showMarkerChanged();
		this.updateCenter();
	},
	updateCenter: function() {
		this.map.panTo(this.getLatLng());
	},
	destroyMap: function() {
		this.map = null;
	},
	locate: function () {
		this.map.locate({setView: true, maxZoom: this.zoom});
	},
	getZoom: function() {
		return this.map.getZoom();
	},
	getMarker: function () {
		return this.marker;
	},
	getLatLng: function (inLat, inLng) {
		return new L.LatLng(inLat || this.center.lat, inLng || this.center.lng);
	},
	getTile: function () {
		var tile;
		switch (this.tileProvider) {
			case "google":
				tile = {
					url: "http://{s}.googleapis.com/vt?lyrs=m@174225136&src=apiv3.8&hl=en-US&x={x}&y={y}&z={z}&s=Galile&style=api%7Csmartmaps",
					settings: {
						subdomains: ['mt0', 'mt1', 'mt2'],
						attribution: "Map data © 2012 Google"
					}
				};
				break;
			case "cloudmade":
				tile = {
					url: "http://{s}.tile.cloudmade.com/" + this.cloudmateApiKey + "/997/256/{z}/{x}/{y}.png",
					settings: {
						attribution: "Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade"
					}
				};
				break;
		}
		return tile;
	}
	
});

MapView.css

.mapview .map-area .map {
	height: 80%; 
	width: 80%; 
	margin: 50px auto;
	border: 3px solid #DDD;
}

MapView.js

enyo.kind({
		name: "MapView",
		classes: "mapview",
		components: [
			{kind: "Signals",
				onMainNavTap: "mainNavTap",
				onPositionChange: "positionChanged"
			},
			{name: "mapArea", kind: "FittableRows",  classes: "enyo-fit map-area"}
		],
		mainNavTap: function (source, event) {
			if (!this.$.mapArea.$.map) {
				this.map = this.$.mapArea.createComponent({
					name: "map",
					kind: "LeafletMap",
					classes: "map"
				}).render();
			}
		},
		positionChanged: function (source, coords) {
			if (this.map) {
				this.map.setCenter(coords.latitude, coords.longitude);
			}
		}
	});