title
1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript

description
💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS In this video I use Leaflet.js to add an interactive map to the page and place the ISS location as a marker. 🔗 Leaflet.js: https://leafletjs.com/ 🔗https://wheretheiss.at/ 🎥 NEXT LESSON: https://youtu.be/wxbQP1LMZsw 🎥 PREVIOUS LESSON: https://youtu.be/uxf0--uiX0I 🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X 🎥 The Basics of CSS: https://youtu.be/zGL8q8iQSQw 🚂 Website: http://thecodingtrain.com/ 💖 Patreon: https://patreon.com/codingtrain 🛒 Store: https://www.designbyhumans.com/shop/codingtrain/ 📚 Books: https://www.amazon.com/shop/thecodingtrain 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 Processing: https://processing.org Welcome to Working with Data and APIs in Javascript! This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript', 'heatmap': [{'end': 279.51, 'start': 252.973, 'weight': 0.703}, {'end': 630.004, 'start': 608.733, 'weight': 1}], 'summary': 'Tutorial focuses on mapping geolocation with leaflet.js, covering integrating leaflet.js to plot latitude and longitude data on a map for iss, working with openstreetmap tile urls, creating interactive maps with leaflet.js, customizing marker icons, and creating interactive maps by adding markers and calling an api to update markers and location.', 'chapters': [{'end': 422.191, 'segs': [{'end': 142.769, 'src': 'embed', 'start': 99.562, 'weight': 0, 'content': [{'end': 99.922, 'text': 'There it is.', 'start': 99.562, 'duration': 0.36}, {'end': 108.108, 'text': "So now I have my div, but there's another important piece here, I need to make sure that the div has a defined height.", 'start': 100.143, 'duration': 7.965}, {'end': 113.132, 'text': "If it doesn't have a defined height, the map won't appear because it will assume the height is zero.", 'start': 108.589, 'duration': 4.543}, {'end': 115.794, 'text': 'So this is actually some CSS.', 'start': 113.452, 'duration': 2.342}, {'end': 119.837, 'text': "This is not, I can't cover everything in this video series as much as I might like to.", 'start': 116.235, 'duration': 3.602}, {'end': 125.382, 'text': "If you're unfamiliar with CSS, I will point you to some resources in this video's description of where you can learn more about CSS.", 'start': 120.078, 'duration': 5.304}, {'end': 130.204, 'text': 'But this CSS is a way to define styling information, particular elements.', 'start': 125.902, 'duration': 4.302}, {'end': 134.306, 'text': "So this is styles for the map ID, which I'm calling issmap.", 'start': 130.464, 'duration': 3.842}, {'end': 135.866, 'text': "So I'm going to go back here.", 'start': 134.326, 'duration': 1.54}, {'end': 142.769, 'text': "I'm going to add in the header a style tag so I can put some inline CSS here.", 'start': 136.306, 'duration': 6.463}], 'summary': "Ensuring the div has a defined height is crucial for the map to appear. css is used for styling, specifically targeting the map id 'issmap'.", 'duration': 43.207, 'max_score': 99.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow99562.jpg'}, {'end': 279.51, 'src': 'heatmap', 'start': 245.689, 'weight': 3, 'content': [{'end': 252.613, 'text': "If I look back on the Getting Started Guide, we can see like, oh, it's creating this tile layer from this api.tiles.mapbox.com.", 'start': 245.689, 'duration': 6.924}, {'end': 261.036, 'text': "So I'm going to actually use tiles from OpenStreetMap, which is a Creative Commons repository of mapping tiles.", 'start': 252.973, 'duration': 8.063}, {'end': 265.78, 'text': 'And I am required, if I use OpenStreetMap, to use this attribution.', 'start': 261.656, 'duration': 4.124}, {'end': 268.983, 'text': "So I looked up what the attribution is required, and it's this.", 'start': 266.201, 'duration': 2.782}, {'end': 275.527, 'text': 'Copyright symbol, a link to OpenStreetMap, and then saying that the tiles are from OpenStreetMap contributors.', 'start': 269.383, 'duration': 6.144}, {'end': 279.51, 'text': 'Once I have the attribution, I can create a variable called tiles.', 'start': 275.988, 'duration': 3.522}], 'summary': 'Using openstreetmap tiles from api.tiles.mapbox.com requires attribution with copyright symbol and link to openstreetmap.', 'duration': 23.294, 'max_score': 245.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow245689.jpg'}, {'end': 400.31, 'src': 'embed', 'start': 373.173, 'weight': 4, 'content': [{'end': 376.236, 'text': "If I give myself a little bit more space, there we'll see the map here.", 'start': 373.173, 'duration': 3.063}, {'end': 380.198, 'text': 'Now, we should note that the open street map tiles use a Mercator projection.', 'start': 376.596, 'duration': 3.602}, {'end': 384.021, 'text': "The Earth itself is a sphere, and so we're looking at it as a flat plane.", 'start': 380.438, 'duration': 3.583}, {'end': 388.183, 'text': 'So we have to figure out well, how do we take that sphere and unwrap it onto a flat plane?', 'start': 384.261, 'duration': 3.922}, {'end': 392.366, 'text': 'And there are a variety of different techniques for doing this, many different kinds of projections.', 'start': 388.443, 'duration': 3.923}, {'end': 400.31, 'text': 'The Mercator projection, which was created in 1569 by the Flemish geographer and cartographer Gerardus Mercator, is commonly used,', 'start': 392.666, 'duration': 7.644}], 'summary': 'Mercator projection, created in 1569, commonly used for open street map tiles.', 'duration': 27.137, 'max_score': 373.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow373173.jpg'}, {'end': 430.518, 'src': 'embed', 'start': 406.554, 'weight': 5, 'content': [{'end': 414.403, 'text': 'Greenland appears massive, while Africa appears quite small and has to do with the way that the Earth is being stretched along the poles,', 'start': 406.554, 'duration': 7.849}, {'end': 415.224, 'text': "as it's flattened out.", 'start': 414.403, 'duration': 0.821}, {'end': 422.191, 'text': "So this is something that I think is important to be conscientious and thoughtful about as you're deciding how you're presenting data in the mapping context.", 'start': 415.484, 'duration': 6.707}, {'end': 426.336, 'text': "But for this simple example, I'm going to stick with what OpenStreetMap gives us to work with.", 'start': 422.472, 'duration': 3.864}, {'end': 430.518, 'text': 'The other piece of this to come back to is this tile URL.', 'start': 426.636, 'duration': 3.882}], 'summary': "Greenland appears massive, while africa appears quite small due to earth's stretch along the poles.", 'duration': 23.964, 'max_score': 406.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow406554.jpg'}], 'start': 0.799, 'title': 'Mapping with leaflet.js for iss', 'summary': 'Details integrating leaflet.js to plot latitude and longitude data on a map for iss, including library references, creating a div element, defining styling, initializing the map object, specifying map tiles from openstreetmap, setting attribution, and understanding the mercator projection, with emphasis on conscientious data presentation.', 'chapters': [{'end': 213.708, 'start': 0.799, 'title': 'Iss mapping with leaflet.js', 'summary': 'Details the process of integrating leaflet.js to plot latitude and longitude data on a map, including adding library references, creating a div element, defining its styling, and initializing the map object.', 'duration': 212.909, 'highlights': ['The process involves adding library references, creating a div element, defining its styling, and initializing the map object. Integration of leaflet.js for plotting latitude and longitude data.', 'The importance of adding the leaflet.js library and CSS file, creating a div element, and defining its styling to ensure the map displays correctly. Necessary steps for proper map display.', 'Explanation of the latitude, longitude, and zoom level settings for the map. Understanding the settings for initial map display.']}, {'end': 422.191, 'start': 213.928, 'title': 'Mapping with leaflet library', 'summary': 'Covers creating a map using the leaflet library, specifying map tiles from openstreetmap, setting attribution, and understanding the mercator projection, with emphasis on conscientious data presentation.', 'duration': 208.263, 'highlights': ['Understanding the Mercator projection The Mercator projection, commonly used for open street map tiles, was created in 1569 by Gerardus Mercator, presenting a Western-centric view of the world and requiring conscientious consideration of data presentation.', 'Specifying map tiles from OpenStreetMap The chapter emphasizes the use of tiles from OpenStreetMap, a Creative Commons repository, and the requirement to include attribution, comprising a copyright symbol, a link to OpenStreetMap, and acknowledgment of the tiles being from OpenStreetMap contributors.', 'Creating a map using Leaflet library The process involves creating a tile layer using the Leaflet library, specifying the URL of the tiles and attribution, and adding the tiles to the map, resulting in the ability to zoom in and out while moving around the map.']}], 'duration': 421.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow799.jpg', 'highlights': ['Understanding the Mercator projection The Mercator projection, commonly used for open street map tiles, was created in 1569 by Gerardus Mercator, presenting a Western-centric view of the world and requiring conscientious consideration of data presentation.', 'Specifying map tiles from OpenStreetMap The chapter emphasizes the use of tiles from OpenStreetMap, a Creative Commons repository, and the requirement to include attribution, comprising a copyright symbol, a link to OpenStreetMap, and acknowledgment of the tiles being from OpenStreetMap contributors.', 'Creating a map using Leaflet library The process involves creating a tile layer using the Leaflet library, specifying the URL of the tiles and attribution, and adding the tiles to the map, resulting in the ability to zoom in and out while moving around the map.', 'The process involves adding library references, creating a div element, defining its styling, and initializing the map object. Integration of leaflet.js for plotting latitude and longitude data.', 'The importance of adding the leaflet.js library and CSS file, creating a div element, and defining its styling to ensure the map displays correctly. Necessary steps for proper map display.', 'Explanation of the latitude, longitude, and zoom level settings for the map. Understanding the settings for initial map display.']}, {'end': 632.426, 'segs': [{'end': 515.219, 'src': 'embed', 'start': 486.002, 'weight': 0, 'content': [{'end': 487.803, 'text': "This is what's known as a marker.", 'start': 486.002, 'duration': 1.801}, {'end': 492.545, 'text': 'So now I need to create a leaflet.js marker object.', 'start': 488.103, 'duration': 4.442}, {'end': 496.646, 'text': "To do that, I'm actually going to go just to show you the documentation of leaflet.js.", 'start': 493.045, 'duration': 3.601}, {'end': 498.807, 'text': 'I probably could have found this on the Getting Started page.', 'start': 496.666, 'duration': 2.141}, {'end': 501.168, 'text': "But I'm going to go and find a marker.", 'start': 499.167, 'duration': 2.001}, {'end': 503.689, 'text': "That's one of the UI layers.", 'start': 502.168, 'duration': 1.521}, {'end': 505.551, 'text': "There's pop-ups and tool tips.", 'start': 503.729, 'duration': 1.822}, {'end': 507.092, 'text': "I'm just going to go to marker.", 'start': 505.851, 'duration': 1.241}, {'end': 511.896, 'text': 'And this is giving me now information of how to create a marker.', 'start': 507.593, 'duration': 4.303}, {'end': 515.219, 'text': 'I need to create a marker at a given latitude and longitude.', 'start': 512.216, 'duration': 3.003}], 'summary': 'Creating a leaflet.js marker object for ui layers at a specific latitude and longitude.', 'duration': 29.217, 'max_score': 486.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow486002.jpg'}, {'end': 643.837, 'src': 'heatmap', 'start': 608.733, 'weight': 1, 'content': [{'end': 609.954, 'text': 'Set lat long.', 'start': 608.733, 'duration': 1.221}, {'end': 611.595, 'text': 'That makes sense.', 'start': 610.514, 'duration': 1.081}, {'end': 612.875, 'text': 'Set lat long.', 'start': 611.915, 'duration': 0.96}, {'end': 617.418, 'text': "So I'm going to grab that function, not set view, and there we go.", 'start': 612.895, 'duration': 4.523}, {'end': 619.479, 'text': 'Go back to here, and we can see there we go.', 'start': 617.798, 'duration': 1.681}, {'end': 630.004, 'text': 'The reason why I want to do that is I want to always set to the new latitude longitude if and when I update the location of the International Space Station.', 'start': 620.279, 'duration': 9.725}, {'end': 632.426, 'text': "Let's do one more thing to make this a little nicer looking.", 'start': 630.504, 'duration': 1.922}, {'end': 637.051, 'text': 'We can actually customize what is used as the icon for the marker itself.', 'start': 632.506, 'duration': 4.545}, {'end': 643.837, 'text': 'I have here, this is a public domain image, a little SVG file of the International Space Station itself.', 'start': 637.791, 'duration': 6.046}], 'summary': 'Customize marker icon with svg image for international space station location updates.', 'duration': 35.104, 'max_score': 608.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow608733.jpg'}], 'start': 422.472, 'title': 'Using openstreetmap and leaflet.js', 'summary': "Covers working with openstreetmap tile urls, explaining the format and components, and creating interactive maps with leaflet.js, including adding a marker at the international space station's location and discussing the need for a flexible update solution.", 'chapters': [{'end': 462.131, 'start': 422.472, 'title': 'Working with openstreetmap tile urls', 'summary': 'Explains the format of openstreetmap tile urls, highlighting the structure of the url and its components, such as zoom level, latitude, longitude, and style.', 'duration': 39.659, 'highlights': ['OpenStreetMap tile URL format includes components for zoom level, latitude, longitude, and style, allowing retrieval of specific tiles at given locations.', 'The URL provided as an example is not a valid URL but represents the format for obtaining a tile at a specific xy location and zoom level.']}, {'end': 632.426, 'start': 463.511, 'title': 'Creating interactive maps with leaflet.js', 'summary': "Demonstrates using leaflet.js to create an interactive map, adding a marker at the international space station's current location, and discussing the need for a flexible solution to update the marker's location.", 'duration': 168.915, 'highlights': ['Leaflet.js simplifies the process of loading tile images and adding markers to maps, providing a convenient convention for loading tiles from OpenStreetMap with specific attribution.', "The tutorial explores creating a marker at a given latitude and longitude using leaflet.js, emphasizing the need for flexibility in updating the marker's location as the International Space Station's position changes.", "The demonstration involves adding a marker at the International Space Station's current latitude and longitude, aiming to update the marker's location dynamically and discussing the need for a more refined approach for location updates."]}], 'duration': 209.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow422472.jpg', 'highlights': ['OpenStreetMap tile URL format includes components for zoom level, latitude, longitude, and style, allowing retrieval of specific tiles at given locations.', 'Leaflet.js simplifies the process of loading tile images and adding markers to maps, providing a convenient convention for loading tiles from OpenStreetMap with specific attribution.', "The tutorial explores creating a marker at a given latitude and longitude using leaflet.js, emphasizing the need for flexibility in updating the marker's location as the International Space Station's position changes."]}, {'end': 911.985, 'segs': [{'end': 751.393, 'src': 'embed', 'start': 704.59, 'weight': 0, 'content': [{'end': 706.871, 'text': 'I want the anchor to be in the center of it.', 'start': 704.59, 'duration': 2.281}, {'end': 713.478, 'text': 'where I want to position the image itself, its center, on the actual latitude and longitude.', 'start': 708.192, 'duration': 5.286}, {'end': 719.304, 'text': "So this is 25, 16, and I don't need this shadowing and shadow stuff, so I'll just get rid of that.", 'start': 713.738, 'duration': 5.566}, {'end': 722.087, 'text': 'And now I have an icon, I can say ISS icon.', 'start': 719.565, 'duration': 2.522}, {'end': 727.29, 'text': 'And then I should be able to add that to the marker.', 'start': 723.325, 'duration': 3.965}, {'end': 735.04, 'text': "So if I'm creating the marker here, what's the next thing that I do? I can actually give it a second argument.", 'start': 727.831, 'duration': 7.209}, {'end': 739.225, 'text': 'In addition to the latitude and longitude, I can give it that particular icon.', 'start': 735.32, 'duration': 3.905}, {'end': 741.188, 'text': "So I'm going to do this, comma.", 'start': 739.626, 'duration': 1.562}, {'end': 750.573, 'text': "icon and it's my ISS icon, and then we should see the International Space Station as an icon on our page.", 'start': 742.549, 'duration': 8.024}, {'end': 751.393, 'text': 'and there you are now.', 'start': 750.573, 'duration': 0.82}], 'summary': 'Positioned iss icon at 25, 16 coordinates on the map.', 'duration': 46.803, 'max_score': 704.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow704590.jpg'}, {'end': 911.985, 'src': 'embed', 'start': 888.583, 'weight': 1, 'content': [{'end': 892.605, 'text': 'We might as well, and this is going to change the whole way the web page works, actually, which might be a little tricky.', 'start': 888.583, 'duration': 4.022}, {'end': 895.507, 'text': 'But why not set the maps?', 'start': 892.985, 'duration': 2.522}, {'end': 904.056, 'text': 'set the location of the space station to be the center of the map and a higher zoom level for it to load with the ISS right there in the center of the map.', 'start': 896.207, 'duration': 7.849}, {'end': 905.538, 'text': 'So that might be something to try as well.', 'start': 904.276, 'duration': 1.262}, {'end': 911.985, 'text': "So I'm going to come back in the next, try some of that stuff, come back and you'll see solutions in the next video where I'll wrap up this project.", 'start': 905.758, 'duration': 6.227}], 'summary': 'Adjust web page to center map on iss location for better user experience.', 'duration': 23.402, 'max_score': 888.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow888583.jpg'}], 'start': 632.506, 'title': 'Customizing marker icon and creating interactive map with leaflet.js', 'summary': 'Details customizing marker icon in leaflet and creating an interactive map, adding markers, custom icons, and calling an api to update markers and location on the map, with suggestions for further customization and exploring using p5.js for custom visualizations.', 'chapters': [{'end': 772.898, 'start': 632.506, 'title': 'Customizing marker icon in leaflet', 'summary': 'Details how to customize the marker icon in leaflet by using a specific image file, resizing it, setting its anchor position, and adding it to the marker, resulting in the international space station icon appearing on the page.', 'duration': 140.392, 'highlights': ['The chapter explains how to customize the marker icon in Leaflet by using a specific image file, resizing it to 50 by 32 pixels, and setting its anchor position to 25, 16 to ensure it appears at the correct latitude and longitude.', 'It demonstrates adding the customized icon to the marker, resulting in the International Space Station icon appearing on the page instead of the default marker.', 'The process involves obtaining a specific image file, such as a public domain SVG file of the International Space Station, converting it to a PNG file, and saving it as part of the project folder.']}, {'end': 911.985, 'start': 773.598, 'title': 'Creating interactive map with leaflet.js', 'summary': 'Covers creating an interactive map using leaflet.js, adding markers, custom icons, and calling an api to update markers and location on the map, with suggestions for further customization and exploring using p5.js for custom visualizations.', 'duration': 138.387, 'highlights': ['The chapter covers creating an interactive map using Leaflet.js, adding markers, custom icons, and calling an API to update markers and location on the map.', 'Suggestions are provided for further customization, such as designing custom icons, playing around with settings, and representing other data on the map.', 'Exploring the use of p5.js for custom visualizations on top of the map, with reference to the mappa.js library for creative drawing on top of a map.', 'An upcoming video is mentioned to cover setting the location of the space station as the center of the map with a higher zoom level, providing a solution for refreshing the location without refreshing the page.']}], 'duration': 279.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZaZ2dB6pow/pics/nZaZ2dB6pow632506.jpg', 'highlights': ['The chapter covers creating an interactive map using Leaflet.js, adding markers, custom icons, and calling an API to update markers and location on the map.', 'Suggestions are provided for further customization, such as designing custom icons, playing around with settings, and representing other data on the map.', 'Exploring the use of p5.js for custom visualizations on top of the map, with reference to the mappa.js library for creative drawing on top of a map.', 'The process involves obtaining a specific image file, such as a public domain SVG file of the International Space Station, converting it to a PNG file, and saving it as part of the project folder.', 'It demonstrates adding the customized icon to the marker, resulting in the International Space Station icon appearing on the page instead of the default marker.', 'The chapter explains how to customize the marker icon in Leaflet by using a specific image file, resizing it to 50 by 32 pixels, and setting its anchor position to 25, 16 to ensure it appears at the correct latitude and longitude.']}], 'highlights': ['The process involves creating a tile layer using the Leaflet library, specifying the URL of the tiles and attribution, and adding the tiles to the map, resulting in the ability to zoom in and out while moving around the map.', 'Understanding the Mercator projection, commonly used for OpenStreetMap tiles, was created in 1569 by Gerardus Mercator, presenting a Western-centric view of the world and requiring conscientious consideration of data presentation.', 'OpenStreetMap tile URL format includes components for zoom level, latitude, longitude, and style, allowing retrieval of specific tiles at given locations.', "The tutorial explores creating a marker at a given latitude and longitude using Leaflet.js, emphasizing the need for flexibility in updating the marker's location as the International Space Station's position changes.", 'The chapter covers creating an interactive map using Leaflet.js, adding markers, custom icons, and calling an API to update markers and location on the map.', 'The chapter explains how to customize the marker icon in Leaflet by using a specific image file, resizing it to 50 by 32 pixels, and setting its anchor position to 25, 16 to ensure it appears at the correct latitude and longitude.']}