Leaflet part 2 - NieneB/webmapping_for_developers GitHub Wiki

Our reference map consists of multiple tiles: static raster images. If you zoom or pan the map, new raster images are loaded into view. In this step, we will use native Leaflet JS functionality to draw markers, circles and polygons: vector objects. If you zoom or pan the map, these vector objects simply scale or move along.

Raster data is like a picture that you would take with a digital camera: at the lowest level of abstraction, it is a list of pixels with values. When you ‘zoom in’ and look closer at raster data using an image viewer application, at some point you’ll see these discrete pixels, and it will look pixelated.

Vector data stores basic geometries rather than pixel data. No matter how much you ‘zoom in’ on vector data, you won’t see pixels: the data stored is composed of geometric points and lines, and only converted into an image when necessary.

Geo data exists (mostly) out of points , lines and polygons. There are other data formats like multilines, mulitpolygons etc. But the most basic thing to know are points, lines and polygons.

Loading in vector data to your map is much more extensive then raster data. Because it contains all the data on coordinates and attributions, depending also on how elaborate your geo data is. A set of points is already much smaller in size then a set of highly detailed polygons. Therefore it is wise to only add a limited amount of vector data to your web map. Otherwise you will use too much loading time, making your map slow, or even the browser could die of too much data been tried to load in..

In this part we will show you how to add small amounts of geo data. Like a point or marker where your house or office is. These things are small and Leaflet offers us quick and easy ways to handle these things! In Leaflet part 3 we will look at other ways to show geo data on your map, specifically when the dataset gets bigger.

Let's start by adding markers, circles and custom markers, to the map. This will probably be the most used functionallity of a small Leaflet map. In Leaflet a Point takes 2 coordinates as an array called a <LatLng> type. See documentation. We can use these coordinates to display a Marker or a Circle. Let's try this!

To add a marker to the map we use the L.marker instance. 🔗 The marker documentation

▶️ Add the following to your Javascript:

let marker = L.marker([52.372825, 4.900321]).addTo(map);

▶️ Change the coordinates to your office or house.

▶️ Add multiple markers, for example your sport centre, school, other favorite spots. Give them all a different variable name!

Remember finding coordinates? mapcoordinates.net

Now we can also add a pop-up to our marker. How we added a popup before was kind of complicated, paths, polylines, circles, polygons etc. all have a bindPopup() method. So we do not have to create the popup first, only the content. By using the .bindPopup() method, Leaflet adds the pop-up to the marker. Along with all the functionality.
Read more about the L.popup() instance at the documentation

▶️ Provide the markers with a pop-up:

let popupContent = "Write your pop up text here";
marker.bindPopup(popupContent); 

Instead of a pop-up we can also add a circle on the map on our coordinates. Change some of your markers to circles. 🔗 the circle documentation

▶️ Use the L.circle instance on the map, use your own coordinates:

let circle =  L.circle([52.372825, 4.900321], 500, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
}).addTo(map);

ℹ️ The circle takes an point (array of 2 coordinates) and a radius (in meters) as input! You can also define the radius of your circle in pixels. But then we need to take the L.circleMarker instance. documentation

Instead of a simple marker, a circle or a circleMarker we can define our icon to display the marker! Leaflet has a L.icon() function for this. See documentation

Create an icon first. Find yourself a image you want to use or get the one from our repository. It can be a .png file but also .gif files are possible!

▶️ Download the waag logo.png file.

▶️ Create an icon:

let customIcon = L.icon({
  iconUrl: 'logo.jpg',
  iconSize: [25, 25], // size of the icon
});

First we define an icon with L.icon(). We have given the object a couple of options. Many options are available, but we just need two for now. The URL is the path to the image file, in this case the logo.jpg file.

See the marker docs and the icon docs for all the possibilities!

▶️ Add the icon option to one of your markers:

let markerLogo = L.marker([52.372825, 4.900321], {icon: customIcon}).addTo(map);

▶️ Use the documentation and Leaflet examples to make your customIcon more custom!

➡️ Let's go to Leaflet part 3 to add more kinds of geo data to our map!