Как добавить маркеры на ту же карту, используя MappaJS и буклет? - PullRequest
Новая
       21

Как добавить маркеры на ту же карту, используя MappaJS и буклет?

0 голосов
/ 25 сентября 2019

У меня есть файл, который содержит города с lon и lat и количеством людей.Я просто использовал настройки mappa.js и p5.js для визуализации данных на карте, вот и все.но я не могу использовать ту же карту, чтобы добавить маркеры, потому что с mappaJs карта генерируется в холст без конкретного идентификатора на HTML-странице, я не знаю, как на самом деле я могу использовать ту же карту и добавить некоторые маркеры на ней 

<script>
//initialize datas
let data = [id , lon , lat , nombreTotal, nameOfCity ];

// Create a variable to hold our map
let trainMap;
// Create a variable to hold our canvas
let canvas;
// Create a new Mappa instance using Leaflet.
const mappa = new Mappa('Leaflet');
// Create tile's options
const options = {
  lat: 34.01078088346904,
  lng: -6.829549327241807,
  zoom: 6,
  style: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
}
// p5.js setup
function setup() {
    data = [];
    // Create a canvas 1920x900
    canvas = createCanvas(1920,900);
    // Create a tile map with lat , lng , zoom , style
    trainMap = mappa.tileMap(options);
    // Overlay the canvas over the tile map
    trainMap.overlay(canvas);

    for (let d of data){
        let diametre = Math.sqrt(nombreTotal);
        data.push({
            diametre
        });
    }

    trainMap.onChange(draw);
    fill( 255 , 0 , 10 , 100);
}

//dRAW FUNCTION
function draw(){
    clear(); 
    for (let d of data){
        const pix = trainMap.latLngToPixel(d.lat , d.lon);

        const zoom = trainMap.zoom() * sin(frameCount * 0.05) ;
        ellipse(pix.x , pix.y , d.diametre * (zoom) );
    }
}
</script>

, который заставляет меня визуализировать данные в форме эллипса, как и ожидалось, но я не могу добавить маркеры на ту же карту, я пробовал это, но это не работает: 

// I TRIED TO ADD MARKERS, BUT IT'S NOT WORKING
                for (let d of data){
                L.marker( [d.lat, d.lon] )
                    .bindPopup('<a href="su/' + d.id + '" target="_blank">' + d.nameOfCity + '</a>' );
                }
...