Leaflet Marker in Sencha 2 Architect or Touch
Hey guys,
I'm very new to Sencha and overall Java, i want to build a map (leaflet) with markers all offline, i got the map going using the Vinylfox Ext.us.touch.leaflet.js, but i don't know how to add a marker and i have searched everywhere, there are examples of leaflet markers, but i think they are from Sencha 1x and they don't really work for me
This is the code
Code:
/**
* Wraps a Leaflet Map in an Ext.Component.
*
* ## Example
*
* Ext.Viewport.add({
* xtype: 'leaflet',
* useCurrentLocation: true
* });
*
*/
Ext.define('Ext.Leaflet', {
extend: 'Ext.Component',
xtype : 'leaflet',
requires: ['Ext.util.GeoLocation'],
isMap: true,
config: {
/**
* @event maprender
* @param {Ext.Map} this
* @param {L.Map} map The rendered map instance
*/
/**
* @event centerchange
* @param {Ext.Map} this
* @param {L.Map} map The rendered map instance
* @param {L.LatLng} center The current LatLng center of the map
*/
/**
* @event zoomchange
* @param {Ext.Map} this
* @param {L.Map} map The rendered Leaflet map instance
* @param {Number} zoomLevel The current zoom level of the map
*/
/**
* @cfg {String} baseCls
* The base CSS class to apply to the Maps's element
* @accessor
*/
baseCls: Ext.baseCSSPrefix + 'lmap',
/**
* @cfg {Boolean/Ext.util.GeoLocation} useCurrentLocation
* Pass in true to center the map based on the geolocation coordinates or pass a
* {@link Ext.util.GeoLocation GeoLocation} config to have more control over your GeoLocation options
* @accessor
*/
useCurrentLocation: true,
/**
* @cfg {map} map
* The wrapped map.
* @accessor
*/
map: null,
/**
* @cfg {Ext.util.GeoLocation} geo
* @accessor
*/
geo: null,
/**
* @cfg {Object} mapOptions
* @accessor
*/
mapOptions: {}
},
constructor: function() {
this.callParent(arguments);
this.options= {};
this.element.setVisibilityMode(Ext.Element.OFFSETS);
},
initialize: function() {
this.callParent();
this.geo = this.geo || new Ext.util.GeoLocation({
autoLoad : true
});
this.on({
painted: 'renderMap',
scope: this
});
this.element.on('touchstart', 'onTouchStart', this);
},
onTouchStart: function(e) {
e.makeUnpreventable();
},
applyMapOptions: function(options) {
return Ext.merge({}, this.options, options);
},
updateMapOptions: function(newOptions) {
var map = this.getMap();
if (map) {
map.setOptions(newOptions);
}
},
getMapOptions: function() {
return Ext.merge({}, this.options);
},
updateUseCurrentLocation: function(useCurrentLocation) {
this.setGeo(useCurrentLocation);
},
applyGeo: function(config) {
return Ext.factory(config, Ext.util.GeoLocation, this.getGeo());
},
updateGeo: function(newGeo, oldGeo) {
var events = {
locationupdate : 'onGeoUpdate',
locationerror : 'onGeoError',
scope : this
};
if (oldGeo) {
oldGeo.un(events);
}
if (newGeo) {
newGeo.on(events);
newGeo.updateLocation();
}
},
doResize: function() {
var map = this.getMap();
if (map) {
map.invalidateSize();
}
},
// @private
renderMap: function() {
var me = this,
element = me.element,
mapOptions = me.getMapOptions(),
event;
this.tileLayer = new L.TileLayer('file://localhost/c|/cashe/{z}/{x}/{y}.png', {
maxZoom : 18
});
mapOptions = Ext.merge({
layers : [this.tileLayer],
zoom : this.zoomLevel || 12,
maxZoom : 18,
zoomControl : true,
attributionControl : false,
center : this.center || new L.LatLng(42.6667, 21.1667)
}, mapOptions);
this.map = new L.Map(element.id, mapOptions);
this.map.addLayer(this.tileLayer);
me.fireEvent('maprender', me, this.map);
},
// @private
onGeoUpdate: function(geo) {
if (geo) {
this.setMapCenter(new L.LatLng(geo.getLatitude(), geo.getLongitude()));
}
},
// @private
onGeoError: Ext.emptyFn,
/**
* Moves the map center to the designated coordinates hash of the form:
*
* { latitude: 39.290555, longitude: -76.609604 }
*
* or a L.LatLng object representing to the target location.
*
* @param {Object/L.LatLng} coordinates Object representing the desired Latitude and
* longitude upon which to center the map.
*/
setMapCenter: function(coordinates) {
var me = this,
map = me.getMap();
if (map && coordinates) {
if (!me.isPainted()) {
me.un('painted', 'setMapCenter', this);
me.on('painted', 'setMapCenter', this, { single: true, args: [coordinates] });
return;
}
if (coordinates && !(coordinates instanceof L.LatLng) && 'longitude' in coordinates) {
coordinates = new L.LatLng(coordinates.latitude, coordinates.longitude);
}
if (!map) {
me.renderMap();
map = me.getMap();
}
if (map && coordinates instanceof L.LatLng) {
map.setView(ctr, this.zoomLevel);
}
else {
this.options = Ext.apply(this.getMapOptions(), {
center: coordinates
});
}
}
},
// @private
onZoomChange : function() {
var mapOptions = this.getMapOptions(),
map = this.getMap(),
zoom;
zoom = (map && map.getZoom) ? map.getZoom() : mapOptions.zoom || 10;
this.options = Ext.apply(mapOptions, {
zoom: zoom
});
this.fireEvent('zoomchange', this, map, zoom);
},
// @private
onCenterChange: function() {
var mapOptions = this.getMapOptions(),
map = this.getMap(),
center;
center = (map && map.getCenter) ? map.getCenter() : mapOptions.center;
this.options = Ext.apply(mapOptions, {
center: center
});
this.fireEvent('centerchange', this, map, center);
},
// @private
destroy: function() {
Ext.destroy(this.getGeo());
this.callParent();
}
});
this is the marker that i want to add
From Leaflet Website
Code:
var marker = L.marker([42.6667, 21.1667]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.")();
Thnx
Try copying form Leaflet Example code
Try copying from the Leaflet example code....it worked for me....var marker = new L.Marker(new L.LatLng(39.61, -105.02)), etc
Then for the popups:
marker.bindPopup("<h3>Hello Maps!</h3>This is Leaflet.js");
You can even attach an marker.on click function to the Leaflet markers and have normal Sencha popups instead of the standard leaflet ones
:-)
