10.2 Interactive Maps

Excerpt

In this module you’ll learn to create web maps using JavaScript and Leaflet, then show information on a map layer with JSON data.

Web Maps

Create a Map with Leaflet

Excerpt Exercise 10.2.1

There are several JavaScript frameworks that make it easy to create maps. This demo uses Leaflet, which is free, open source, and mobile friendly. In this exercise you will set up a new map view and change the base layer using Leaflet and Codepen.

Make a copy of our Leaflet Starter by pressing the Fork button in the lower right corner on Codepen at criticalwebdesign.github.io#leaflet-starter and examine the basic Leaflet map. This Pen has the Leaflet CSS and JS code installed in the Pen Settings, as well as the following HTML element to display the map.

See the Pen CWD Leaflet (1.9.4) Map (Starter) by Owen Mundy (@owenmundy) on CodePen.

See this Codepen https://criticalwebdesign.github.io#leaflet-starter

Analyze the JS code in the Pen. Importing the Leaflet JavaScript file instantly creates a new Leaflet object named L, which is used to access the library functionality. This initializes the map into a new variable and sets its default position and zoom level. Locations in Leaflet use an array with a latitude (position on the earth’s y axis denoted by horizontal lines) and longitude (position on the x axis marked on vertical lines). Find your location using latlong.net and plug the two values into the array below (replacing ours) so that the map shows your location.

var map = L.map("map").setView([35.5, -80.85], 3);

When you initialize a map, you can set the zoom level (or view) to be low (close up) or high (far away). The number after the coordinates sets the zoom level from 0 to 18. Change the zoom level in .setView to see the effect.

var map = L.map("map").setView([35.5, -80.85], 9);

The map terrain is added using the tileLayer() function. Leaflet makes it easy to change the underlying map image by simply pointing to a different tileset server using the z/x/y template (zoom level/longitude/latitude), which automatically tracks and fetches the correct tiles for each location. This example code below sets the base layer to OpenStreetMap, but you can change it by selecting a different URL from a tileset provider.

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);

Explore the map tilesets at criticalwebdesign.github.io#tiles. There are many free tilesets you can use to change the color and feeling of your map. When you find one you like, press the Info button and copy and paste the tileset URL over the existing URL to see it in your map.
With a base layer in place, you can now add overlays to the map. Add this code to create a new marker on the map at your position. Use latlong.net again to get coordinates for a specific spot within your map view, and replace the latitude and longitude with your new location. If you add a marker not currently in your map view, you will need to zoom out or pan the map to find it. In the next exercise you’ll continue adding markers to the map using GeoJSON data. Feel free to explore the leaflet documentation for more examples.

// set base layer tileset
L.tileLayer("http://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}").addTo(map);
var marker = L.marker([35.498116, -80.849124]).addTo(map);

Other Map Tileset Providers

GeoJSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "lefteye",
        "color": "red"
      },
      "geometry": {
        "coordinates": [
          20.254210258899974,
          10.248324129891202
        ],
        "type": "Point"
      },
      "id": 0
    },
    {
      "type": "Feature",
      "properties": {
        "name": "righteye",
        "color": "blue"
      },
      "geometry": {
        "coordinates": [
          33.5857337777679,
          7.011603808791804
        ],
        "type": "Point"
      },
      "id": 1
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          17.013013048764776,
          1.1816459451551538
        ],
        "type": "Point"
      },
      "id": 2
    }
  ]
}

Sample code for the above GeoJSON.io site

See the Pen CWD Leaflet Map by Owen Mundy (@owenmundy) on CodePen.

See this Codepen https://criticalwebdesign.github.io#leaflet

Map Resources

Leaflet Notes

In order to make the circle sizes appear constant relative to the interface we used L.circleMarker() where you can define the radius in pixels (regardless of the map zoom level).

let marker = L.circleMarker([data[i].lat, data[i].lng], {
  radius: 50,
  stroke: false,
  color: "red",
  fillOpacity: 0.3,
});

… instead of L.circle() which uses a static radius (meters).

var circle = L.circle([data[i].lat, data[i].lng], {
  radius: 350000,
  stroke: false,
  fillColor: "#f03",
  color: "red",
  fillOpacity: 0.3,
});