In this article I want to share a technique that I recently learned to display an interactive map on a website. For this, you will need just a few lines of HTML and JavaScript. This solution does not require you to sign up for any accounts or services anywhere, it is completely free and open source, and can be integrated with any front or back end web framework.
Give the demo below a try and if you like it, then keep on reading to learn how you can add a map like this one to your website in just 3 quick steps!
Add a map to your website in 3 steps
Okay, if you made it this far then I assume you want to get a map up and running on your site as quickly as possible. I will split the task into three steps.
Step 1: Add the CSS and JavaScript dependencies
To display a map we are…
In this article I want to share a technique that I recently learned to display an interactive map on a website. For this, you will need just a few lines of HTML and JavaScript. This solution does not require you to sign up for any accounts or services anywhere, it is completely free and open source, and can be integrated with any front or back end web framework.
Give the demo below a try and if you like it, then keep on reading to learn how you can add a map like this one to your website in just 3 quick steps!
Add a map to your website in 3 steps
Okay, if you made it this far then I assume you want to get a map up and running on your site as quickly as possible. I will split the task into three steps.
Step 1: Add the CSS and JavaScript dependencies
To display a map we are going to use Leaflet, an open source project that can render maps on desktop and mobile browsers.
First, add the CSS for this project In the <head> section of your page:
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
</head>
Next add the JavaScript library. I like to add JavaScript dependencies at the bottom of the <body> section of the page. If you prefer to add it in the <head> section, that works too.
<body>
...
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
</body>
Note that I’m using version 1.9.4 of Leaflet, downloaded from the unpkg CDN. The 1.9.4 version is the latest at the time I’m writing this article. You may want to check Leaftlet’s download page to see if there is a newer version that you can use instead.
Step 2: Add a map element to your page
Now you need to add an element to your web page where the map should appear. This can be just a <div> element with an id that you can later use to reference it from JavaScript. Put this element in the place within the page where you want the map to appear, and give it the desired dimensions. Here is an example:
<body>
...
<div id="myMap" style="width: 100%; height: 450px;"></div>
...
</body>
In this example I’m giving my map full width, and a height of 450 pixels. You can change these dimensions, and also if you prefer, you can move the style declarations with your other CSS definitions.
Step 3: Add the JavaScript logic to your page
The last step is to add the JavaScript code that renders the map. This is going to be another <script> tag, which you should add right after the <script> tag that you added in step 1, usually as the very last element before the closing </body> tag.
<body>
...
<script>
function showMap(id, lat, long, label) {
const mapLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
const satLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 19,
attribution: '© <a href="https://esri.com">ESRI</a>'
});
const map = L.map(id, {
layers: [mapLayer],
center: [lat, long],
zoom: 14,
scrollWheelZoom: false,
});
const markerLayer = L.marker([lat, long]).addTo(map).bindPopup(label);
L.control.layers({Map: mapLayer, Satellite: satLayer}, {Markers: markerLayer}).addTo(map);
}
document.addEventListener("DOMContentLoaded", (event) => {
showMap('myMap', 53.342686,-6.267118, 'Dublin Castle');
});
</script>
</body>
This block of JavaScript defines the showMap() function, which takes four arguments: the id of the element on which the map is to be rendered, the latitude and longitude that will be at the center of the map, and a label to use for a marker that will mark this center position. You can see the call to showMap() near the bottom of the code block.
The showMap() function creates a simple map configuration with two map layers and one marker layer. The mapLayer variable holds the standard map layer, which is sourced from OpenStreetMap, an open and free provider of map imagery.
The satLayer variable holds the layer with satellite imagery, which is provided by ESRI as part of their ArcGIS Online product. My understanding is that this specific map is available for public use, but I suggest you reach out to ESRI if in doubt.
The map variable holds the map instance, which is created with the OpenStreetMap layer as the only active layer. The center and zoom options configure the initial view of the map. Feel free to play with different values for the zoom setting to find the value that looks the best for your map. There are a lot more configuration options that can be passed here to control the behavior of the map. For this example I have chosen to disable zoom with the mouse scroll wheel, because that interferes with the scrolling of the article.
The markerLayer variable is initialized with a marker that points to the place at the center of the map. This marker is also given a popup bubble with a label, which appears when the marker is clicked.
Finally, a layer selection widget is added in the top right corner of the map. This is how you can switch between the street and satellite maps, and also how you can enable or disable the marker. The L.control.layers() method accepts two arguments. The first argument is an object with the mutually exclusive layers that can be chosen, which appear with radio buttons. The second argument is another object with the overlay layers, which can be turned on and off on top of the selected map layer.
And that’s pretty much it! The call to showMap() is made inside an event handler for the DOMContentLoaded event, so that it happens after the page is ready to be displayed by the browser.
Bonus step: How to find map coordinates for any place of interest
I’m sure you will want to reconfigure the map so that it points to a location you find interesting. If you know the map coordinates of the location in question, then great, just plug those numbers in the showMap() call and you are done.
But what if you don’t know what the coordinates are for the place you want the map to be centered on? In that case, here is a simple trick you can use to find them:
- Open Google Maps and search the location you are interested in.
- Right click on the exact place you want your map to be centered on.
- A context menu will appear, with the latitude and longitude of the point you clicked as a first menu option. Select that menu option to copy the coordinates to the clipboard.
Conclusion
I hope you have found this quick article useful. If you want to dig deeper into creating maps with Leaflet, I recommend that you check out their documentation to learn about all the different kinds of layers you can add to your map and many other cool options the library offers.
Thank you for visiting my blog! If you enjoyed this article, please consider supporting my work and keeping me caffeinated with a small one-time donation through Buy me a coffee. Thanks!