Gatsby / JAMStack Philly Meetup - : Cloud Native Mapping Apps: How Satellite Imagery Gets From the Sky to Your Phone
Report
Share
•0 likes•250 views
![@garysieling
GATSBY-CONFIG.JSGATSBY-CONFIG.JS
plugins: [
{
resolve: 'gatsby-plugin-react-leaflet',
options: {
linkStyles: true
}
}
]](https://image.slidesharecdn.com/maps-slides-191001130812/75/gatsby-jamstack-philly-meetup-cloud-native-mapping-apps-how-satellite-imagery-gets-from-the-sky-to-your-phone-33-2048.jpg?cb=1670536662)
![@garysieling
LEAFLET.JSLEAFLET.JS
const position = [39.9526, -75.1652 ];
const Map = () =>
<LeafletMap center={position} zoom={11}>
<TileLayer
attribution='© contributors'
url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
A <b>popup</b>.
</Popup>
</Marker>
</LeafletMap>
OpenStreetMap](https://image.slidesharecdn.com/maps-slides-191001130812/75/gatsby-jamstack-philly-meetup-cloud-native-mapping-apps-how-satellite-imagery-gets-from-the-sky-to-your-phone-34-2048.jpg?cb=1670536662)
Gatsby / JAMStack Philly Meetup - : Cloud Native Mapping Apps: How Satellite Imagery Gets From the Sky to Your Phone
•0 likes•250 views
Report
Share
Download to read offline
In recent years, cheap drones and satellites have made it easier to monitor the earth. This data is used as the image layers of mapping websites for many scientific missions. This talk will explore how cloud-native, pure-Javascript apps can assemble and browse large quantities of map data using the JAMstack and Gatsby.
Recommended
More Related Content
Similar to Gatsby / JAMStack Philly Meetup - : Cloud Native Mapping Apps: How Satellite Imagery Gets From the Sky to Your Phone
Similar to Gatsby / JAMStack Philly Meetup - : Cloud Native Mapping Apps: How Satellite Imagery Gets From the Sky to Your Phone(12)
More from Gary Sieling
More from Gary Sieling(6)
Recently uploaded
Recently uploaded(20)
![[2023] Putting the R! in R&D.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/2023puttingtherinrd-231122234738-294b2909-thumbnail.jpg?width=768&fit=bounds)
Gatsby / JAMStack Philly Meetup - : Cloud Native Mapping Apps: How Satellite Imagery Gets From the Sky to Your Phone
- 1. @garysieling CLOUD NATIVE MAPPING APPSCLOUD NATIVE MAPPING APPS HOW SATELLITE IMAGERY GETS FROMHOW SATELLITE IMAGERY GETS FROM THE SKY TO YOUR PHONETHE SKY TO YOUR PHONE
- 3. @garysieling
- 4. @garysieling
- 5. @garysieling
- 7. HISTORIC AERIAL FOOTAGEHISTORIC AERIAL FOOTAGE
- 8. @garysieling
- 9. @garysieling DIGITALGLOBEDIGITALGLOBE 80 TB/day 100 PB Stored 40% cache hit rate
- 11. @garysieling
- 13. @garysieling PROCESSING PIPELINEPROCESSING PIPELINE JavaScript - Glue code Science code (Docker, Python, ...) Web UIs for monitoring
- 16. @garysieling GROUND CONTROL POINTGROUND CONTROL POINT
- 21. @garysieling
- 23. @garysieling
- 24. @garysieling GEOTIFF.JS - TILEGEOTIFF.JS - TILE
- 25. @garysieling WEB UI BACKEND - TILESWEB UI BACKEND - TILES Hosted - Mapbox, OpenStreetMap Folder structure: zoom + location S3 - byte ranging
- 26. @garysieling GATSBY + JAMSTACKGATSBY + JAMSTACK
- 28. @garysieling WHY GATSBYWHY GATSBY Easy styling Makes basic page routing a breeze to set up Avoid editing webpack files Production quality javascript builds
- 29. @garysieling UI + BACKENDUI + BACKEND ARCHITECTUREARCHITECTURE Gatsby - Web UIs hosted on S3 + Cloudfront Leaflet.js Microservices
- 30. @garysieling BACKEND - JAVASCRIPT LAMBDASBACKEND - JAVASCRIPT LAMBDAS Cost control Fast startup time Microservices
- 31. @garysieling BUILD YOUR OWN MAP UIBUILD YOUR OWN MAP UI
- 32. @garysieling LIBRARIESLIBRARIES yarn add gatsby-plugin-react-leaflet react-leaflet leaflet
- 33. @garysieling GATSBY-CONFIG.JSGATSBY-CONFIG.JS plugins: [ { resolve: 'gatsby-plugin-react-leaflet', options: { linkStyles: true } } ]
- 34. @garysieling LEAFLET.JSLEAFLET.JS const position = [39.9526, -75.1652 ]; const Map = () => <LeafletMap center={position} zoom={11}> <TileLayer attribution='© contributors' url='https://{s}.tile.osm.org/{z}/{x}/{y}.png' /> <Marker position={position}> <Popup> A <b>popup</b>. </Popup> </Marker> </LeafletMap> OpenStreetMap
- 35. @garysieling
- 36. @garysieling GATSBY - LESSONS LEARNEDGATSBY - LESSONS LEARNED Occasionally some hiccups from being on the bleeding edge/upgrading fast Defaults prevent engineers from arguing - but with escape hatches Hosting on S3- minor hiccups with JSON files
- 37. @garysieling JAMSTACK - LESSONS LEARNEDJAMSTACK - LESSONS LEARNED Can switch API backends Less moving parts to go down Smaller security footprint