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 © Esri — 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();
}
Aucun commentaire:
Enregistrer un commentaire