Discussion :

[DeckHonneur]

Bonjour,

J'ai un problème dans mon programme en javascript, je n'arrive pas à faire la pagination.
J'ai crée un programme permettant de récupérer les différentes adresse de ma base de donnée et ainsi de les afficher sur ma map (openstreetmap) à l'aide de marker.
Le problème étant que les 10 premières adresses (page 1) s'affiche mais pas le reste. Je souhaite afficher toutes les adresses soit +200 adresses avec des marker sur la même map.

Si quelqu'un peut m'aider, ça serai très gentil..

Bout du programme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
   $('#map_canvas').height($('.l-content').height());
 
      this.get('records').forEach(function (record) {
      var split = record.get('forest-adresse').coordinates;
      console.log('adresse', split);
      markers.push([split[0], split[1], record.get('id')]);

[NoSmoking]

Bonjour et bienvenue sur DVP.

Si quelqu'un peut m'aider, ça serai très gentil..

sauf à être devin je ne vois pas comment on pourrait t'aider avec le peu d'informations que tu nous fournies.

Regarde déjà dans la console (F12) si tu as des erreurs voire des limitations de ton API.

[DeckHonneur]

Voici le code en entier:
ce code m'affiche que les 10 premières adresses de ma base de données (soit la page 1) , qui est dans "forest", sur ma street view, à l'aide de marker, je souhaite afficher les +200adresses.. sur la meme map:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
'use strict';
import Ember from 'ember';
 
export default Ember.Component.extend({
  tagName: '',
  router: Ember.inject.service('-routing'),
  map: null,
  loaded: false,
  loadPlugin: function() {
    var that = this;
    Ember.run.scheduleOnce('afterRender', this, function () {
      Ember.$.getScript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js', function () {
        that.set('loaded', true);
      });
 
      var cssLink = $('<link>');
      $('head').append(cssLink);
 
      cssLink.attr({
        rel:  'stylesheet',
        type: 'text/css',
        href: '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css'
      });
    });
  }.on('init'),
  displayMap: function () {
    if (!this.get('loaded')) { return; }
 
    var markers = [];
    $('#map_canvas').height($('.l-content').height());
 
   this.get('records').forEach(function (record) {
      var split = record.get('forest-adresse').coordinates;
      console.log('adresse', split);
      markers.push([split[0], split[1], record.get('id')]);
    });
 
    this.map = new L.Map('map');
 
    var osmUrl='//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
 
    this.map.setView(new L.LatLng(37.7869148, -122.3998675), 13);
    this.map.addLayer(osm);
 
    this.addMarker(markers);
  }.observes('records.[]', 'loaded').on('didInsertElement'),
  addMarker: function (markers) {
    var that = this;
 
    markers.forEach(function (marker) {
      var lat = parseFloat(marker[0]);
      var lng = parseFloat(marker[1]);
 
      var recordId = marker[2];
      var record = that.get('records').findBy('id', recordId);
      var displayValue = record.get(
        that.get('collection.displayFieldWithNamespace')) ||
        record.get('forest-email') || record.get('id');
 
      marker = L.marker([lat, lng]).addTo(that.map);
 
      marker.bindPopup('<strong>Delivery man</strong><p>' + displayValue + '</p>')
 
      marker.on('mouseover', function (e) { this.openPopup(); });
      marker.on('mouseout', function (e) { this.closePopup(); });
      marker.on('click', function () {
        that.get('router')
          .transitionTo('rendering.data.collection.list.viewEdit.details',
            [that.get('collection.id'), recordId]);
      });
 
      setInterval(function () {
        marker.setLatLng(new L.latLng(lat -= 0.0001, lng -= 0.0001));
      }, Math.floor(Math.random() * 2000) + 300);
    });
  }
});

[NoSmoking]

Je tiens a préciser que je ne connais pas Ember.js !!!

Une question quand même, lorsque tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.get('records').forEach(function (record) {

est ce que TOUTES tes données sont présentes, elles arrivent d'où ?

Tu peux regarder en faisant un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var data = this.get('records');
console.log( "data : ", data);

... à moins que la méthode get() ne soit asynchrone .