Adding data to second leaflet map affects mouseOff behaviour in first map

Question

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.

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">&copy; 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

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 &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>',
    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

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 &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>',
    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.

Any ideas?

Answer 1

事实证明，由于某些原因， geoJson变量在两个.js文件之间具有全局作用域，因此我的解决方案是将geoJSON中的geoJSON重命名为GMgeoJson 。

Adding data to second leaflet map affects mouseOff behaviour in first map

Question

1 answers

solution1
1 ACCPTED 2018-01-12 22:37:31

Adding data to second leaflet map affects mouseOff behaviour in first map

Question

1 answers

solution1 1 ACCPTED 2018-01-12 22:37:31

solution1
1 ACCPTED 2018-01-12 22:37:31