Skip to content

Commit

Permalink
improve appearance of travel map
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidfdriscoll
davidfdriscoll committed Dec 6, 2023
1 parent d1517f2 commit 0e8a6d7
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 195 deletions.
16 changes: 6 additions & 10 deletions js/drawMap/drawBubbles.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { LYRIC_WHITE, LYRIC_RED } from "../constants/colors.js";
import { calculateBubbles } from "../renderMap/calcBubbles.js";

export function drawBubblesAndLegends(map, bubbles) {
map.bubbleLayerGroup.clearLayers();
const drawnBubbles = drawBubbles(map, bubbles);
drawLegends(map, bubbles);

Expand Down Expand Up @@ -38,15 +38,15 @@ function drawBubble(location, map, bubble) {
radius: radius
});
circle._price = bubble.price;
map.currentLayerGroup.addLayer(circle);
map.bubbleLayerGroup.addLayer(circle);
if (bubble.popupHtml)
circle.bindPopup(bubble.popupHtml);
circle.bindTooltip(bubble.city.infowindowName);
return circle;
}

function drawLegends(map, bubbles) {
map.currentLegendLayerGroup.clearLayers();
map.legendLayerGroup.clearLayers();

for (const bubble of Object.values(bubbles)) {
if (bubble.legend) {
Expand All @@ -67,7 +67,7 @@ function drawLegend(location, map, bubble) {
className: 'text-below-marker',
})
});
map.currentLegendLayerGroup.addLayer(textMarker);
map.legendLayerGroup.addLayer(textMarker);
textMarker.bindPopup(bubble.popupHtml);
textMarker.bindTooltip(bubble.city.infowindowName);
}
Expand All @@ -82,13 +82,9 @@ function minimumZoomToShowLegend(price) {
}

function calculateBubbleSize(zoom, price) {
let multiplier;
let multiplier = 900; // base zoom at 6 and below

if (zoom <= 6) multiplier = 900;
if (zoom === 7) multiplier = 500;
if (zoom === 8) multiplier = 300;
if (zoom === 9) multiplier = 200;
if (zoom >= 10) multiplier = 100;
multiplier /= Math.pow(2, zoom - 6);

return price * multiplier;
}
189 changes: 9 additions & 180 deletions js/drawMap/drawLines.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
export function drawLines(map, calculatedLines) {
drawGeodesicLines(map, calculatedLines);
}

// https://github.com/elfalem/Leaflet.curve/issues/59

function drawGeodesicLines(map, calculatedLines) {
map.lineLayerGroup.clearLayers();
for (const hash in calculatedLines) {
const line = calculatedLines[hash];
const fromCity = line.fromCity;
Expand All @@ -25,16 +20,18 @@ function drawGeodesicLines(map, calculatedLines) {
dashArray: dashArray
}
);
const arrowSize = 3 * line.weight + 2;
const decorator = L.polylineDecorator(geodesic, {
patterns: [
{
offset: 10,
repeat: 200,
offset: '25%',
repeat: 250,
symbol: L.Symbol.arrowHead({
pixelSize: arrowSize,
pathOptions: {
color: line.color,
fillOpacity: 1,
weight: 0
weight: 0,
}
})
}
Expand All @@ -56,176 +53,8 @@ function drawGeodesicLines(map, calculatedLines) {
geodesic.bindTooltip(line.name);
transparentLine.bindTooltip(line.name);

map.currentLayerGroup.addLayer(geodesic);
map.currentLayerGroup.addLayer(decorator);
map.currentLayerGroup.addLayer(transparentLine);
map.lineLayerGroup.addLayer(geodesic);
map.lineLayerGroup.addLayer(decorator);
map.lineLayerGroup.addLayer(transparentLine);
}
}

function drawLinesWithCrappyArrows(map, calculatedLines) {
for (const hash in calculatedLines) {
const line = calculatedLines[hash];
const fromCity = line.fromCity;
const activeCity = line.toCity;
const fromLatLng = [fromCity.lat, fromCity.long];
const toLatLng = [activeCity.lat, activeCity.long];
const midpointLatLng = getControlPoint(fromLatLng, toLatLng);

let dashArray;
if (line.dotted) {
dashArray = "8, 8";
}

const bezierCommands =
[
'M', fromLatLng,
'Q', midpointLatLng,
toLatLng
];
const curvedLine = L.curve(
bezierCommands, {
color: line.color,
weight: line.weight,
dashArray: dashArray
});
map.currentLayerGroup.addLayer(curvedLine);

const sampleCount = 50;
const samplingArray = [];
for (let i = 0; i < 1; i += 1 / sampleCount) {
samplingArray.push(i);
}
const curvedLinePath = curvedLine.trace(samplingArray);
const transparentLine = L.polyline(
curvedLinePath, {
opacity: 0,
weight: line.weight * 20
});

if (line.popupHtml) {
curvedLine.bindPopup(line.popupHtml);
transparentLine.bindPopup(line.popupHtml);
}

curvedLine.bindTooltip(line.name);
transparentLine.bindTooltip(line.name);

map.currentLayerGroup.addLayer(transparentLine);

const decorator = L.polylineDecorator(
curvedLinePath, {
patterns: [
{
offset: 10,
repeat: 200,
symbol: L.Symbol.arrowHead({
pathOptions: {
color: line.color,
fillOpacity: 1,
weight: 0
}
})
}
]
});
map.currentLayerGroup.addLayer(decorator);
}
}

function drawLinesWithSampledRoute(map, calculatedLines) {
for (const hash in calculatedLines) {
const line = calculatedLines[hash];
const fromCity = line.fromCity;
const activeCity = line.toCity;
const fromLatLng = [fromCity.lat, fromCity.long];
const toLatLng = [activeCity.lat, activeCity.long];
const midpointLatLng = getControlPoint(fromLatLng, toLatLng);

let dashArray;
if (line.dotted) {
dashArray = "8, 8";
}

const bezierCommands =
[
'M', fromLatLng,
'Q', midpointLatLng,
toLatLng
];
const curvedLine = L.curve(
bezierCommands, {
opacity: 0,
});
map.currentLayerGroup.addLayer(curvedLine);

const sampleCount = 50;
const samplingArray = [];
for (let i = 0; i < 1; i += 1 / sampleCount) {
samplingArray.push(i);
}
const curvedLinePath = curvedLine.trace(samplingArray);

const sampledLine = L.polyline(
curvedLinePath, {
color: line.color,
weight: line.weight,
dashArray: dashArray
});
const transparentLine = L.polyline(
curvedLinePath, {
opacity: 0,
weight: line.weight * 20
});

if (line.popupHtml) {
sampledLine.bindPopup(line.popupHtml);
transparentLine.bindPopup(line.popupHtml);
}

curvedLine.bindTooltip(line.name);
transparentLine.bindTooltip(line.name);

map.currentLayerGroup.addLayer(sampledLine);
map.currentLayerGroup.addLayer(transparentLine);

const decorator = L.polylineDecorator(
sampledLine, {
patterns: [
{
offset: 10,
repeat: 200,
symbol: L.Symbol.arrowHead({
pathOptions: {
color: line.color,
fillOpacity: 1,
weight: 0
}
})
}
]
});
map.currentLayerGroup.addLayer(decorator);
}
}

function getControlPoint(latlng1, latlng2) {
// shamelessly stolen from https://gist.github.com/ryancatalani/6091e50bf756088bf9bf5de2017b32e6
// blog post at https://ryancatalani.medium.com/creating-consistently-curved-lines-on-leaflet-b59bc03fa9dc

var offsetX = latlng2[1] - latlng1[1],
offsetY = latlng2[0] - latlng1[0];

var r = Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)),
theta = Math.atan2(offsetY, offsetX);

var thetaOffset = (3.14 / 10);

var r2 = (r / 2) / (Math.cos(thetaOffset)),
theta2 = theta + thetaOffset;

var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
midpointY = (r2 * Math.sin(theta2)) + latlng1[0];

var midpointLatLng = [midpointY, midpointX];
return midpointLatLng;
}
10 changes: 6 additions & 4 deletions js/drawMap/initializeMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ export function initializeMap() {
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', {
maxZoom: 20
}).addTo(map);
map.currentLayerGroup = L.layerGroup();
map.currentLegendLayerGroup = L.layerGroup();
map.addLayer(map.currentLayerGroup);
map.addLayer(map.currentLegendLayerGroup);
map.bubbleLayerGroup = L.layerGroup();
map.legendLayerGroup = L.layerGroup();
map.lineLayerGroup = L.layerGroup();
map.addLayer(map.bubbleLayerGroup);
map.addLayer(map.legendLayerGroup);
map.addLayer(map.lineLayerGroup);
return map;
}
1 change: 0 additions & 1 deletion js/renderMap/updateMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { calculateBubbles } from "./calcBubbles.js";
import { drawBubblesAndLegends } from "../drawMap/drawBubbles.js";

export function updateMap(map, data, state) {
map.currentLayerGroup.clearLayers();
if (state.currentMapMode === "placesMode" || state.currentMapMode === "geoimaginaryMode") {
const poetCities = calcPoetCities(data, state);
const bubbles = calculateBubbles(state, data, poetCities);
Expand Down

0 comments on commit 0e8a6d7

Please sign in to comment.