on and off geoJSON layer button not working in leaflet map. please help.

341 views
Skip to first unread message

chewkah skewzah

unread,
Jan 19, 2017, 5:35:55 PM1/19/17
to Leaflet
I am trying to create a button using jquery that will turn a geoJSON layer in Leaflet on and off. The tileLayer pops up in my html page and my geoJSON file shows on my map. The button I created shows just above the map I created as well The bind pop up function works too. However whenever I click the button, the console in google chrome tells me this (this is what happens when I clicked my button three times, if I continute it keeps telling t.onRemove is not a function:
leaflet.js:6 Uncaught TypeError: Cannot read property 'call' of undefined
    at e.whenReady (leaflet.js:6)
    at e.addLayer (leaflet.js:6)
    at HTMLDivElement.<anonymous> (Leaflet.html:62)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)
leaflet.js:6 Uncaught TypeError: t.onRemove is not a function
    at e.removeLayer (leaflet.js:6)
    at HTMLDivElement.<anonymous> (Leaflet.html:60)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)
leaflet.js:6 Uncaught TypeError: t.onRemove is not a function
    at e.removeLayer (leaflet.js:6)
    at HTMLDivElement.<anonymous> (Leaflet.html:60)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)

I have all my source jquery and javascript imported.
I followed this tutorial and have the code written exactly as he does:

Here is a copy of my code. I am not that experienced of a coder and have been trying to get this to work for 4 days now. I greatly appreciate your help.

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Loading GeoJSON</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/layerbutton.css" /> 
<link rel="stylesheet" href="leaflet/leaflet.css" />
text='text/css'>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.0.2/dist/leaflet.css" />
</head>
<body>
<h1>My map</h1>
<div id='mapdiv' style='height:500px;'>here lies a map.</div>
<div id="tileBar"> 
<div class="layerButt" id="pointButt"><h3> TTC On/Off</h3></div> 
</div>
<script src="js/ttc.js"></script>
<script>
// <script> powers up script
var mymap = L.map('mapdiv').setView([43,-79],8);
    attribution: '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>',
    minZoom: 6,
maxZoom: 16,
    //choose project id/dataset from map box studio
id: 'n/a,(and chose not to add this, the tile layer opens )
//accessToken id from map box account
    accessToken: n/a (I chose not to add this, the tile layer does open)

}).addTo(mymap); 

function attach (feature,layer) {
layer.bindPopup("<h1 class='infoHeader'> Toronto TTC Subway Name</h1><p class='infoHeader'>" + feature.properties.SBWAY_NAME +"</p>");
};
L.geoJSON(ttc,{
onEachFeature: attach
}).addTo(mymap);


// closes script 
</script>
<script>
$("#pointButt").click(function(){
if(mymap.hasLayer(ttc)){
mymap.removeLayer(ttc);
} else {
mymap.addLayer(ttc);
};

});

</script>

Reply all
Reply to author
Forward
0 new messages