Рубрики
Без рубрики

Как создать приложение покатации на летнее дорожное покрытие с GATSBY и Lastlet

Подготовьтесь к лету, создавая свое собственное приложение для картографирования поездки с этим пошаговым руководством! Что мы собираемся построить? Что нам нужно, прежде чем мы начнем? Шаг 1: Очистка некоторого ненужного кода Шаг 2: Создайте наши местоположения дорог Шаг 3: Подготовьте наше приложение с некоторыми

Автор оригинала: Colby Fayock.

Подготовьтесь к лету, создавая свое собственное приложение для картографирования поездки с этим пошаговым руководством!

  • Что мы собираемся построить?
  • Что нам нужно, прежде чем мы начнем?
  • Шаг 1: Очистка некоторого ненужного кода
  • Шаг 2: Создайте нашу дороге
  • Шаг 3: Подготовьте наше приложение с некоторыми функциями
  • Шаг 4: Создание нашего пути поездки
  • Шаг 5: Стайлинг нашей карте компоненты
  • Хотите узнать больше о картах?

Примечание автора: даже если мы проходим несколько сложных времен, мы все еще можем быть оптимистичным, что мы пройдемся вместе и сможем насладиться нашим летом. Оставайся в безопасности и мыть руки. ❤ ️

Что мы собираемся построить?

Мы будем проходить построение нового приложения для отображения, которое показывает маршрут, представляющий поездку. Каждое место будет иметь небольшую карту, где мы можем добавить картинку и некоторые вещи, которые мы сделали.

Чтобы начать, мы собираемся использовать это Листовка GATSBY Стартер Я создал, чтобы сделать начальную установку немного более гладкой. С нашим приложением мы создам наш список расположений и использую API Leaflet, чтобы нарисовать наш маршрут на карте.

WOAH, картографическое приложение?

Ага. Если вы не играли с картами раньше, не обескуражены! Это не так плохо, как вы, наверное думаете. Если вы предпочитаете начать с отображения оснований, вы можете прочитать больше о том, как сначала работает сопоставление.

Что нам нужно, прежде чем мы начнем?

Если вы соблюдате вместе с моим последним руководителем для создания Santa Tracker, вы можете выполнить те же шаги для начала. Если нет, мы захотите убедиться, что у нас есть следующее:

  • Узел или пряжа – Я буду использовать пряжу, но вы можете заменить NPM, где это уместно
  • GATSBY’s Cli – пряжа глобальный добавить gatsby-cli

Если вы не уверены в одном из вышеперечисленных пунктов, вы можете попробовать проверить начало моего предыдущего учебника.

Мы также захочем настроить основу для нашей карты. Мы можем сделать это, используя листочку GATSBY стартера Я собрал, что предоставляет нам базовую настройку с Листовка и React Reflet Отказ

gatsby new my-road-trip https://github.com/colbyfayock/gatsby-starter-leaflet

После того, как это закончилось, вы можете перейти к недавно созданному каталогу проекта и начать свой локальный сервер разработки:

cd my-road-trip
yarn develop

Если все идет как запланировано, ваш сервер должен начать, и теперь вы сможете увидеть ваше основное приложение отображения в вашем браузере!

Шаг 1: Очистка некоторого ненужного кода

GATSBY STARTER Мы используем для раскрутки этого приложения, поставляется с некоторым демо-кодом, который нам не нужен здесь. Мы захотим сделать все изменения ниже в файле SRC/Pages/index.js , какая домашняя страница нашего приложения.

Во-первых, давайте удалим все от Mapeffect функция. Эта функция используется для запуска кода, которая загорается, когда отображается карта.

// In src/pages/index.js

async function mapEffect({ leafletElement } = {}) {
  // Get rid of everything in here
}

Далее мы не хотим маркера на этот раз, так что давайте удалим <Маркер Компонент из нашего <Карта составная часть:

Теперь, когда у нас есть эти части очищены, мы можем удалить все следующие импорта и переменные из верхней части нашего файла:

  • УСЭРЕФ
  • Маркер
  • Priesetoflyto.
  • getcurrentLocation.
  • Гэтсби Астронавт
  • разумный
  • TimetoopenPopupafafafasterzoom.
  • TimetoupdatePopupafafasterzoom.
  • Zoom.
  • Popuppcontenthello.
  • popupcontentgatsby.
  • Markerref.

После того, как наша карта все еще должна работать, но ничего не делать.

Следовать вместе с фиксацией

Шаг 2: Создайте нашу дороге

Этот шаг будет включать в себя подготовку наших данных о местоположении, которые наполняют наше приложение Trip Trip. Наши местоположения будут включать свойства, такие как имя, дата, веща, которые мы сделали, и картинка, если мы хотим.

Во-первых, создайте новый файл в SRC/Data каталог называется locations.js Отказ Внутри этого файла мы хотим создавать и экспортировать новый массив.

export const locations = [
  {
    placename: 'Herndon, VA',
    date: 'August 1, 2015',
    location: {
      lat: 38.958988,
      lng: -77.417320
    },
    todo: [
      'Where we start! ?'
    ]
  },
  {
    placename: 'Middlesboro, KY',
    date: 'August 1, 2015',
    location: {
      lat: 36.627517,
      lng: -83.621635
    },
    todo: [
      'Cumberland Gap ?'
    ]
  }
];

Вы можете использовать вышеупомянутое, чтобы начать, но в конечном итоге вы хотите изменить детали для чего-то в вашем выборе.

Если вы хотите добавить изображение в ваше местоположение, вы можете сделать это, включая изображение свойство объекту. Вы можете использовать либо строку URL, либо можно импортировать локальный файл, если у вас есть один доступный, например, в этом примере:

import imgHerndonStart from 'assets/images/herndon-start.jpg';

export const locations = [
  {
    placename: 'Herndon, VA',
    date: 'August 1, 2015',
    image: imgHerndonStart,
    location: {
      lat: 38.958988,
      lng: -77.417320
    },
    todo: [
      'Where we start! ?'
    ]
  }
]

После того, как у нас есть этот файл создан, мы теперь можем импортировать наши местоположения в нашу SRC/Pages/index.js Файл, чтобы мы могли использовать его на нашем следующем шаге:

import { locations } from 'data/locations';

Если вы добавите console.log (местоположения) Внутри вашей страницы вы должны увидеть все данные вашего местоположения в массиве!

Следовать вместе с фиксацией

Шаг 3: Подготовьте наше приложение с некоторыми функциями

Чтобы попытаться сохранить вещи простыми и ориентированными, я объединил 3 важных компонента создания нашей карты в функции. Хотя это доступно для копирования и вставки, мы будем проходить через то, что происходит в каждой функции.

Вы можете разместить каждый из этих функций в нижней части SRC/Pages/index.js Файл, чтобы они были готовы к использованию на нашем следующем шаге.

CreateTruppointsgeojson.

Наша первая функция собирается взять на себя массив наших мест и вернуть Документ Geojson , с нашими местами сопоставляются в индивидуальную функцию. Мы будем использовать эту функцию для создания отдельных точек на нашей карте.

Что такое документ Geojson? По сути, это объект JavaScript или документ JSON с определенной структурой, который создает согласованность с географическими данными.

function createTripPointsGeoJson({ locations } = {}) {
  return {
    "type": "FeatureCollection",
    "features": locations.map(({ placename, location = {}, image, date, todo = [] } = {}) => {
      const { lat, lng } = location;
      return {
        "type": "Feature",
        "properties": {
          placename,
          todo,
          date,
          image
        },
        "geometry": {
          "type": "Point",
          "coordinates": [ lng, lat ]
        }
      }
    })
  }
}

Так Что происходит в вышесказанном?

  • Мы проводим аргумент в местах, которые будут нашим массивом направлений
  • Мы возвращаем объект с некоторыми динамическими свойствами, связанными с ним
  • В объекте мы рассмотрим наши местоположения для отдельных Особенность объекты
  • Каждый объект включает в себя Точка Форма с использованием наших координат
  • Это дополнительно включает в себя наши свойства, которые хранят наши метаданные

Когда эта функция вызывается, у нас будет недавно созданный объект JavaScript, который включает в себя массив точек, представляющих местоположения, мы остановились в нашей поездке.

CreateRiPlinesgeojson.

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

function createTripLinesGeoJson({ locations } = {}) {
  return {
    "type": "FeatureCollection",
    "features": locations.map((stop = {}, index) => {
      const prevStop = locations[index - 1];

      if ( !prevStop ) return [];

      const { placename, location = {}, date, todo = [] } = stop;
      const { lat, lng } = location;
      const properties = {
        placename,
        todo,
        date
      };

      const { location: prevLocation = {} } = prevStop;
      const { lat: prevLat, lng: prevLng } = prevLocation;

      return {
        type: 'Feature',
        properties,
        geometry: {
          type: 'LineString',
          coordinates: [
            [ prevLng, prevLat ],
            [ lng, lat ]
          ]
        }
      }
    })
  }
}

Поэтому вы немедленно заметите, что это очень похоже на нашу последнюю функцию. Мы возвращаем объект и установку наших свойств метаданных в список функций.

Однако большая разница в том, что мы создаем линию. Для этого мы смотрим вверх и ссылаясь на Prevstop который будет предыдущей остановкой. Мы будем использовать предыдущую остановку, так и нашу текущую остановку, чтобы иметь 2 балла, которые мы можем использовать для рисования строки.

Если у нас нет предыдущей остановки, мы возвращаем пустой массив, который в основном означает, что мы в начале нашего путешествия без строки до него.

С предыдущей остановкой и текущей остановкой мы создаем LineSting Тип особенности с нашими 2 баллами.

TripstoppointTolayer.

Наша последняя функция позволит нам создать пользовательский контент для каждого из точек, которые мы будем добавлять на нашу карту. На самом деле мы будем использовать эту функцию в недвижимости брошюра, поэтому мы будем соответствовать нашим аргументам этой спецификации.

function tripStopPointToLayer( feature = {}, latlng ) {
  const { properties = {} } = feature;
  const { placename, todo = [], image, date } = properties;

  const list = todo.map(what => `
  • ${ what }
    • `);
  let listString = '';
  let imageString = '';

  if ( Array.isArray(list) && list.length > 0 ) {
    listString = list.join('');
    listString = `
      
    Things we will or have done…
    
      
      ${listString}
    
    `
  }

  if ( image ) {
    imageString = `
      ${placename}
    `;
  }

  const text = `
    
    
      ${ imageString }
      
    
        
    ${placename}
    
        
    ${date}
    
        ${ listString }
      
    
    
    
  `;

  const popup = L.popup({
    maxWidth: 400
  }).setContent(text);

  const layer = L.marker( latlng, {
    icon: L.divIcon({
      className: 'icon',
      html: ``,
      iconSize: 20
    }),
    riseOnHover: true
  }).bindPopup(popup);

  return layer;
}

    Одна вещь, которую вы заметите, как мы работаем через эту функцию, заключается в том, что мы создаем строки HTML Text. Учитывая, что API листовка, которую мы используем для этого, не взаимодействуют непосредственно с реагированием, мы должны построить HTML вручную, чтобы передать его в наши функции.

    Начиная с вершины:

    • Мы принимаем в 2 аргумента, особенность а также latlng Отказ Листовка передает эти 2 значения для нас для использования в нашей функции.
    • Мы разрушаем нашу функцию, позволяя нам назначить наши метаданные в переменные
    • 2 строковые переменные инициализируются, что мы будем использовать для нашего HTML
    • Если мы включаем Todo Свойство в качестве массива мы добавляем новый список с каждым элементом внутри.
    • Если мы включаем изображение, мы создаем тег изображения.
    • С нашими недавно созданными строками HTML мы строим все возможное, что будет нашей всплывающей картой для каждой строп
    • С нашим всплывающим HTML мы создаем листовку неожиданно возникнуть пример
    • С помощью аргумента LATLG и нашим всплывающим окном мы создаем новую листочку Маркер пример. Это будет представлять точку на карте.
    • Внутри создания маркера мы создаем базовый HTML-тег, который хорошо используется для стиля маркера
    • Затем мы связываем наше всплывающее окно к этому новому экземпляру маркера. Это позволит всплывающему окно быть связано с этим индивидуальным маркером
    • Наконец, мы возвращаем наш вновь созданный слой

    Не забудьте убедиться, что вы поместите все функции выше в нижней части вашего SRC/Pages/index.js страница.

    Как только все эти функции добавлены, наша карта все еще должна быть одинаковым, в основном ничего не происходит.

    Следовать вместе с фиксацией

    Шаг 4: Создание нашего пути поездки

    Вот где все интересны. Теперь мы будем использовать функции, которые мы создали, чтобы построить путь нашего путешествия. Вся наша работа здесь будет в пределах Mapeffect Функция внутри SRC/Pages/index.js файл.

    Для контекста наша Mapeffect Функция включает в себя аргумент под названием Листовка Отказ Это значение относится к экземпляру карты, которую распознает листовка. Этот экземпляр карты включает в себя состояние нашего карты, а также многие полезные функции для работы с нашей картой.

    Во-первых, в верхней части функции мы хотим убедиться, что у нас есть карта. Если нет, мы можем вернуться к выручению из функции.

    if ( !leafletElement ) return;

    Далее мы хотим использовать Каждый вид Утилита функция и удалить каждый слой из нашей карты элемента. Мы делаем это, чтобы убедиться, что у нас всегда есть правильное состояние слоя карты.

    leafletElement.eachLayer((layer) => leafletElement.removeLayer(layer));

    С нашей очищенной картой мы можем использовать 2 функции, которые мы создали для создания новых объектов Geojson.

    const tripPoints = createTripPointsGeoJson({ locations });
const tripLines = createTripLinesGeoJson({ locations });

    С нашими объектами Geojson нам нужно преобразовать экземпляры Geojson Geojson, которые мы будем использовать, чтобы добавить на карту.

    const tripPointsGeoJsonLayers = new L.geoJson(tripPoints, {
  pointToLayer: tripStopPointToLayer
});

const tripLinesGeoJsonLayers = new L.geoJson(tripLines);

    Если вы заметите в приведенном выше, мы используем наше TripstoppointToLayer функция. Как я ссылался раньше, Геойсон Пример, который мы создаем, включает в себя свойство, которое позволяет нам пройти функцию, давая нам возможность манипулировать созданием слоя. Вот как мы создаем нашу точку зрения и всплывающее содержимое.

    Мы можем приступить к добавлению этих новых слоев нашей карте, используя Addto Отказ

    tripPointsGeoJsonLayers.addTo(leafletElement);
tripLinesGeoJsonLayers.addTo(leafletElement);

    Затем, чтобы убедиться, что мы увеличиваем масштаб и центр в нужном месте, мы хотим захватить границы карты, используя GetBounds Функция на нашем экземпляре Geojson слоя.

    const bounds = tripPointsGeoJsonLayers.getBounds();

    Наконец, мы подходим к представлению нашей карты на эти границы, используя Fitbounds Функция на нашем экземпляре карты.

    leafletElement.fitBounds(bounds);

    Как только вы сохраните и перезагрузите страницу, теперь вы должны увидеть синий путь, представляющий прыжок из каждого из наших мест на карте!

    Одна проблема, хотя. Если вы заметите, мы видим только путь. Это потому, что нам нужно добавить некоторые CSS, которые мы доберемся к следующему шагу.

    Следовать вместе с фиксацией

    Шаг 5: Стайлинг нашей карте компоненты

    Наш последний шаг будет добавлять некоторые стили, которые позволят нашим маркерам показать и наши всплывающие окна выглядеть правильно.

    На этом шаге мы будем работать внутри _home.scss Файл, который вы можете найти в SRC/Активы/Стильисты/Страницы Отказ

    Мы можем начать работу с помощью копирования и вставки этого блока стилей в нижней части этого файла. С этим сделано, мы можем пройти через то, что происходит.

    .trip-stop {

  width: 400px;
  overflow: hidden;

  h2 {
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: .2em;
  }

  p,
  ul,
  h3 {
    font-size: 1.2em;
    font-weight: normal;
  }

  p {
    margin: .2em 0;
  }

  .trip-stop-date {
    color: $grey-600;
    font-size: 1em;
  }

  ul {
    padding: 0 0 0 1.4em;
    margin: 0;
  }

}

.trip-stop-image {
  display: block;
  float: left;
  overflow: hidden;
  width: 150px;
  height: 150px;
  text-indent: 100%;
  color: transparent;
  background-position: center;
  background-size: cover;
}

.trip-stop-content {
  float: left;
  width: 250px;
  padding-left: 1em;
}

.icon-trip-stop {

  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: $orange-500;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);

  &:hover {
    background-color: $deep-orange-400;
  }

}

    Есть три компонента на наши стили выше:

    • .trip-stock-изображения : Внутри всплывающего окна маркера мы необязательно можем включить изображение. Эти стили устанавливают размер, сделайте текст прозрачным (это там для доступности), и плавать его слева, чтобы наш всплывающий контент может соответствовать правильному боку рядом.
    • .ttrip-Stop-Content : Это относится к другой половине нашего всплывающего контента. Все, что нам нужно сделать, здесь убедитесь, что наш размер уместен, и он плавает рядом с нашим изображением.
    • .icon-Trip-Stop : Тег HTML, который мы используем в качестве обозначения нашего значка, устанавливаются здесь. Мы размещаем его, установите цвет, используя заранее определенную переменную SCSS, и мы добры к работе.

    После того, как эти стили сохраняются, теперь вы должны увидеть точки на карте, представляющему каждое местоположение. Кроме того, вы должны быть в состоянии щелкнуть каждый из этих точек, чтобы открыть всплывающее окно, содержащее информацию о остановке.

    Следовать вместе с фиксацией

    Дополнительный последний шаг: стиль настройки

    Последнее, что совершенно необязательно, это сделать несколько стилей, чтобы дать ваш сайт небольшую личность. Я не собираюсь пройти это в деталях, но если вы хотели бы следовать и одеваться немного немного, вы можете следовать вместе с Это совершает который показывает каждый код изменения, который я сделал.

    Следовать вместе с фиксацией

    Yay, мы сделали это!

    Если вы соблюдате со мной, или пропущены вправо на стартер, у вас теперь должно быть приложение отображения, которое вы можете использовать для вашей следующей поездки.

    Хорошая новость в том, что этот проект может подать заявку на что угодно! Хотите сопоставить свои любимые рестораны в Вашингтоне, округ Колумбия? Добавьте свои места и удалите строки. Хотите создавать рисунки линии на карте? Это, безусловно, вариант.

    Что бы ни было, если вам понравилось, чтобы получить эту карту.

    Хотите узнать больше о картах?

    Вы можете проверить несколько моих других ресурсов, чтобы начать:

    Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-summer-road-trip-mapping-app-with-gatsby-and-leaflet/”

    Читайте ещё по теме: