More custom mapping ideas with LeafletJS

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

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>
<html>
<head>
<title>LeafletJS and OpenStreetMap</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>

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

// ADD YOUR MAP

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

// Attribute below

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

// ADD YOUR CUSTOM ICON

var customIcon = L.icon({
iconUrl: 'https://s3.amazonaws.com/Rise-Images/landing-page/rv-image.png', // link to the icon
iconSize: [50, 50], // size of the icon
});

// ADD THE LOCATION OF YOUR CUSTOM ICON

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

</body>
</html>


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 http://openstreetmap.org and search for the location where you want to add the marker.

leafletjs2

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: https://www.openstreetmap.org/#map=18/43.64373/-79.39927

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

var map = L.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

leafletjs3

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: 'https://s3.amazonaws.com/Rise-Images/landing-page/rv-image.png', // link to the icon
iconSize: [50, 50], // size of the icon
});


Add the location of your custom icon

You can use http://openstreetmap.org 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.

leafletjs4

Have fun mapping!
For more ideas have a look at LeafletJS website at http://leafletjs.com/index.html or search online for other resource articles and examples.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 4

There are no replies.