
Master practical leaflets data visualization with javascript through real projects, using plugins and various map providers, while learning clustering, heat maps, zoom-level markers, and geojson data handling.
Explore how to locate the libraries that power Leaflet and its ecosystem, and apply a fast, practical approach to implement code for data visualization with JavaScript, without teaching language basics.
Learn leaflet practice-oriented data visualization with javascript, including installing Notepad++ and a local server, exploring leaflet definitions, examples, and the well-documented leaflet website.
Discover how to set up Notepad++ as a lightweight, open-source editor for coding with JavaScript, install customizable themes, and tailor syntax highlighting.
Install xampp to run apache locally, access leaflet files via localhost, and place html and leaflet files in htdocs to serve server-side scripts.
Learn leaflet, an open-source JavaScript library for cross-platform web mapping, and build interactive layers, markers, popups, clustering, and heatmaps from open data.
Explore leaflet.js for practice-oriented data visualization in JavaScript, using OpenStreetMap layers, markers, and popups, with tutorials, layer groups, controls, and plugins.
Project data see attachment for download
Learn to build a basic Leaflet map by creating an OpenStreetMap, adding markers, editing longitude and latitude, and configuring popups and shapes, with tile providers and satellite view.
Create your first leaflet map by setting up the local environment, including leaflet assets and OpenStreetMap tiles, and configuring a basic map centered on London with index.html and localhost setup.
Insert a marker by setting longitude and latitude coordinates. Edit coordinates using Google Maps or Bing Maps to place a marker at your home city and explore zoom levels.
Add popups to markers and shapes in Leaflet, binding popup content like 'I'm located in Innsbruck,' and enable opening on click or page load with a lean open-source implementation.
Explore leaflet providers and tile maps, switch base layers, and review licensing for free or commercial use, with examples such as topo maps, cycling and hiking layers, and world imagery.
Explore how to visualize GPX data using Leaflet by loading ChipX files, marking start and end points with icons, and gradually exposing multiple routes on a single map.
Visualize open data from Austria on mountain bike routes using leaflet in JS, including GPX data, to map routes and provide a use-case for client data visualization.
Visualize GPX files on a leaflet map by loading GPX data, initializing map objects, fitting bounds, and revealing precise mountain bike tracks like Innsbruck routes.
Add icons to GPX start and end points in a leaflet visualization, showcasing four marker icons with shadows and guidance on when to reuse or differentiate start and end symbols.
Bind the popup to the GPX track on the map and display the distance in meters and miles, along with the bike name in the info window.
Extend a Leaflet map to visualize multiple GPX tracks by looping through files, handling missing files, and adding popups with start and end points on an OpenStreetMap base.
Explore how to implement a small project that maps ozone levels from Austrian measuring stations on OpenStreetMap using Leaflet, with custom icons, popups, marker clustering, and processing JSON data.
Explore the clustering plugin for map visualizations, learn how minimum and maximum radii control clusters, and see how zooming reveals individual stations using open ozone data from Ostrom.
Explore integrating the Leaflet cluster plugin to declutter markers, and load Austria ozone data in JSON by downloading and adding local files to the Leaflet project for reliability.
Load ozone data into the website using jquery and document ready function, reading a structured response with station id, timestamp, latitude, longitude, and hourly levels, then map it on OpenStreetMap.
Learn to create a marker cluster group for ozone level stations, bind popups with titles, and add markers to the map, with radius options controlling cluster density and zoom.
Learn to customize Leaflet markers with a chosen icon and display ozone levels under each marker, using Material icons and css styling, within a single-page example that supports clustering.
Explore heat maps on Leaflet using plugins to visualize ozone concentrations, with a free commercial-use option, and manage two layers where markers cluster on zoom and disappear when zoomed out.
Deploy a heat map layer on the map using a heat map plugin, mapping latitude, longitude, and intensity values to visualize ozone concentration and data clustering.
Learn to tailor Leaflet maps with zoom-aware layers, showing heat maps at low zoom and revealing markers and clusters as you zoom in to provide a clear overview.
Discover shapefiles and geojson in leaflet, and learn how vector features (points, lines, and polygons like rivers and lakes) are encoded, transformed, and visualized for web maps.
Clean up the map by removing extraneous code and keep markers and circles visible to compare data types, including shp files, on a Leaflet visualization.
Learn to filter GeoJSON data on a Leaflet map using a filter function that reads feature properties to control visibility for thousands of features.
Develop a leaflet-based data visualization project that uses geojson shapes of Lower Austria's natural reserve areas, adds a third-party search plugin, and auto-zooms, colors, and resets styles on query.
Deploy natural reserve data in shp files using Leaflet, and integrate a search plugin to search and zoom to desired areas.
Implement a search function in Leaflet for nature reserve shp, enable layer filtering, color highlighting, and automatic zoom to matched features.
Review how Leaflet visualizes ozone data with markers, icons, popups, tile providers, heat maps, and zoom-aware behavior, plus clustering for performance and shapefile edits with search-driven color changes.
After a brief general unit on leaflet, we start programming. We use real data from Austria based on OpenData and look at the most important file formats.
Suitable for beginners and even professionals can take a lot from the course.
In this course you will learn about the following data and file formats and visualize them yourself:
Mountain bike routes in GPX format
Ozone valuesin Austria - in JSONp format
Mountain huts in SHP format
Nature reserves in SHP format
We will use some Lefalet plugins in training - for example:
We cluster a few thousand data points
Ozone values are underlaid with a heat map
Course structure:
The videos are kept short (2-5 minutes)
After each video there is a save of all project data for download
It can be started with my proofed project files after each lesson
Guaranteed frustration-free learning without the hassle of troubleshooting and debugging
I use only open source software for this course :
XAMPP Apache Server
Notepad++ for coding
OpenData for the data sources
After this course you are able to implement your own Geo-Data into an Open-Street-Map with Leaflet. You can visualize your GPX-Tracks and also cluster them for an better overview. The oportunities are endless.
I look forward to your results and seeing you in the online course.
Markus Edenhauser