Mapbox Sheet Mapper - PullRequest
Новая
       2

Mapbox Sheet Mapper

0 голосов
/ 05 апреля 2020

Я работал с вашим гидом по https://www.mapbox.com/impact-tools/sheet-mapper/

Мне удалось опубликовать sh небольшую карту, используя шаги, которые опубликованы здесь: https://github.com/CodyORourke/map/blob/master/index.html (https://codyorourke.github.io/map/)

Что, на мой взгляд, было действительно здорово. Но когда я попытался настроить собственную таблицу с разными заголовками, я следовал инструкциям, но что-то не работает. Есть ли более подробное прохождение по этому вопросу? Или вы можете просто объяснить мне, что я сделал не так при настройке всплывающих окон?

https://github.com/CodyORourke/map2 (https://codyorourke.github.io/map/) 

  <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Replace with your title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <link rel="stylesheet" href="style.css">

  </head>
  <style>
    body {
      background: #404040;
      margin: 0;
      padding: 0;
    }


    #map {
      border-left: 1px solid #fff;
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
    }


    .mapboxgl-popup {
      padding-bottom: 5px;
    }

    .mapboxgl-popup-close-button {
      display: none;
    }

    .mapboxgl-popup-content {
      font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
      padding: 0;
      width: 250px;
    }

    .mapboxgl-popup-content-wrapper {
      padding: 1%;
    }

    .mapboxgl-popup-content h3 {
      background: rgb(61, 59, 59);
      text-align: center;
      color: #fff;
      margin: 0;
      display: block;
      padding: 15px;
      font-weight: 700;
      margin-top: -5px;
    }

    .mapboxgl-popup-content h4 {
      margin: 0;
      display: block;
      padding: 10px 3px 10px 10px;
      font-weight: 400;
    }

    .mapboxgl-container {
      cursor: pointer;
    }

    .mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
      margin-top: 3px;
    }

    .mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
      border-bottom-color: rgb(61, 59, 59);
    }

  </style>

  <body>

    <div id="map"></div>
    <script>
      var transformRequest = (url, resourceType) => {
        var isMapboxRequest =
          url.slice(8, 22) === "api.mapbox.com" ||
          url.slice(10, 26) === "tiles.mapbox.com";
        return {
          url: isMapboxRequest
            ? url.replace("?", "?pluginName=sheetMapper&")
            : url
        };
      };

      //YOUR TURN: add your Mapbox access token 
      mapboxgl.accessToken = 'pk.eyJ1IjoiZ29vZC1zaGVwaGVyZC1jb2xsZWN0aXZlIiwiYSI6ImNrOGt2aXYwNDAwODczbW5tdGVkczNqZHoifQ.XtoGHiN0uXUANio2uuKVKQ';
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: "mapbox://styles/mapbox/streets-v11", //YOUR TURN: choose a style: https://docs.mapbox.com/api/maps/#styles
        center: [35.235756, 31.769908], // starting position [lng, lat]
        zoom: 9, // starting zoom
        transformRequest: transformRequest
      });


      map.on("load", function() {
        init();
      });

      // Initialize Tabletop to access your table
      function init() {
        Tabletop.init({
          // YOUR TURN: change 'key' value to point to your spreadsheet
          key: 'https://docs.google.com/spreadsheets/d/1QpsrLIAPnsxa5_Fi8Zu-zZcDuVdfFGjSYi0szQ6L8Nc/edit?usp=sharing',
          // once Tabletop has loaded the data, it passes it to the 'callback' function, 'addPoints', defined below
          callback: addPoints,
          simpleSheet: true
        });
      }


      // create a function called addPoints that iterates through your table (row by row) to create markers and popups
      function addPoints(data) {

        // iterate through your table to set the marker to lat/long values for each row

        data.forEach(function(row) {

          // create a variable for your popup and populate your popup with information from your table
          var popup = new mapboxgl.Popup()
            .setHTML(`<h3>` + row.Location + `</h3>` + '<h4>' + '<b>' + ‘Photo: ' + '</b>' + row.Photo + '</h4>'  + '<h4>' + '<b>' + ‘Date: ' + '</b>' + row.Date+ '</h4>' + '<h4>' + '<b>' + ‘Description: ' + '</b>' + row.Description+ '</h4>'); // use the table to populate your popup with text


          // create a variable for your markup and add it to the map 
          var marker = new mapboxgl.Marker({
              color: 'purple'
            })
            .setLngLat([row.Longitude, row.Latitude])
            .setPopup(popup)
            .addTo(map); // add the marker to the map


        });
      }

    </script>
  </body>

</html>
...