Angular with Maps? It’s Maptastic!

on YouTube ↗36m

" summary

Shows explicit code to load Google Maps JavaScript API into an Angular app via a dynamic script-loading service, mounts the map in ngAfterView, and accesses the maps API from window. Demonstrates plotting points from JSON/CSV, heatmaps, styled GeoJSON polygons, and marker clusterer grid sizing for thousands of markers. Builds custom tools with the drawing manager, exports created shapes as GeoJSON to POST to a server, and links to working GitHub examples.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:37add some data to your map
3. 4:05choose your custom tiles
4. 9:46create a script loading service
5. 10:34place our map inside the div
6. 20:32creating a heat map from this csv
7. 27:59create your own custom drawing tools
8. 30:17create a cut marker
9. 31:20create markers as cuts
10. 32:04save your creations
11. 32:18saving our creations in a universal geo data from our jason

" related talks

• 25mWeb Maps - Putting the M in Angular web apps!Katerina Skroumpelou · ngVikings 2018
• 16mAdvanced Map Techniques (en)Adrien Couque · Droidcon Paris 2015
• 18mBuilding Maps with Impact on React and the JAMstackColby Fayock · NationJS Frontrunners React 2019
• 07mAngular & ElasticSearch: Combined ForcesFranciska van Maurik · Frontend Love Eindhoven 2019
• 20mBuilding Platforms with AngularJen Bourey · ng-conf 2015
• 23m'OpenLayers: The Open Source Option of Adding Maps on Websites'Krishna Lodha · XtremeJS 2022
• 40mStronger App Architecture Using MapsMatt Gardner · EmberConf 2020
• 20mPrototyping with Angular? YESKelly Knight, Dirk Ginader · ng-conf 2015