PDA

View Full Version : Sencha Touch 2 and Cluster Marker of Google Maps



andvitiello
19 Sep 2012, 7:10 AM
I begin this discussion with a question. Subsequently I will insert the code of test. Taming you, with sencha touch is possible to create the markercluster (gmap cluster) that has been created with jquery? Is it possible that is, having available a record with all the latitude-longitudes (and therefore a marker done create for every coordinate), to create a general map of the whole world containing all the present markers and done visualize and done gather through cluster? Then to visualize to video the number of present marker in that clusters? This is possible with jquery, in fact it has already been servant. But with sencha touch? I am trying there but for now I don't succeed in finding a solution

andvitiello
20 Sep 2012, 5:02 PM
uao my compliments...are helping a lot me in this forum! I have never seen a forum so open to the users' applications. Do I perhaps ask the moon? Do I perhaps ask things that you don't know how to plan?
=D>=D>=D>=D>=D>

mitchellsimoens
21 Sep 2012, 4:22 AM
uao my compliments...are helping a lot me in this forum! I have never seen a forum so open to the users' applications. Do I perhaps ask the moon? Do I perhaps ask things that you don't know how to plan?
=D>=D>=D>=D>=D>

This kind of remark will likely drive people away from helping you. These are community forums so if someone comes along and can answer then they will, if they don't feel like helping you, they don't have to. I personally will not look at ta thread unless it has been open for 36 hours.

andvitiello
21 Sep 2012, 5:25 AM
they are departed 48 hours...and comments and helps I don't see of it really! who knows then the motive. I repeat, I am perhaps asking things that have a great difficulty in the being implemented, also from who is already from more time in to program with sencha touch. This is then the reality.

mitchellsimoens
21 Sep 2012, 5:43 AM
Sorry, I didn't work while I was sleeping :)

I'm not 100% sure what you are saying either but maybe English isn't your primary language so I'm just trying to understand what you are trying to ask for.

andvitiello
21 Sep 2012, 6:05 AM
Do you know that the application GMAP 3 for JQUERY? There is one functionality of his, it calls CLUSTERING, here you can see this of which I speak:
http://gmap3.net/examples/clustering.html


well, I am trying to effect the clustering through sencha touch 2. Or I would love to be able to plan it, but I am aloft sea, because I don't succeed in everything understanding as to make to visualize on a map all the thousand of marker that are the result of opportune request to the database. Is it possible to effect a thing of the kind with sencha touch? Or him he can do only through jquery? To you the answers, always if you have her

mitchellsimoens
21 Sep 2012, 6:51 AM
You have access to the Google Map instance from the ST2 Map component so it'd be easy to use the MarkerClusterer class for Google Maps. Just need to use the maprender event:


function(stMap, gMap) {
//...
}

andvitiello
21 Sep 2012, 7:12 AM
and with this? I repeat, I don't have the visualization of all the markers in a world map yet. I have also tried to call the method clustermarker of google maps but nothing. If you find an example that can make me understand better the things, it would be more profit for me.

andvitiello
23 Sep 2012, 1:34 PM
My model and my store


Ext.define('Twitter.model.Contact', { extend: 'Ext.data.Model',


config: {
fields: [
{name: 'latitude', type: 'string'},
{name: 'longitude', type: 'string'}
]


}
});





Ext.define('Twitter.store.Contacts', {
extend: 'Ext.data.Store',


config: {
model: 'Twitter.model.Contact',
autoLoad: true,

clearOnPageLoad: false,

storeId: 'itemsStoreId',

proxy: {
type: 'ajax',
url: 'http://localhost:9090/MVisualCRendServer/getLatLong.do'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'tweet',
}


}
});



My app.js linked at the index.html


//<debug>Ext.Loader.setPath({
'Ext': 'src'
});
//</debug>


Ext.application({
name: 'Twitter',


phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',


glossOnIcon: false,
icon: {
57: 'resources/icons/icon.png',
72: 'resources/icons/icon@72.png',
114: 'resources/icons/icon@2x.png',
144: 'resources/icons/icon@114.png'
},


models: ['Contact'],
stores: ['Contacts'],
views: ['Main'],
//controllers: ['Application'],


launch: function() {
Ext.Viewport.add({
xclass: 'Twitter.view.Main',
});
}
});


and my Main.js


Ext.define('Twitter.view.Main', { extend: 'Ext.Map',

config: {
listeners: [
{
fn: 'onMapMaprender',
event: 'maprender'
}
]
},

onMapMaprender: function(map, gmap, options) {

var store = Ext.getStore('itemsStoreId');

store.each(function(record) {
//add marker using record.get
var latitude = record.get('latitude'),
longitude = record.get('longitude');



new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map.getMap(),
draggable: false,
animation: google.maps.Animation.DROP
});
});
}

});


now taming to you: why does a non world map go out but of a zones of the usa, without marker? In my db and in the json that I send from the server there are more than 2000 latitude and longitude different, therefore I expect me for 2000 different markers. Where am I wrong? Here is what said 2 days ago. How do I do to make to visualize the clustering, if the world map doesn't even visualize a marker? I hope that someone can help me

andvitiello
23 Sep 2012, 3:10 PM
I have finally succeeded in resolving the visualization of the over 2000 markers with a world map. This is the new code.


Ext.define('Twitter.view.Main', { extend: 'Ext.Map',

config: {

mapOptions: {
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
panControl: true,
rotateControl: true,
streetViewControl: false,
mapTypeControl: true,
zoom: 2
},

listeners: [
{
fn: 'onMapMaprender',
event: 'maprender'
}
],
},

onMapMaprender: function(map, gmap, options) {

var store = Ext.getStore('itemsStoreId');

store.on('load', function () {
store.each(function (rec, idx, cnt) {
var latLng = new google.maps.LatLng(rec.get('latitude'), rec.get('longitude'));


var marker = new google.maps.Marker({
map: gmap,
position: position = latLng,
draggable: false,
title : 'Position = ' + position.toString(),
});

var infowindow = new google.maps.InfoWindow({
content: marker.title

});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(gmap, marker);
});

marker.setMap(gmap);
});

});

}

});



Now, as to effect the clustering? Make me know if someone knows how and thing to do

M165437
4 Jan 2013, 3:23 AM
I had the same question and found an answer elsewhere (https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/WfvnTaaVoTk). For documentation purposes:

The cluster functionality is part of the google maps utility library (https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries), see their examples on how to use it (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/examples/). You need to include the markerclusterer.js (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js) script in your project. I copied it into a utils folder in resources and added it to the app.json file under "js". Hope this helps…


{
"path": "resources/utils/markerclusterer.js"
},

Pulp Fiction
25 Oct 2013, 12:26 AM
Hi, I really can not solve this problem. I really tried everything but the map always shows me the default location.

All I can do is show my work, hoping for help. Please, I can not go on :(

I have a Navigation View that manages a list that show some details. With these details I want to bring up a map, the store that I use contains the coordinates, latitude and longitude.

The NavigationView:

Ext.define('Map.view.EventsView', {
extend: 'Ext.navigation.View',
alias: 'widget.eventView',

requires: [
'Map.view.EventsList'
],

config: {
items: [
{
xtype: 'eventsList'
}
]
}
});

The List:

Ext.define('Map.view.EventsList', {
extend: 'Ext.Panel',
alias: 'widget.eventsList',

config: {
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
disableSelection: true,
styleHtmlContent: true,
itemTpl: [
'<div><h3>{city}</h3><p>{country}</p><p>{date}</p></div>'
],
store: 'eventStore'
}
]
}
});

The Detail Panel with the Map:

Ext.define('Map.view.Events', {
extend: 'Ext.Panel',
id: 'eventsPanel',

config: {
layout: 'vbox',
flex: 1,
scrollable: true,
styleHtmlContent: true,
tpl: [
'<div>',
'<h2>{text}</h2>',
'<h3>{description}</h3>',
'<p>{city} - {country}</p>',
'<p>{address}</p>',
'<p>{date}</p>',
'<p>{place}</p>',
'</div>'
],
items: [
{
xtype: 'map',
docked: 'bottom',
height: 200,
mapOptions: {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latLng
}
}
]
},

initialize: function () {
this.callParent();

var store = Ext.getStore('eventStore');

store.on('load', function () {
store.each(function (rec, idx, cnt) {
var latLng = new google.maps.LatLng(rec.get('latitude'), rec.get('longitude'));
});
});
}
});

The controller for the navigation:

Ext.define('Map.controller.Event', {
extend: 'Ext.app.Controller',

config: {
refs: {
eventView: 'eventView'
},
control: {
'eventView eventsList list': {
itemtap: function(list,index,target,record){

var eventsPanel = Ext.create('Map.view.Events');
eventsPanel.setData(record.data);
this.getEventView().push(eventsPanel);

this.application.fireEvent('eventsPanelShown',{
data: record.data,
button: eventsPanel.getItems().items[0]
});
}
}
}
},
init: function(application) {
this.application = application;
}
});

And the Json Store:

Ext.define('Map.store.Events', {
extend: 'Ext.data.Store',

requires: [
'Map.model.Event'
],

config: {
autoLoad: true,
model: 'Map.model.Event',
storeId: 'eventStore',
proxy: {
type: 'ajax',
url: 'store.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
});


Thank you very much...