diff --git a/lib/labeler/labeler.js b/lib/labeler/labeler.js index 1e84124..4cd8ac9 100644 --- a/lib/labeler/labeler.js +++ b/lib/labeler/labeler.js @@ -249,10 +249,12 @@ export default class Labeler { }) }) + // Generate labels for GTFS route/mode types listed in labeledModes. var edgeGroups = [] + const labeledModes = this.transitive.options.labeledModes forEach(this.transitive.network.paths, path => { forEach(path.segments, segment => { - if (segment.type === 'TRANSIT' && segment.getMode() === 3) { + if (segment.type === 'TRANSIT' && labeledModes.includes(segment.getMode())) { edgeGroups = edgeGroups.concat(segment.getLabelEdgeGroups()) } }) diff --git a/lib/labeler/segmentlabel.js b/lib/labeler/segmentlabel.js index bc1dc77..3373e71 100644 --- a/lib/labeler/segmentlabel.js +++ b/lib/labeler/segmentlabel.js @@ -17,7 +17,10 @@ export default class SegmentLabel extends Label { if (!text) return null const x = this.labelAnchor.x - this.containerWidth / 2 const y = this.labelAnchor.y - this.containerHeight / 2 - const borderRadius = display.styler.compute2('segment_labels', 'border-radius', this.parent) + + // If border-radius is not set, default to +infinity so a disk is rendered. + const borderRadius = display.styler.compute2('segment_labels', 'border-radius', this.parent) || Infinity + // Draw rounded rectangle for label. display.drawRect({ x, diff --git a/stories/Transitive.stories.js b/stories/Transitive.stories.js index a5425d6..768498b 100644 --- a/stories/Transitive.stories.js +++ b/stories/Transitive.stories.js @@ -1,5 +1,8 @@ import {TransitiveMap} from './TransitiveMap' +// Fonts used by storybook (no need to import extra fonts). +const storybookFonts = '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif' + const companies = [ { id: 'RAZOR', @@ -26,24 +29,36 @@ Itinerary.args = { styles: undefined } -export const ItineraryWithAlternativeStyling = Template.bind({}) -ItineraryWithAlternativeStyling.args = { - center: [28.5459257, -81.3467216], - companies, - itinerary: require('./data/fdot-itin.json'), +export const MultiModalItinerary = Template.bind({}) +MultiModalItinerary.args = { + center: [28.4607685,-81.3656902], + itinerary: require('./data/fdot-itin-multimodal.json'), + styles: undefined, + zoom: 12 +} + + +export const MultiModalItineraryWithCustomSettings = Template.bind({}) +MultiModalItineraryWithCustomSettings.args = { + center: [28.4607685,-81.3656902], + itinerary: require('./data/fdot-itin-multimodal.json'), + // Label commuter rail (2) and bus (3). + labeledModes: [2, 3], styles: { labels: { - "font-size": "18px", - "font-family": "serif" + 'font-size': '14px', + 'font-family': storybookFonts }, segment_labels: { - "border-color": "#FF0000", - "border-radius": 6, - "border-width": 3, - color: "#FFDD00", - "font-size": "24px" - } - } + 'border-color': '#FFFFFF', + 'border-radius': 6, + 'border-width': 2, + color: '#FFE0D0', + 'font-family': storybookFonts, + 'font-size': '18px' + } + }, + zoom: 12 } export const Profile = Template.bind({}) diff --git a/stories/TransitiveMap.js b/stories/TransitiveMap.js index 4cba584..dfac9b2 100644 --- a/stories/TransitiveMap.js +++ b/stories/TransitiveMap.js @@ -30,6 +30,7 @@ export const TransitiveMap = ({ center = [45.506, -122.68302], companies = [], itinerary, + labeledModes, styles, // If no transitiveData is provided, default to generating from itinerary. transitiveData = itineraryToTransitive(itinerary, companies), @@ -43,6 +44,7 @@ export const TransitiveMap = ({ zoom={zoom} >