[英]Adding data to second leaflet map affects mouseOff behaviour in first map
I have two leaflet webmaps on my webpage, one containing polygons with voting data and the other that will tell you how far your mouse is from a marker. 我的网页上有两个传单网络地图,一个包含具有投票数据的多边形,另一个将告诉您鼠标距标记的距离。
However, it seems that the OnEachFeature
and OnMapClick
functions of GeoGame.js affect the behaviour of the mouseOut
, in that the polygons are no longer highlighted properly. 但是,似乎OnEachFeature
和OnMapClick
函数会影响mouseOut
的行为,因为多边形不再正确突出显示。
HTML HTML
<!DOCTYPE html>
<html>
<head>
<title>Web Maps</title>
<meta charset="utf-8"/>
<!--Boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<!-- AJAX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- leaflet AJAX plugin -->
<script src='https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js'></script>
<link rel="stylesheet" type="text/css" href="webMaps.css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4"><a href="../index.html">P.S.</a></h1>
<nav class="col-sm-8 text-right">
<p><a href="">Projects</a></p>
<p><a href="">Web Maps</a></p>
<p><a href="">Resume PDF Download </a></p>
<p><a href="">Contact</a></p>
</nav>
</div>
</header>
<section class="container">
<h3>Tweeting Habits during the 2016 Presidential Election</h3>
<div id="mapid">
</div>
<h3>GeoGame</h3>
<div id="geoGameId">
</div>
</section>
<footer class="container">
<div class="row">
<p class="col-sm-4">© 2016</p>
<ul class="col-sm-8">
<li class="col-sm-1">
<a href="https://github.com/psal93">
<img src="gitHubLogo_Big.png">
</a>
</li>
</ul>
</div>
</footer>
<script type='text/javascript' src='state_counts_GeoJSON.geojson'></script>
<script type='text/javascript' src='cities_GeoJSON.geojson'></script>
<script type='text/javascript' src='webMaps.js'></script>
<script type='text/javascript' src='geoGame.js'></script>
</body>
</html>
webMaps.js webMaps.js
var geoJson;
var myMap = L.map('mapid').setView([52.0, -99.49219], 3);
//adding basemap
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicGF0c2FsZW1iaWVyIiwiYSI6ImNpeHF0YWw5ajBhZG4zM251Y29lNWQ0NXgifQ.HKO4ThXZhlWl2B7MrrSYNQ', {
attribution: 'Map data © <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>',
maxZoom: 18,
}).addTo(myMap);
//**** Adding Legend ****
var legend = L.control({position: 'bottomright'});
legend.onAdd = function(myMap){
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = '<i style="background:' + getColor(1) + ' "></i> Pro-Trump' + '<br></br>' +
'<i style="background:' + getColor(2) + ' "></i> Pro-Clinton' + '<br></br>' +
'<i style="background:' + getColor(0) + ' "></i> Neutral';
return div;
}
legend.addTo(myMap);
//**** Adding custom info control ****
var info = L.control();
info.onAdd = function (myMap){
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
//method used to update control based on info passed
info.update = function (props){
this._div.innerHTML = '<h4>Tweeting Breakdown</h4>' + (props ?
'<b>' + props.NAME + '</b><br />' + "Trump Tweets: " + props.trumpTweet + "<br></br>" + "Clinton Tweets: " + props.hillaryTwe + "<br></br>" + "Neutral Tweets: " + props.neutralTwe
: 'Hover over a state');
};
info.addTo(myMap);
//***** starting to mess with GeoJSON polygons ******
//GeoJSON color function
function getColor(d){
return d==1 ? 'red' :
d==2 ? 'blue' :
'grey';
}
//styling function
function style(feature){
return {
fillColor: getColor(feature.properties.alignment),
fillOpacity : 1,
color: 'black'
};
}
//highlight function
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: ''
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
//reset highlight after mouse leaves polygon
function resetHighlight(e){
geoJson.resetStyle(e.target);
info.update();
}
//zoom to polygon on click
function zoomToFeature(e){
myMap.fitBounds(e.target.getBounds());
}
//defining functionality for each function
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
//var tweetStats = "<p>" + "<b>" + feature.properties.NAME + "</b><br></br>" + "Trump Tweets: " + feature.properties.trumpTweet + "<br></br>" + "Clinton Tweets: " + feature.properties.hillaryTwe + "<br></br>" + "Neutral Tweets: " + feature.properties.neutralTwe + "</p>";
//layer.bindPopup(tweetStats);
}
//add the geoJSON
geoJson = L.geoJSON(electionMap, {
style: style,
onEachFeature : onEachFeature
}).addTo(myMap);
GeoGame.js GeoGame.js
var geoJson;
var gameMap = L.map('geoGameId').setView([49.25, -123.1], 4);
//adding basemap
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicGF0c2FsZW1iaWVyIiwiYSI6ImNpeHF0YWw5ajBhZG4zM251Y29lNWQ0NXgifQ.HKO4ThXZhlWl2B7MrrSYNQ', {
attribution: 'Map data © <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>',
maxZoom: 18,
}).addTo(gameMap);
//defining functionality for OnEachFeature
function OnEachFeature (feature, layer) {
layer.bindPopup(feature.properties.name + ' long: ' + feature.geometry.coordinates[0]);
}
//add the clickable marker
var popup = L.popup();
function onMapClick(e) {
var distance = e.latlng.distanceTo([cities.geometry.coordinates[1], cities.geometry.coordinates[0]]);
popup
.setLatLng(e.latlng)
.setContent("Distance to Vancouver: " + distance)
.openOn(gameMap);
}
//must be of form onEachFeature : OnEachFeature
gameMap.on('click', onMapClick);
geoJson = L.geoJSON(cities, {onEachFeature : OnEachFeature});
geoJson.addTo(gameMap);
I have a feeling it is a confusion between ids or variables names, but I'm not sure. 我感觉这是id或变量名之间的混淆,但是我不确定。
Any ideas? 有任何想法吗?
事实证明,由于某些原因, geoJson
变量在两个.js文件之间具有全局作用域,因此我的解决方案是将geoJSON
中的geoJSON重命名为GMgeoJson
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.