javascript - Creating a Custom Layer Control in Leaflet

I've been working on a leaflet map with a number of static layers that can be turned off and on using leaflet's standard layer control.

Recently, I've been trying to use the onclick method to run functions to add and remove layers from the map when the user clicks on one of the images in the (currently static) legend. I've tried a number of different ways to get this to work and I'm thinking it has to do with the loading order of javascript and web page elements (but I'm pretty new at this so I could be wrong).

Anyway, without pasting in too much of my code - I'm loading all of the scripts in the head of the document as such:

<html>
<head>
<title>St. Louis River Estuary Deep Map</title>
<link rel="stylesheet" href="css/leaflet.css" />

<!--[if lte IE 8]>
<link rel="stylesheet" href=".3.1/leaflet.ie.css" />
<![endif]-->
<script type="text/javascript" src="js/leafletcopy.js"></script>
<script type="text/javascript" src=".js"></script>
<script src=".2&sensor=false"></script>
<script type= "text/javascript" src="js/googlemaps.js"></script>


<script type="text/javascript"src='js/wax.leaf.min.js'></script>

<script type='text/javascript' src='js/htmlswitch.js'></script>
<link rel='stylesheet' href='css/webmapstylesheet1.css'/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" />
<![endif]-->

<script type="text/javascript" src="js/hearding.js"></script>
<script type="text/javascript" src="js/boundaries.js"></script>
<script type="text/javascript" src="js/bath1.js"></script>
<script type="text/javascript" src="js/bath2.js"></script>
<script type="text/javascript" src="js/bath3.js"></script>
<script type="text/javascript" src="js/monitoring.js"></script>

function removeRecreation() { map.removeLayer(recreationLayer); }; window.onload = function () { //create global map variable var map; var recreationLayer; I guess I'm just not sure which variable to define globally in order to get the removeRecreation function to effectively operate when I call the function on click from the image that it's attached to. As shown in the following code: A live version can be found at: .html

</head>

<body>
    <div id ="divHeader">
        <h1>St. Louis River Deep Map</h1>
        <div class="navHome"><a href="/">return home</a></div>
    </div>
    
    
    <div id="legend">
        <h2>Legend:</h2>
        <hr>
        
        <p class ="legend"><img onclick = "removeRecreation();" src ="images/recreation1.png">Exploring</p>`

I've been working on a leaflet map with a number of static layers that can be turned off and on using leaflet's standard layer control.

Anyway, without pasting in too much of my code - I'm loading all of the scripts in the head of the document as such:

<html>
<head>
<title>St. Louis River Estuary Deep Map</title>
<link rel="stylesheet" href="css/leaflet.css" />

<!--[if lte IE 8]>
<link rel="stylesheet" href="http://code.leafletjs./leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
<script type="text/javascript" src="js/leafletcopy.js"></script>
<script type="text/javascript" src="http://gettopup./releases/latest/top_up-min.js"></script>
<script src="http://maps.google./maps/api/js?v=3.2&sensor=false"></script>
<script type= "text/javascript" src="js/googlemaps.js"></script>


<script type="text/javascript"src='js/wax.leaf.min.js'></script>

<script type='text/javascript' src='js/htmlswitch.js'></script>
<link rel='stylesheet' href='css/webmapstylesheet1.css'/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" />
<![endif]-->

<script type="text/javascript" src="js/hearding.js"></script>
<script type="text/javascript" src="js/boundaries.js"></script>
<script type="text/javascript" src="js/bath1.js"></script>
<script type="text/javascript" src="js/bath2.js"></script>
<script type="text/javascript" src="js/bath3.js"></script>
<script type="text/javascript" src="js/monitoring.js"></script>

</head>

<body>
    <div id ="divHeader">
        <h1>St. Louis River Deep Map</h1>
        <div class="navHome"><a href="http://stlre.pebbleonline./">return home</a></div>
    </div>
    
    
    <div id="legend">
        <h2>Legend:</h2>
        <hr>
        
        <p class ="legend"><img onclick = "removeRecreation();" src ="images/recreation1.png">Exploring</p>`

Share Improve this question edited Apr 23, 2021 at 16:44 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 19, 2012 at 20:02 user1270657 1371 gold badge5 silver badges14 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

When you're doing "var map", you're actually declaring a local variable (relative to the function that you pass to window.onload), so removeRecreation function doesn't see it. To fix this, simply move "var map" to the top (before removeRecreation definition).

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Creating a Custom Layer Control in Leaflet - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)