More custom mapping ideas with LeafletJS

  • 4
  • Article
  • Updated 2 years ago
  • (Edited)

In this article, I'll be using LeafletJS which is an open source mapping library for building interactive maps. You can use this LeafletJS with Mapbox or another map platform. In this example, I am using OpenStreetMap.

Now you may be thinking - why go through this effort where I can just build it all up on an image? First of all, this map is interactive. Not only that, but you also have the opportunity to re-use the code in other platforms like your website or mobile app. This is a good way to bundle up your digital assets together and streamline your digital branding.

Let's get started!

To recreate the example above, copy and paste the following code into the HTML Widget in your Rise Vision Presentation. You can also copy the code into a text editor, upload the HTML page into Rise Vision Storage, and embed using the Web Page Widget.

<!DOCTYPE html>
<title>LeafletJS and OpenStreetMap</title>
<meta charset="utf-8" />
<link rel="stylesheet" href=""/>

<div id="map" style="width: 800x; height: 520px"></div>


var map ='map',{scrollWheelZoom:false}).setView([43.64373, -79.39927], 18);

// Attribute below

mapLink = '<a href="">OpenStreetMap</a>';
L.tileLayer('http://{s}{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,


var customIcon = L.icon({
iconUrl: '', // link to the icon
iconSize: [50, 50], // size of the icon


var marker = L.marker([43.644245, -79.398700], {icon: customIcon}).addTo(map);


The code above is separated into three areas - adding the map, adding the custom marker and adding the location for this custom marker. You can see all of those titles in all caps in the code comments and in bold text below. I've added a breakdown of the sections including details on how you can customize it below:

Adding your own map

To add your map, go to and search for the location where you want to add the marker.


After searching for the location you will notice that the URL will change. For example, after searching for our office in Brightlane in 545 King Street West in Toronto, the URL changes to:

Using the values in this URL, I've added the longitude, latitude and zoom values within the map variable:

var map ='map',{scrollWheelZoom:false}).setView([43.64373, -79.39927], 18);

Your own OpenStreetMap URL will contain the latitude/longitude values (ie 43.64373, -79.39927) and also the map zoom (ie 18). Once you have locked in your own map location, you will need to replace these values in the map variable in that section of the HTML code.

Add your own marker icon for the map


To add a custom marker, replace the iconURL and iconSize. In the code below, I've added the Rise Vision logo (rv-image.png) and giving it a 50px x 50px size.

var customIcon = L.icon({
iconUrl: '', // link to the icon
iconSize: [50, 50], // size of the icon

Add the location of your custom icon

You can use to give you an idea of what the longitude and latitude values are. The longitude/latitude values for my custom marker ended up being 43.644245, -79.398700 as shown below:

var marker = L.marker([43.644245, -79.398700], {icon: customIcon}).addTo(map);

See below after adding to the HTML Widget and the RSS Widget and you can preview the live version here.


Have fun mapping!
For more ideas have a look at LeafletJS website at or search online for other resource articles and examples.
Photo of HSuarez


  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 4

There are no replies.