CODEWITHSUNDEEP
javascriptphpleaflet
digerati
digerati

Reputation: 95

Displaying 3 leaflet maps on same page

I have followed many tutorials about displaying two leaflet maps on the same page. My ultimate goal would be to have a php file that I could pass an address to and it would return a div with a map in it, but for now I'm just trying to get 3 maps to appear on the same page. It'll work with two, but not with three, and I am going bald trying to figure this out! Any thoughts on why the first two maps will show, but not the third?

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div id="map_canvas"></div>
</div>
</div>

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div id="map_canvas2"></div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div id="map_canvas3"></div>
</div>
</div>

<script>
var firefoxIcon = L.icon({
iconUrl: 'pin2.png',
iconAnchor: [14, 48]
});

var map = L.map('map_canvas').setView([40.744996, -73.983761], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var marker = L.marker([40.744996, -73.983761], {icon: firefoxIcon}).addTo(map);

var map2 = L.map('map_canvas2').setView([38.895856, -77.009787], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map2);
var marker = L.marker([38.895856, -77.009787], {icon: firefoxIcon}).addTo(map2);

var map3 = L.map('map_canvas3').setView([40.870100, -73.458890], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map3);
var marker = L.marker([40.870100, -73.458890], {icon: firefoxIcon}).addTo(map3);
</script>

Upvotes: 1

Views: 2346

Answers (2)

wirasyafri
wirasyafri

Reputation: 1

the answer from Marat is a live saver, iam so confuse at first looking the answer for multiple map used in one page. just adding class "map" on each div solve my problem.

a little note, make each marker variable unique

<div class="col-12" style="z-index: 1; position: relative;" id="map-province">
    <div class="map" id="map_province"></div>
</div>
<div class="col-12" style="z-index: 1; position: relative;height: 600px" id="map-city">
    <div class="map" id="map_city"></div>
</div>

so in the js its gonna look like this

const mapProvince = L.map('map_province').setView([-1.548926, 120.0148634], 5);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mapProvince);

const mapCity = L.map('map_city').setView([-1.548926, 120.0148634], 5);
const tiles2 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mapCity);

Upvotes: 0

Marat Badykov
Marat Badykov

Reputation: 844

Try this. Add class "map" to your "map_canvas" elements.

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div class="map" id="map_canvas"></div>
</div>
</div>

<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div class="map" id="map_canvas2"></div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="map-wrapper">
<div class="map" id="map_canvas3"></div>
</div>
</div>

<script>
var firefoxIcon = L.icon({
iconUrl: 'pin2.png',
iconAnchor: [14, 48]
});

var map = L.map('map_canvas').setView([40.744996, -73.983761], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var marker = L.marker([40.744996, -73.983761], {icon: firefoxIcon}).addTo(map);

var map2 = L.map('map_canvas2').setView([38.895856, -77.009787], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map2);
var marker = L.marker([38.895856, -77.009787], {icon: firefoxIcon}).addTo(map2);

var map3 = L.map('map_canvas3').setView([40.870100, -73.458890], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map3);
var marker = L.marker([40.870100, -73.458890], {icon: firefoxIcon}).addTo(map3);
</script>

And in your css file add this style:

.map {
    height: 500px;
    width: 80%;
    padding: 10px
}

It will work. Tested in jfiddle.

Upvotes: 1

Related Questions