Leaflet JS Demo

index.html

<div id="mapid"></div>

leaflet-js-demo.markdown

Leaflet JS Demo

A Pen by ellie on CodePen.

License.

script.js

// Note: Leaflet JS  and Leaflet Providers JS included via settings menu


// Find the div named mapid in the HTML file, and add a new map there
// Center the map on Cramer Hall
var map = new L.Map("mapid", {
  center: new L.LatLng(45.5125457, -122.6857447),
  zoom: 15
});



// Choose which map tiles to use (the map background)
// Other choices: http://leaflet-extras.github.io/leaflet-providers/preview/
L.tileLayer.provider("Stamen.Toner").addTo(map);



//// Data Points
// This is all the information that will be used to draw the points on your map
// This information is stored in a data format called JSON
// More info about the format: json.org or https://en.wikipedia.org/wiki/JSON 

var datapoints = {
  "Point 1": {
    lat: 45.512,
    lon: -122.685,
    comments:
      "<p>Some text about point 1.</p><p><strong>Can have HTML.</strong></p>",
    color: "orange",
    radius: 15
  },
  "Point 2": {
    lat: 45.513,
    lon: -122.688,
    comments: "Some text about point 2. Can also just be plain text.",
    color: "#d654f7",
    radius: 25
  },
  "Point 3": {
    lat: 45.513,
    lon: -122.682,
    comments: "Some text about point 3.",
    color: "#d654f7",
    radius: 3 * 10 
  } 
};

//// Helpful notes about data points:

//// Colors 
// can be specified as CSS color names or hex values.
// List of Names: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
// Color Picker: https://duckduckgo.com/?q=color+picker

//// Math
// You can enter simple math equations anywhere there is a number.
// * is multiplication, / is division, + is addition, - is subtraction
// See example in point 3



//// Draw the map

// Go through all the information stored in the datapoints object
// And create a map marker for each data point
for (var eachpoint in datapoints) {
  var aMarker = L.circle(
    [datapoints[eachpoint]["lat"], datapoints[eachpoint]["lon"]],
    {
      radius: datapoints[eachpoint]["radius"],
      opacity: 1,
      fillOpacity: 0.8,
      color: datapoints[eachpoint]["color"]
    }
  );
  aMarker.addTo(map);
  aMarker.bindPopup(datapoints[eachpoint]["comments"]);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.8.0/leaflet-providers.min.js"></script>

style.css

/*  Leaflet CSS included in HTML head */

html, body, #mapid { 
  padding: 0;
  margin: 0;
  height: 100%;
  widtth: 100%;
}