Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

162
Views
How add custom image to textballoon Leaflet

I want to add a custom textballoon/popup to my leaflet map.

I totally stuck atm.

The popup i add as new layer because for automatic open on load.

My code:

      const map = L.map('map').setView([52.2129919, 5.2793703], 8);
      // load a tile layer
      L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>',
          maxZoom: 18,
        }).addTo(map);
         

      let markersArray = {}; // create the associative array
      let magsArray = {}; // here hold the ids that correspond to the mags
      // load GeoJSON from an external file
      $.getJSON("geojs.php", data => {

        L.geoJson(data, {

          // add GeoJSON layer to the map once the file is loaded
          pointToLayer: function(feature, latlng) {
            const mag = feature.properties.message;


            
            // here record the mags
            magsArray[feature.properties.id] = feature.properties.place+'&nbsp'+feature.properties.message;
            
            //testpopup
var popupLocation1 = (feature, latlng);


<!-- var popupContent1 = '<span class="speed speed-current leaflet-zoom-hide speed-confirmed"><span class="speedContent"><span class="dateTxt">'+feature.properties.place+'</span><br><span class="speedTxt">'+feature.properties.message+'</span><span class="kmphTxt">km/h</span>'+'</span></span>', -->
var popupContent1 = '<span class="speedContent"><span class="dateTxt">'+feature.properties.place+'</span> <span class="speedTxt">'+feature.properties.message+'</span><span class="kmphTxt">km/h</span></span>',

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

map.addLayer(popup1);           
            

          },
        });
      });

How it now looks:

enter image description here

How i want it:

enter image description here

The logo:

enter image description here

I hope some one can help me,

Kind regards.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!