jeudi 10 mai 2018

leaflet(map) random assignment of the data in the "random user me" site to the marker

This data

  $.ajax({
    url: `https://randomuser.me/api/?inc=name,email,picture&nat=us,dk,fr,gb&results=${resultsCount}&noinfo`,
    dataType: 'json',
    success: function(data) {    

leaflet(map) each ajax url random.user.me marker view.

  marker.bindPopup();

MyCode

 var resultsCount = 6;
getPeople();


$('#count').on('change', function() {
  resultsCount = $(this).val();
  console.log("results count set to: " + resultsCount);
});

function getPeople() {

  $.ajax({
    url: `https://randomuser.me/api/?inc=name,email,picture&nat=us,dk,fr,gb&results=${resultsCount}&noinfo`,
    dataType: 'json',
    success: function(data) {    
      console.log(`There are ${resultsCount} team members`);

      const tmContainer = "<div class='tm-container'><img class='js-picture' src='http://dummyimage.com/400' alt='profile picture'><div class='tm-info'><p class='title pre-healdine'>TITLE</p><h2 class='name'>NAME</h2><p class='bio'>BIO</p></div></div>";

      for(var i = 0; i < resultsCount; i++){
        $(tmContainer).appendTo('.team-cards');
      }

      $('.js-picture').each(function(i) {
        $(this).attr('src', data.results[i].picture.large);

        if (i % 2 === 0) {
          $(this).addClass('cp-diamond');      
        } else if (i % 5 === 0) {
          $(this).addClass('cp-triangle');
        } else {
          $(this).addClass('cp-circle');
        }
      });

      $('.name').each(function(i) {
        $(this).text(`${data.results[i].name.first} ${data.results[i].name.last}`);
      }); 

      $('.bio').each(function(i) {
        $(this).text(data.results[i].email);
      });

    },
    error: function() {
      error: console.log("Uh oh, something went wrong with the ajax call.");
    }
  });    
}

function updatePeople(e) {
  e.preventDefault();
  $('.team-cards').empty();
  getPeople();
}

$('#team-form').on('submit', updatePeople);







function myFunction() {
  var map = L.map('map').setView([51.101516, 10.313446], 6);


        var lat, lng;     
        var thousands = [];

  // improve experience on mobile
  if (map.tap) map.tap.disable();
  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
}).addTo(map);
  map._layersMinZoom=5;


    // create custom marker
    var srf = L.icon({
        iconUrl: 'icons/SRF.png',
        iconSize:     [60, 52], // size of the icon
        iconAnchor:   [0, 26], // point of the icon which will correspond to marker's location
        popupAnchor: [35, -26]
    });

    var rp = L.icon({
        iconUrl: 'icons/RPData.png',
        iconSize:     [52, 60], // size of the icon
        iconAnchor:   [26, 60], // point of the icon which will correspond to marker's location
        popupAnchor: [0, -60]
    });


        for (var i=0; i<50; i++){
          lat = Math.floor(Math.random()*88) + 1;
          lat *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

          lng = Math.floor(Math.random()*88) + 1;
          lng *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

          marker = new L.marker([lat, lng],{icon: srf});
          marker.addTo(map);


      }



    var p1 = L.marker([47.417563, 8.560453], {icon: srf}).addTo(map);
    var p2 = L.marker([51.233059, 6.698716], {icon: rp}).addTo(map);
     var p3 = L.marker([54.233059, 7.698716], {icon: rp}).addTo(map);

    marker.bindPopup("<p class='bio'></p></div>");
    marker.bindPopup("<p class='bio'></p></div>").openPopup();
    marker.bindPopup("<p class='name'></p></div>").openPopup();

    var popup = L.popup();






}

enter image description here




Aucun commentaire:

Enregistrer un commentaire