Skip to content Skip to sidebar Skip to footer
Home / Javascript / Leaflet / Maps

Leaflet: Multiple Maps On Same Page

Post a Comment
I have searched similar questions and have not found an answer for my case. I would like to work with 3 leaflet maps, each one will have different content. Two problems arise: Onl

Solution 1:

Create a reusable mapbox function and pass the map instance each time:

const mapbox = (map) => {
  return L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    token: mapboxToken,
    attribution: mapboxAttribution,
  }).addTo(map)
};

[mapOne, mapTwo, mapThree].forEach(mapInstance => mapbox(mapInstance));


const mapOne = L.map('mapOne', {
  zoomControl: false,
  maxZoom: 18,
  minZoom: 6,
}).setView([40, -4], 6);

const mapTwo = L.map('mapTwo', {
  zoomControl: false,
  maxZoom: 18,
  minZoom: 6,
}).setView([40, -4], 6);

const mapThree = L.map('mapThree', {
  zoomControl: false,
  maxZoom: 18,
  minZoom: 6,
}).setView([40, -4], 6);

// Add a tile layer to the map (Mapbox Streets tile layer)const mapboxToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
const mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={token}';
const mapboxAttribution = [
  'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,',
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,',
  'Imagery © <a href="http://mapbox.com">Mapbox</a>',
].join(" ");

constmapbox = (map) => {
  return L.tileLayer(mapboxUrl, {
    id: 'mapbox.streets',
    token: mapboxToken,
    attribution: mapboxAttribution,
  }).addTo(map)
};

[mapOne, mapTwo, mapThree].forEach(mapInstance =>mapbox(mapInstance));


// Add a zoom control to the mapconst zoomControl = new L.Control.Zoom({
  position: 'topleft'
});
zoomControl.addTo(mapOne);
zoomControl.addTo(mapTwo);
zoomControl.addTo(mapThree);

// Add a scaleconst scaleControl = L.control.scale({
  maxWidth: 200,
  metric: true,
  imperial: false,
  position: 'bottomright'
});
scaleControl.addTo(mapOne);
scaleControl.addTo(mapTwo);
scaleControl.addTo(mapThree);

// Add a fullscreen control to the map (plugin)
mapOne.addControl(new L.Control.Fullscreen());
mapTwo.addControl(new L.Control.Fullscreen());
mapThree.addControl(new L.Control.Fullscreen());
#mapOne,
#mapTwo,
#mapThree {
  width: 80%;
  height: 500px;
  margin-top: 10px;
}
<!DOCTYPE html><htmlclass="main-panel"><head><metacharset="UTF-8"><title>Turismo - Práctica </title><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous"><linkrel="stylesheet"href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /><linkhref='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'rel='stylesheet' /></head><body><divclass="cointainer-fluid"align="center"><divclass="row"><divclass="col-sm-12 col-md-12 col-lg-12 col-xl-12"><divid="mapOne"></div></div></div><divclass="row"><divclass="col-sm-12 col-md-12 col-lg-12 col-xl-12"><divid="mapTwo"></div></div></div><divclass="row"><divclass="col-sm-12 col-md-12 col-lg-12 col-xl-12"><divid="mapThree"></div></div></div></div><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"crossorigin="anonymous"></script><scriptsrc="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script><scriptsrc='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script></body>

Post a Comment for "Leaflet: Multiple Maps On Same Page"