2

I have this webpage that I am developing which involves multiple Leaflet maps on the webpage using jQuery from top to bottom. See this lo-fi wireframe for a closer look . I have tried to add multiple <div>s in index.html and multiple map variables in main.js (and yes, styled in CSS), as well as creating a function like kboul's answer here on StackOverflow but no matter what I do, it ends up just being one map that does not load the base map. For now, I have included the code that works with only one map See this image of what the code looks like with all the layers on and working. Also please note the coordinates have been redacted because there were so many.

Here is my code:

/*Stylesheet by Will P. Campbell,2021*/

//map to contain '31500' polygon
var map = L.map('mapid').setView([45.5, -89.5], 7);

//map to contain '27500' polygon
var map2 = L.map('mapid2').setView([45.5, -89.5], 7);

//map to contain '24000' polygon
var map3 = L.map('mapid3').setView([45.5, -89.5], 7);

//map to contain '20500' polygon
var map4 = L.map('mapid4').setView([45.5, -89.5], 7);

//map to contain '17000' polygon
var map5 = L.map('mapid5').setView([45.5, -89.5], 7);

//map to contain '14600' polygon
var map6 = L.map('mapid6').setView([45.5, -89.5], 7);

//map to contain '11000' polygon
var map7 = L.map('mapid7').setView([45.5, -89.5], 7);


var baseMap = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}', {
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  subdomains: 'abcd',
  minZoom: 0,
  maxZoom: 18,
  ext: 'png'
}).addTo(map);


/*Glacier 11000*/
var Toe_11000 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          //redacted
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 1,
      "Years_Ago": 11000,
      "SHAPE_Leng": 387749.141631,
      "Shape_Le_1": 5.06435076694,
      "Shape_Area": 0.429078160361,
      "filename": "11000.jpg"
    }
  }]
};

var g11000 = L.geoJSON(Toe_11000, {
  style: {
    color: "#e41a1c"
  }
});

g11000.on({
  click: function() {
    $("#panel").html(Toe_11000.features[0].properties.Years_Ago + " Years Ago" + info11000 + glacierInfo + selfPlug);
  }
});

/*Glacier 14600*/
var Toe_14600 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-90.65116417499996, 47.70293454200004],
          [-90.72482365299999, 47.673924999000064],
          [-90.79822703099995, 47.63344243800003],
          [-90.87151684099996, 47.592913355000064],
          [-90.93607653299995, 47.54240954900007],
          [-90.98389479799994, 47.50486972300007],
          [-91.01266156999998, 47.46605101600005],
          [-91.03524057399994, 47.43585163000006],
          [-91.09569047499997, 47.40672034700003],
          [-91.16068607799997, 47.39608128700007],
          [-91.20242634199997, 47.38136616700007],
          [-91.24370674999994, 47.34807033200008],
          [-91.24727017899994, 47.32089010200008],
          [-91.27829107399998, 47.30054916700004],
          [-91.35252049299999, 47.24684182500005],
          [-91.42454322999998, 47.19454164700005],
          [-91.49851758599999, 47.142169952000074],
          [-91.58297018999997, 47.09531966900005],
          [-91.69593298799998, 47.02941600500003],
          [-91.78970295499994, 46.95941544900006],
          [-91.82835428899995, 46.930232197000066],
          [-91.91162510599997, 46.86744039100006],
          [-91.99554737199998, 46.82743409100004],
          [-92.06911560299994, 46.79183942000003],
          [-92.12271105199994, 46.779428163000034],
          [-92.18228311199994, 46.76116312500005],
          [-92.25397574199997, 46.73548525600006],
          [-92.32346255299996, 46.70837829200008],
          [-92.37452539699996, 46.68875637000008],
          [-92.41380912499994, 46.68507654200005],
          [-92.47155654999995, 46.67669948400004],
          [-92.49779041299996, 46.66041357700004],
          [-92.53630909799995, 46.640992280000034],
          [-92.60352557599998, 46.61519304900003],
          [-92.65025475699997, 46.595545755000046],
          [-92.66997578199994, 46.57508444400003],
          [-92.69410222099998, 46.56023089900003],
          [-92.73425967299994, 46.53498854400004],
          [-92.79268852199999, 46.503571829000066],
          [-92.84256524699998, 46.468051606000074],
          [-92.88183268599994, 46.42849094400003],
          [-92.92753540999996, 46.394466917000045],
          [-92.94989701799994, 46.34959887800005],
          [-92.95186608799997, 46.30954130100008],
          [-92.92975250899997, 46.28153421700006],
          [-92.85925850399997, 46.27331860700008],
          [-92.79127616799997, 46.27357100900008],
          [-92.71321257399995, 46.27830917600005],
          [-92.63952461199995, 46.28860811000004],
          [-92.57829646799996, 46.301436514000045],
          [-92.50925582199994, 46.32440533500005],
          [-92.44221727099995, 46.347289440000054],
          [-92.41261793199999, 46.37792243000007],
          [-92.37035638299994, 46.40309578500006],
          [-92.32010085699994, 46.43555965100006],
          [-92.22421472899998, 46.46604055800003],
          [-92.16676037899998, 46.47714513900007],
          [-92.07164040799995, 46.47747958900004],
          [-91.96355058399996, 46.462242262000075],
          [-91.88129117799997, 46.47505522800003],
          [-91.84860834599993, 46.487018110000065],
          [-91.75759648199994, 46.48702458100007],
          [-91.67480884399998, 46.485409692000076],
          [-91.61092690599997, 46.49347106100004],
          [-91.53298945499995, 46.517401738000046],
          [-91.46184380399995, 46.56548027200006],
          [-91.39439978099995, 46.60108704600003],
          [-91.31293960199997, 46.66110276500007],
          [-91.18166198599994, 46.731109263000064],
          [-91.12163612599994, 46.77552488500004],
          [-91.02482937399998, 46.78786178000007],
          [-90.98063779999995, 46.797773128000074],
          [-90.96927097899999, 46.782631328000036],
          [-90.95760682899999, 46.75034730400006],
          [-91.00666688699994, 46.706114670000034],
          [-91.04472870499995, 46.66958103600007],
          [-91.09664029099997, 46.636712301000045],
          [-91.13687825499994, 46.57726777900007],
          [-91.18839689999999, 46.532931133000034],
          [-91.22591702999995, 46.48300696300004],
          [-91.22480609399997, 46.433490293000034],
          [-91.18738430599996, 46.359591409000075],
          [-91.12616009499999, 46.325921202000075],
          [-90.99618142799994, 46.285217860000046],
          [-90.89141040599998, 46.26322281700004],
          [-90.77320977799997, 46.256463342000075],
          [-90.59165834999999, 46.22897204100008],
          [-90.47359851299996, 46.22571206300006],
          [-90.21011180299996, 46.22840493600006],
          [-90.07834092799999, 46.21714115300006],
          [-89.99052527699996, 46.20002253800004],
          [-89.63663278999996, 46.19754044900003],
          [-89.30472963899996, 46.19409865700004],
          [-89.14564109599996, 46.193020372000035],
          [-89.10690236799996, 46.21367948200003],
          [-88.97509624199995, 46.21828879600008],
          [-88.74396655199996, 46.24455812300005],
          [-88.43920812199997, 46.263282384000036],
          [-88.18463496799995, 46.27857294900008],
          [-88.00977466999996, 46.175646776000065],
          [-87.99389010599998, 46.04677587200007],
          [-88.03142757799998, 45.90454467200004],
          [-88.07824403599994, 45.733876871000064],
          [-88.11693049199994, 45.64521481500003],
          [-88.15630836499997, 45.53154329200004],
          [-88.25459067099996, 45.31159869500004],
          [-88.32963412999999, 45.169820886000025],
          [-88.40834291299996, 45.06376788400007],
          [-88.48581727299995, 44.99336901300006],
          [-88.79481685399998, 44.90415892300007],
          [-88.88639060299994, 44.84792515000004],
          [-88.88261184299995, 44.78357859500005],
          [-88.94319230899998, 44.76271860500003],
          [-88.97231671099996, 44.62840776200005],
          [-89.00318747399996, 44.57866096200007],
          [-89.02004076199995, 44.46804576400007],
          [-89.04649611099995, 44.37537170000007],
          [-89.10740785599995, 44.30082986600007],
          [-89.08883401599996, 44.21492877800006],
          [-89.02088686299999, 44.117891385000064],
          [-88.83475711099999, 43.998228366000035],
          [-88.68786675299998, 43.92517043600003],
          [-88.62533997199995, 43.84939582800007],
          [-88.57299960499995, 43.76656712400006],
          [-88.46045322499998, 43.73294585800005],
          [-88.39507582999994, 43.78207346700003],
          [-88.33422715399996, 43.841949181000075],
          [-88.26389529699998, 43.883781630000044],
          [-88.26171217099994, 43.95878690500007],
          [-88.25436012199998, 44.04085874400005],
          [-88.13665456199999, 44.003267237000045],
          [-88.04759712699996, 44.00177966800004],
          [-87.97724235799996, 44.03271403600007],
          [-87.91264601899996, 44.03869804900006],
          [-87.85100620199995, 43.96251794800003],
          [-87.84031258699997, 43.84797273600003],
          [-87.77934997599993, 43.76104507100007],
          [-87.69970123099995, 43.65226923900008],
          [-87.59451333699997, 43.57506238600007],
          [-87.41895871099996, 43.54264457600004],
          [-87.19847646199997, 43.53030423300004],
          [-87.05535483399996, 43.54457143500008],
          [-86.90199607799997, 43.56552812900003],
          [-86.73246550099998, 43.61082922300005],
          [-86.59688342599998, 43.66046715300007],
          [-86.47311237099996, 43.75675903800004],
          [-86.41494068499998, 43.905016706000026],
          [-86.38487126299998, 43.99339418100004],
          [-86.33611529199999, 44.14190469500005],
          [-86.23094835399996, 44.23494796600005],
          [-86.07578505799995, 44.32618325100003],
          [-85.99546925899995, 44.409139733000075],
          [-85.93780993299998, 44.44997420000004],
          [-85.94529025199995, 44.48596854700003],
          [-85.88575853799995, 44.551719080000055],
          [-85.82903334099996, 44.64612264200008],
          [-85.67299230199995, 44.65817042300006],
          [-85.49721378799995, 44.66565292100006],
          [-85.37988257999996, 44.69311130300008],
          [-85.26070073999995, 44.74180747400004],
          [-85.20102381099997, 44.79647274300004],
          [-85.12731019099994, 44.896951657000045],
          [-85.07522771199996, 44.976883351000026],
          [-84.82164997499996, 47.579520486000035],
          [-90.67336377599997, 47.71242423500007],
          [-90.65116417499996, 47.70293454200004]
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 1,
      "Years_Ago": 14600,
      "SHAPE_Leng": 2202706.20984,
      "Shape_Le_1": 25.0028099606,
      "Shape_Area": 17.1995913109,
      "filename": "14600.jpg"
    }
  }]
}

var g14600 = L.geoJSON(Toe_14600, {
  style: {
    color: "blue"
  }
});

g14600.on({
  click: function() {
    $("#panel").html(Toe_14600.features[0].properties.Years_Ago + " Years Ago" + info14600 + glacierInfo + selfPlug);
  }
});

/*Glacier 17000*/
var Toe_17000 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          //redacted
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 2,
      "Years_Ago": 17000,
      "SHAPE_Leng": 2261336.18634,
      "Shape_Le_1": 24.4337768448,
      "Shape_Area": 21.6098467975,
      "filename": "17000.jpg"
    }
  }]
}

var g17000 = L.geoJSON(Toe_17000, {
  style: {
    color: "#4daf4a"
  }
});

g17000.on({
  click: function() {
    $("#panel").html(Toe_17000.features[0].properties.Years_Ago + " Years Ago" + info17000 + glacierInfo + selfPlug);
  }
});

/*Glacier 20500*/
var Toe_20500 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            //redacted
          ]
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 1,
      "Years_Ago": 20500,
      "SHAPE_Leng": 3087165.91023,
      "Shape_Le_1": 33.5221258781,
      "Shape_Area": 32.9568211425,
      "filename": "20500.jpg"
    }
  }]
}

var g20500 = L.geoJSON(Toe_20500, {
  style: {
    color: "#ffff33"
  }
});

g20500.on({
  click: function() {
    $("#panel").html(Toe_20500.features[0].properties.Years_Ago + " Years Ago" + info20500 + glacierInfo + selfPlug);
  }
});

/*Glacier 24000*/
var Toe_24000 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          //redacted
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 1,
      "Years_Ago": 24000,
      "SHAPE_Leng": 3034250.36063,
      "Shape_Le_1": 33.0014683974,
      "Shape_Area": 35.7394984299,
      "filename": "24000.jpg"
    }
  }]
}

var g24000 = L.geoJSON(Toe_24000, {
    style: {
      color: "#984ea3"
    }
  }

);

g24000.on({
  click: function() {
    $("#panel").html(Toe_24000.features[0].properties.Years_Ago + " Years Ago" + info24000 + glacierInfo + selfPlug);
  }
});

/*Glacier 27500*/
var Toe_27500 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          //redacted
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 1,
      "Years_Ago": 27500,
      "SHAPE_Leng": 2984589.95454,
      "Shape_Le_1": 32.3931138132,
      "Shape_Area": 34.4347324387,
      "filename": "27500.jpg"
    }
  }]
}

var g27500 = L.geoJSON(Toe_27500, {
    style: {
      color: "#ff7f00"
    }
  }

);

g27500.on({
  click: function() {
    $("#panel").html(Toe_27500.features[0].properties.Years_Ago + " Years Ago" + info27500 + glacierInfo + selfPlug);
  }
});

/*Glacier 31500*/
var Toe_31500 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          //redacted
        ]
      ]
    },
    "properties": {
      "OBJECTID_1": 1,
      "OBJECTID": 2,
      "Years_Ago": 31500,
      "SHAPE_Leng": 1478866.18087,
      "Shape_Le_1": 15.9994195189,
      "Shape_Area": 9.83976333148,
      "filename": "31500.jpg"
    }
  }]
}

var g31500 = L.geoJSON(Toe_31500, {
  style: {
    color: "#a65628"
  }
});

g31500.on({
  click: function() {

    $("#panel").html(Toe_31500.features[0].properties.Years_Ago + " Years Ago" + info31500 + glacierInfo + selfPlug)
  }
});

var overlayMaps = {
  "31500 years ago": g31500,
  "27500 years ago": g27500,
  "24000 years ago": g24000,
  "20500 years ago": g20500,
  "17000 years ago": g17000,
  "14600 years ago": g14600,
  "11000 years ago": g11000

};

var glacierLayers = L.control.layers(null, overlayMaps).addTo(map);
/*Stylesheet by Will P. Campbell,2021*/

body {
  background-color: #ECECEC;
}

#mapid,
#mapid2,
#mapid3,
#mapid4,
#mapid5,
#mapid6,
#mapid7 {
  position: fixed;
  height: 650px;
  width: 60%;
  border: 5px solid black;
  display: inline-block;
}

h1 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#panel {
  position: fixed;
  right: 0;
  border: 5px outset black;
  background-color: lightblue;
  text-align: center;
  width: 25%;
  height: auto;
  padding: 20px;
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>WISCONSIN GLACIER TIME LAPSE</title>

  <!--put your external stylesheet links here-->
  <link rel="stylesheet" href="css/style.css">

  <link rel="stylesheet" href="lib/leaflet/leaflet.css">
  <!--[if IE<9]>
            <link rel="stylesheet" href="css/style.ie.css">
        <![endif]-->
</head>

<body>

  <h1>WISCONSIN GLACIER TIME LAPSE</h1>

  <!-- map 1 -->
  <div id="mapid"></div>
  <!-- map 2 -->
  <div id="mapid2"></div>
  <!-- map 3 -->
  <div id="mapid3"></div>
  <!-- map 4 -->
  <div id="mapid4"></div>
  <!-- map 5 -->
  <div id="mapid5"></div>
  <!-- map 6 -->
  <div id="mapid6"></div>
  <!-- map 7 -->
  <div id="mapid7"></div>

  <div id="panel"><b>Glacier Information Panel</b><br>
    <p>Use the checkbox and click on each glacier to learn more about them!</p>
  </div>

  <!--put your initial page content here-->

  <!--you can also use this space for internal scripts or stylesheets;
        place these within <script> or <style> tags-->

  <!--put your external script links here-->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

  <script type="text/javascript" src="lib/jquery.js"></script>

  <script type="text/javascript" src="js/main.js"></script>

  <script type="text/javascript" src="js/geojson.js"></script>



</body>

</html>

Please let me know if you need any more clarification. I'm new to StackOverflow as well so I apologize if this is an improper or repeat question.

Thanks!

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
wpc6707
  • 89
  • 1
  • 8
  • Just a question, what are all those `info31500` ? Is that somehow related to the map? – Roko C. Buljan Aug 18 '21 at 16:42
  • Also, in your code, you have only one `var map = L.map('mapid').setView([45.5, -89.5], 7);` what are the other? – Roko C. Buljan Aug 18 '21 at 16:43
  • You have an error in the markup of `glacierInfo` You start the markup with `

    ` but you're ending it like `

    ` which is incorrect.     – Roko C. Buljan Aug 18 '21 at 16:45
  • Why you say you need multiple maps in your page, but in your CSS you use `position: fixed` for one only? – Roko C. Buljan Aug 18 '21 at 16:48
  • Those variables at the top are strings that describe each of the polygons of glaciers I made in a panel to the right. They pop up as a string in the panel when you click on an active polygon. Secondly, I don't have any other maps written for now but for the others, I plan on them being clones of the first one, just with an individual polygon on each map. – wpc6707 Aug 18 '21 at 16:49
  • Would you like me to edit it so there are more maps? – wpc6707 Aug 18 '21 at 16:52
  • Could you add the leaflet script () and also try and add some layers so we can see what exactly the issue is? You are referencing local JS files, but they don't work here. – Christian Aug 18 '21 at 16:54
  • Yes, I could add a few of the polygons back in and add the link in there if thats what you mean – wpc6707 Aug 18 '21 at 16:58
  • I will also add in the other map frames I plan to use – wpc6707 Aug 18 '21 at 17:01

1 Answers1

1

Create an Object mapsData with properties that match your DIV Element data-map value.

Loop your Elements DIVs ELS_map.forEach(initMap); and apply the data you stored beforehand for each map ID inside the mapsData

const L_tiles = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}';
const L_options = {
  attribution: 'Tiles: <a href="http://stamen.com">SD</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>  &copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contrib.',
  minZoom: 0,
  maxZoom: 18,
  ext: 'png'
};

// ALL YOUR DATA GOES HERE!
// Name your properties the same as data-map="" value in HTML
const mapsData = {
  glacier_1: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier one Lorem...",
    // add title, shapes etc here
  },
  glacier_2: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier 2 Ipsum...",
    // add title, shapes etc here
  },
};

const initMap = (EL) => {
  const id = EL.dataset.map; // rerturns i.e: "glacier_1"
  const data = mapsData[id];
  const map = L.map(EL).setView(data.center, data.zoom);
  L.tileLayer(L_tiles, L_options).addTo(map);
};

const ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
[data-map] {
  height: 300px;
  border: 5px solid black;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Thanks Roko, Ill try this out and see how it works! – wpc6707 Aug 18 '21 at 17:43
  • 1
    @wpc6707 sure, the code is quite straightforward, but let me know if you'll have issues to add data to the `mapsData` object and represent them on each map! (PS, you have a hint in the `initMap` function: see how I used `data.center`, `data.zoom` etc) – Roko C. Buljan Aug 18 '21 at 17:49
  • So just to be clear, underneath the "description:" property lines, I would then add the shape, colors and event listeners for each shape? – wpc6707 Aug 18 '21 at 18:25
  • ok so I used your suggestion and managed to get my map frames to show up, but not the maps themselves. I ended up having to remove the variable key word from the front of my variables so there would be no errors but I think that broke my map. Also, where should I be putting `overlayMaps` and `glacierLayers` for my event listeners which are at the end of main.js? – wpc6707 Aug 18 '21 at 19:37
  • 1
    @wpc6707 create a new property in a desired `mapsData` glacier inner Object, i.e: `g: {}` where `{}` is all the data you need (or call it somewhat better than just *g*) - than inside `initMap` use it similarily as `L.tileLayer(L_tiles, L_options).addTo(map);` which means something like: `L.control.layers(null, data.g).addTo(map);` I told you, you have all the hints you need ;) Again, expand the `mapsData`! if it makes more sense to you to call the main properties like: `glacier_17000` instead of `glacier_1`. Just remember to than also change the data-map=" attributes accordingly – Roko C. Buljan Aug 18 '21 at 19:56
  • 1
    See the `// add title, shapes etc here` ? that's where you need to create your new properties and their data. – Roko C. Buljan Aug 18 '21 at 19:58
  • Ok I got that to work. If I have checkbox layer control, is there a way I could have each layer show on each map individually? For example, 31500 on map 1, 27500 on map 2... – wpc6707 Aug 18 '21 at 22:34
  • @wpc6707 I'm not sure how to test those layers, but I believe the same way. Whatever is *custom* (specific map) - goes inside the specific `mapsData`. Not sure what checkboxes are you talking about... Can you create a jsFiddle? – Roko C. Buljan Aug 19 '21 at 01:36
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/236189/discussion-between-wpc6707-and-roko-c-buljan). – wpc6707 Aug 19 '21 at 12:23