somehow-maps

somehow-maps

— part of somehow —

WIP svelte infographics

_{by Spencer Kelly}

this library just hoodwinks some d3 projection methods into Svelte components -

• so that basic SVG maps can be made in a leisurely way.
• work-in-progress!

<script>
  import { Globe, Line, Graticule, Dot, Latitude } from 'somehow-map'
</script>
 
<Globe rotate={30} tilt={-10}>
  <Graticule />
  <Countries stroke="grey" />
  <Latitude at={40} />
  <Line from="toronto" to='jamaica' />
  <Dot at={[90, 0]} color="lightblue" radius={50} />
</Globe>

Components

these two are the containers, and should be mostly interchangeable

• <Globe/>
• <Map/> both of these accept a 'focus' param, what zooms the map projection to fit a geojson object.

these are the basic primitives

• <Line from={[lat, lng]} to={'city-name'}/>

• <Shape shape={geojson}/>

• <Dot radius={4} at={'chicago'}/>

  these are continual lines around the whole world:

• <Latitude/>

• <Longitude/>

  these are some helpers

• <Countries/>

• <Graticule/>

• <Intersections/>

Misc

to generate ad-hoc topojson shapes (without using QGIS):

• grab shapefiles from natural earth
• draw a new shape in geojson.io
• add them both to mapshaper.org
• run mapshaper -clip myshape.geojson
• export as topojson

to generate ad-hoc topojson shapes from openstreetmap:

• download some pbf data from geofabrik.de

• use James Halliday's nodejs pbf parser to filter down specific tags

See also

• somehow
• thensome.how

MIT