Maps are an essential part of modern web programming and mathematics. With open-source platforms like OpenStreetMap (OSM) and mapping libraries like Leaflet, programmers can embed free, interactive world maps directly into their applications without API keys, fees, or tracking!
Every location on Earth can be pinpointed using two numbers:
• Latitude: How far north ($+90^\circ$ at the North Pole) or south ($-90^\circ$ at the South Pole) a point is from the Equator ($0^\circ$).
• Longitude: How far east ($+180^\circ$) or west ($-180^\circ$) a point is from the Prime Meridian ($0^\circ$) in Greenwich, England.
To render a map, we call:
drawmap(latitude, longitude, zoom)
The zoom level controls how close you are: 1 shows the entire globe, 10 shows a city or region, and 16 zooms in to individual streets and buildings!
You can also change the map appearance using setmaptype("standard"), setmaptype("satellite"), or setmaptype("terrain").
Move the mouse over a dotted box for more information.
The interactive map will appear in the visualization area below. You can click and drag to pan, scroll to zoom, or click anywhere on the map to display that point's latitude and longitude in the output box!
Now you try. Try adjusting the zoom level from 14 to 17 to see the walkways around the Eiffel Tower, or zoom out to 4 to see all of Europe!
Type your code here:
See your results here:
Share your code
Show a friend, family member, or teacher what you've done!
Here is a share link to your code:
Need a hint?
💡 What now?
To complete this lesson: Look at the code above. Currently lat and long are set to 0.
1. Set lat = 48.8584 and long = 2.2945 to center the map directly on the Eiffel Tower in Paris, France.
2. Click Run to see your interactive OpenStreetMap appear!
3. Click the Example button above to see more features like satellite imagery.