
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.
Synchronize with provided project files to follow along with smaller and bigger coding projects. Download the full project zip to review status after each video and debug with ease.
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.
Learn to create circles and polygons around map markers with Leaflet and JS to visualize areas. Adjust radius and opacity, and use zoom levels to direct attention to a marker.
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 data in leaflet by integrating a GPX plugin: download, extract, place it in the leaflet subfolder, and include it in your HTML under the license terms.
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.
Bind markers to the map to visualize ozone levels from measuring stations on openstreetmap, creating markers with latitudes and longitudes and popups showing station names and values.
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.
See how a Leaflet data visualization plugin handles 10,000 clusters and 50,000 icons on the map with no lag, and learn to manipulate client data with text and 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.
Learn to implement a heat map in Leaflet with the leaflet heat plugin, including license considerations for commercial use, and visualize concentration using heat layers and measuring stations data.
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.
Learn how to visualize real-time data on a leaflet map by loading thousands of points, filtering by properties, and clustering markers to boost performance.
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.
Bind popups to GeoJSON features with an on-each-feature approach on the feature layer, displaying each feature's name and filter geolocation with a dropdown to tailor visible data.
Apply the leaflet cluster plugin to cluster geojson data and improve performance when rendering 2,410 markers on a map.
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