javascriptphpleafletmapquest

How to display multiple different MapQuest leaflet maps on one single page?


I'm pulling dynamic data from a database to display different maps with different cities and states on one single page.

The problem is that with the code that I have, only one map displays properly.

All the other ones appear grayed-out just like this one :

enter image description here

How can I display multiple MapQuest leaflet maps on one page? Is there a much more efficient way to do this?

This is my code below :

//set var   
$x =0;  

while($map = $result_data->fetch_assoc()){$x++;

//construct the mapid for mapquest
$mapid = 'map'.$x;

//get city 
$city = $map['city'];

//get state
$state = $map['state'];

echo "<script>
L.mapquest.key = 'my_key';
var $mapid = L.mapquest.map('$mapid', {
center: [0, 0],
layers: L.mapquest.tileLayer('map'),
zoom: 14
});
L.mapquest.geocoding().geocode('$city, $state');
</script>";

echo '<div id="map'.$x.'" style="width: 100%; height: 200px;"></div>';

}

Solution

  • I've created three leaflet maps in javascript using the mapquest geocoding this way:

    window.onload = function() {
        var mapLayer = MQ.mapLayer(), map;
            map = L.map('map', {
            layers: mapLayer,
            center: [ 40.731701, -73.993411 ],
            zoom: 12
        }); 
        searchForPosition('Barcelona, Spain', map);
    
        mapLayer = MQ.mapLayer(), map2;
            map2 = L.map('map2', {
            layers: mapLayer,
            center: [ 40.731701, -73.993411 ],
            zoom: 12
        });
        searchForPosition('London, UK', map2);
    
        mapLayer = MQ.mapLayer(), map3;
            map3 = L.map('map3', {
            layers: mapLayer,
            center: [ 40.731701, -73.993411 ],
            zoom: 12
        });
        searchForPosition('New York, USA', map3);
    }
    
    function searchForPosition(query, map) {
      MQ.geocode({ map: map, mapFitBounds: true })
          .search(query)
          .on('success', (result) => {
          const position = result.data.results[0].locations[0].displayLatLng;
          console.log(position)
          map.panTo(new L.LatLng(position.lat, position.lng));
        });
    }
    

    I use this css:

    https://unpkg.com/leaflet@1.6.0/dist/leaflet.css

    and this js:

    https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js

    https://open.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=***

    https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-geocoding.js?key=***

    If you fork this codepen:

    https://codepen.io/jeprubio/pen/QWwdexq

    and set the api keys in the Settings / Javascript section you can see it working.

    You can adapt it to write the coordinates from your code. In your code it should be something like:

    echo "<script>
    function searchForPosition(query, map) {
      MQ.geocode({ map: map, mapFitBounds: true })
          .search(query)
          .on('success', (result) => {
          const position = result.data.results[0].locations[0].displayLatLng;
          map.panTo(new L.LatLng(position.lat, position.lng));
        });
    }
    </script>";
    
    //set var   
    $x = 0;  
    
    while ($map = $result_data->fetch_assoc()) {
       $x++;
    
       //construct the mapid for mapquest
       $mapid = 'map'.$x;
    
       //get city 
       $city = $map['city'];
    
       //get state
       $state = $map['state'];
    
       echo "<script>
       mapLayer = MQ.mapLayer(), $mapid;
         $mapid = L.map('$mapid', {
         layers: mapLayer,
         center: [ 40.731701, -73.993411 ],
         zoom: 12
       }); 
       searchForPosition('$city, $state', map3);
       </script>";
    
       echo '<div id="'.$mapid.'" style="width: 100%; height: 200px;"></div>';
    }