Skip to content
Permalink
Browse files

step 3: adding utility functions

  • Loading branch information
colbyfayock committed Mar 18, 2020
1 parent 55f4eb3 commit b27b644b32a11e4372963b9d16e0f7ec0ee74b65
Showing with 117 additions and 0 deletions.
  1. +117 −0 src/pages/index.js
@@ -54,3 +54,120 @@ const IndexPage = () => {
};

export default IndexPage;

/**
* tripStopPointToLayer
*/

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 ]
}
}
})
}
}

/**
* tripStopPointToLayer
*/

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 ]
]
}
}
})
}
}

/**
* tripStopPointToLayer
*/

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

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

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

if ( image ) {
imageString = `
<span class="trip-stop-image" style="background-image: url(${image})">${placename}</span>
`;
}

const text = `
<div class="trip-stop">
${ imageString }
<div class="trip-stop-content">
<h2>${placename}</h2>
<p class="trip-stop-date">${date}</p>
${ listString }
</div>
</div>
`;

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

const layer = L.marker( latlng, {
icon: L.divIcon({
className: 'icon',
html: `<span class="icon-trip-stop"></span>`,
iconSize: 20
}),
riseOnHover: true
}).bindPopup(popup);

return layer;
}

0 comments on commit b27b644

Please sign in to comment.
You can’t perform that action at this time.