Маркеры D3 не отображаются на пузырьковой карте Leaflet - PullRequest
Новая
       51

Маркеры D3 не отображаются на пузырьковой карте Leaflet

0 голосов
/ 29 марта 2020

Маркеры окружностей, которые я создал, скрыты базовой картой Leaflet / слоем плитки. Я знаю это, потому что я вижу красные круги и всплывающие подсказки при загрузке страницы (ссылка на изображение прилагается)

Код ключа находится на карте. js

У меня есть пробовал d3: стиль, z-индекс для кругов безрезультатно.

Спасибо, что посмотрели на это. Я ценю это.

Код: 

index.html
<html>
    <head>
        <link rel="stylesheet" href="css/layout.css">
    <!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous"> -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
            integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin="anonymous"
        />
        <!-- Leaflet for Map -->
        <link 
            rel="stylesheet" 
            href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
            integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
            crossorigin=""
        />

    </head>
    <title>
        Bluebike Trips in 2019
    </title>
    <body>
        <div class="toggle-bar container-fluid">
            <div class="row">
                    <h1>Bluebike Trips in 2019</h1>
            </div>
            <div class="row">
                <div class= "col-1">
                    <div class="dropdown show">
                      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Month
                      </a>

                      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </div>
                </div>
                <div class= "col-1">
                    <div class="dropdown show">
                      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Day
                      </a>

                      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </div>
                </div>

                <!-- <div class="slidecontainer col-10">
                  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
                </div> -->
                <div class="col-10 align-items-center">
                    <div id="slider-range"></div>
                </div>
                <p id="value-range">Value:</p>
            </div>
        </div>

        <!-- Map -->
        <div id="map" style="height: 85%; width:100%"/>
        <style>
        .circle:hover{
            stroke: black;
            stroke-width: 4px;
        }
        </style>


        <!-- Leaflet for Map -->
        <script 
            src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
            crossorigin="">
        </script>
        <script 
            src="https://code.jquery.com/jquery-3.4.1.min.js">
        </script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.9/jquery.csv.min.js"></script>
        <!-- Load d3.js and the geo projection plugin -->
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
        <script src="https://unpkg.com/d3-simple-slider"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="scripts/map.js"/>
        <script src="scripts/layout.js"/>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>

</html>
```
map.js

* Map */

// initialize the map
  var map = L
    .map('map')
    .setView([42.35, -71.08], 13); // center position + zoom

  // load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  // bike lanes
  L.tileLayer('http://tiles.mapc.org/trailmap-onroad/{z}/{x}/{y}.png',
  {
    maxZoom: 17,
    minZoom: 9
    }).addTo(map); 

  // Add a svg layer to the map
  var svg_layer = L.svg().addTo(map); 

  // append the svg object to the body of the page
  var svg = d3.select("#map")
  .append("svg")
    .attr("width", "100%")
    .attr("height", "100%")

  $.get( "data/station_info.csv", function(CSVdata) {
     // CSVdata is populated with the file contents
      var station_info = $.csv.toObjects(CSVdata);
      console.log(station_info)

  // -1- Create a tooltip div that is hidden by default:
  var tooltip = d3
    .select("#map")
    .append("div")
      .attr("class", "tooltip")
      .style("opacity", 1)
      .style("background-color", "black")
      .style("border-radius", "5px")
      .style("padding", "10px")
      .style("color", "white")
      //.style("position", "absolute")

  // -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
  var showTooltip = function(d) {
    tooltip
      .transition()
      .duration(200)
    tooltip
      .style("opacity", 1)
      .html("Location: " + d.station_name)
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var moveTooltip = function(d) {
    tooltip
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var hideTooltip = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

// Select the svg area and add circles:
svg // may be an issue
  .selectAll("circle")
  .data(station_info)
  .enter()
  .append("circle")
    .attr("class", "circle")
    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.lon]).x })
    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.lon]).y })
    .attr("r", 7)
    .style("fill", "red")
    .attr("stroke", "red")
    .attr("stroke-width", 1)
    .attr("fill-opacity", .4)
  .on("mouseover", showTooltip )
  .on("mousemove", moveTooltip )
  .on("mouseleave", hideTooltip )

// Function that update circle position if something change
function update() {
  svg.selectAll("circle")
    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.lon]).x })
    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.lon]).y })
}

// If the user change the map (zoom or drag), I update circle position:
map.on("moveend", update)

});



  [1]: https://i.stack.imgur.com/jEju1.png
...