Markers for Interactive Maps

Gallery
1

The following p5.js code produces markers for use on interactive maps, such as Leaflet maps:

let start_number = 1; // >= 1
let end_number = 16; // <= 999

let number = start_number;
function setup() {
  createCanvas(29, 17);
  textAlign(CENTER, CENTER);
  noSmooth();
  textFont('Courier');
  textSize(15);
  frameRate(1);
}

function draw() {
  background(0, 0, 0, 0);
  noStroke();
  noSmooth();
  fill(0, 0, 204, 255);
  beginShape();
  vertex(0, 0);
  vertex(0, 17);
  vertex(4, 13);
  vertex(29, 13);
  vertex(29, 0);
  endShape(CLOSE);
  strokeWeight(1);
  fill(255, 255, 255, 255);

  // draw the number 
  text("" + number, width / 2, 7);
  
  // save canvas as file
  temp_string = "000" + number;
  f_name = "marker" + temp_string.substring(temp_string.length - 3, temp_string.length);
  saveCanvas(f_name, "png");

  if (number == end_number) {
    // terminate production
    noLoop();
  }
  
  // next number
  number += 1;
}

Set the two variables declared at the beginning of the code to specify the start and end of the range of marker numbers needed, then run the script.

Below are some example markers:

marker001 marker016 marker144

The following html code will produce an example Leaflet map of New York City, with markers on it:

<!DOCTYPE html>
<html>
<!-- nycmap.html -->
<head>
<script>

let date_revised = "May 10, 2021";

let markers; // global
(function() {  
let places = {"type":"FeatureCollection","features":[

/*** vvv *** vvv *** vvv POINT FEATURES DATA BELOW vvv *** vvv *** vvv ***/
/*** vvv *** vvv *** vvv POINT FEATURES DATA BELOW vvv *** vvv *** vvv ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.878333, 40.863611]},
  
  "properties":{ // begin properties
    "name":         "New York Botanical Garden",
    "description":  "" +
                    "The New York Botanical Garden is a 250-acre botanical garden located at Bronx Park, " +
                    "in the Bronx, New York City." +
                    "",
    "links": [
        {url: "https://www.nybg.org/", label: "New York Botanical Garden"},
        {url: "https://en.wikipedia.org/wiki/New_York_Botanical_Garden", label: "Wikipedia: New York Botanical Garden"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.964052, 40.669125]},
  
  "properties":{ // begin properties
    "name":         "Brooklyn Botanic Garden",
    "description":  "" +
                    "Brooklyn Botanic Garden consists of 52 acres, holds over 14,000 taxa of plants, " +
                    "and receives nearly a million visitors each year." +
                    "",
    "links": [
        {url: "https://www.bbg.org/", label: "Brooklyn Botanic Garden"},
        {url: "https://en.wikipedia.org/wiki/Brooklyn_Botanic_Garden", label: "Wikipedia: Brooklyn Botanic Garden"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.877147, 40.849171]},
  
  "properties":{ // begin properties
    "name":         "Bronx Zoo",
    "description":  "" +
                    "The Bronx Zoo consists of 265 acres of park lands and naturalistic habitats with animals, " +
                    "and contains the Bronx River." +
                    "",
    "links": [
        {url: "https://bronxzoo.com/", label: "Bronx Zoo"},
        {url: "https://en.wikipedia.org/wiki/Bronx_Zoo", label: "Wikipedia: Bronx Zoo"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.9964, 40.7057]},
  
  "properties":{ // begin properties
    "name":         "Brooklyn Bridge",
    "description":  "" +
                    "The Brooklyn Bridge, which opened on May 24, 1883, is a hybrid cable-stayed/suspension bridge in New York City, " +
                    "spanning the East River between Manhattan Island and Brooklyn on Long Island." +
                    "",

    "links": [
        {url: "https://en.wikipedia.org/wiki/Brooklyn_Bridge", label: "Wikipedia: Brooklyn Bridge"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.955, 40.757]},
  
  "properties":{ // begin properties
    "name":         "Queensboro Bridge",
    "description":  "" +
                    "The Queensboro Bridge, completed in 1909, is a cantilever bridge over the East River in New York City." +
                    "",

    "links": [
        {url: "https://en.wikipedia.org/wiki/Queensboro_Bridge", label: "Wikipedia: Queensboro Bridge"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.965278, 40.782222]},
  
  "properties":{ // begin properties
    "name":         "Central Park",
    "description":  "" +
                    "This is a park in Manhattan, New York City." +
                    "",

    "links": [
        {url: "https://www.centralparknyc.org/", label: "Central Park Conservancy"},
        {url: "https://centralparkzoo.com/", label: "Central Park Zoo"},
        {url: "https://en.wikipedia.org/wiki/Central_Park", label: "Wikipedia: Central Park"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.982222, 40.753333]},
  
  "properties":{ // begin properties
    "name":         "New York Public Library",
    "description":  "" +
                    "The New York Public Library (NYPL) is a public library system in New York City " +
                    "with nearly 53 million items and 92 locations." +
                    "",

    "links": [
        {url: "https://www.nypl.org/", label:"New York Public Library"},
        {url: "https://en.wikipedia.org/wiki/New_York_Public_Library", label: "Wikipedia: New York Public Library"},
        {url: "https://en.wikipedia.org/wiki/New_York_Public_Library_Main_Branch", label: "Wikipedia: New York Public Library Main Branch"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.9525, 40.631111]},
  
  "properties":{ // begin properties
    "name":         "Brooklyn College",
    "description":  "" +
                    "Brooklyn College is a public college in Brooklyn, New York. " +
                    "It is part of the City University of New York." +
                    "",
    "links": [
        {url: "http://www.brooklyn.cuny.edu/", label: "Brooklyn College"},
        {url: "https://en.wikipedia.org/wiki/Brooklyn_College", label: "Wikipedia: Brooklyn College"},

    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.974722, 40.780556]},
  
  "properties":{ // begin properties
    "name":         "American Museum of Natural History",
    "description":  "" +
                    "The American Museum of Natural History (AMNH), located in New York City, " +
                    "is one of the largest natural history museums in the world." +
                    "",

    "links": [
        {url: "https://www.amnh.org/", label: "American Museum of Natural History"},
        {url: "https://en.wikipedia.org/wiki/American_Museum_of_Natural_History", label: "Wikipedia: American Museum of Natural History"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-74.041723, 40.699398]},
  
  "properties":{ // begin properties
    "name":         "Ellis Island",
    "description":  "" +
                    "Ellis Island is a federally owned island in New York Harbor " +
                    "that contains a museum and former immigration inspection station." +
                    "",

    "links": [
        {url: "https://www.nps.gov/elis/index.htm", label: "NPS: Ellis Island"},
        {url: "https://en.wikipedia.org/wiki/Ellis_Island", label: "Wikipedia: Ellis Island"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.9908, 40.7333]},
  
  "properties":{ // begin properties
    "name":         "Strand Book Store",
    "description":  "" +
                    "The Strand carries over 2.5 million used, new, and rare books, " +
                    "covering topics as far-ranging as occult to philosophy to finance." +
                    "",
    "links": [
        {url: "https://www.strandbooks.com/", label:"Strand Book Store"},
        {url: "https://en.wikipedia.org/wiki/Strand_Bookstore", label: "Wikipedia: Strand Bookstore"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** vvv begin point feature vvv ***/
{"type":"Feature","geometry":{
   // lat, lng, // elevation
  "type":"Point", "coordinates":[-73.9631, 40.7794]},
  
  "properties":{ // begin properties
    "name":         "Metropolitan Museum of Art",
    "description":  "" +
                    "The Metropolitan Museum of Art is the largest art museum in the United States." +
                    "",

    "links": [
        {url: "https://www.metmuseum.org/", label: "Metropolitan Museum of Art"},
        {url: "https://en.wikipedia.org/wiki/Metropolitan_Museum_of_Art", label: "Wikipedia: Metropolitan Museum of Art"},
    ],
  } // end properties
  
}, // note the comma
/*** ^^^ end point feature   ^^^ ***/

/*** ^^^ *** ^^^ *** ^^^ POINT FEATURES DATA ABOVE ^^^ *** ^^^ *** ^^^ ***/
/*** ^^^ *** ^^^ *** ^^^ POINT FEATURES DATA ABOVE ^^^ *** ^^^ *** ^^^ ***/
]};


  // Create a variable for the InfoWindow object.
  let infowindow;

  window.onload = function() {
    let map = L.map('map').setView([40.753333, -73.982222], 11);
    let listarea = document.getElementById('listarea');

	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

    
	let LeafIcon = L.Icon.extend({
		options: {
			iconSize:     [29, 17],
			iconAnchor:   [0, 16],
			popupAnchor:  [14, -17]
		}
	});
    markers = [];
    
    // Loop through the places array
    for (let i = 0; i < places.features.length; i++) {
      let props = places.features[i].properties;
      let coords = [places.features[i].geometry.coordinates[1], places.features[i].geometry.coordinates[0]]
      popup_contents = '';
      popup_contents += '<div id="info">';
      popup_contents += '<span class="name">' + props.name + '</span>';
      popup_contents += '<br /><br />' + props.description;
      
      for (link of props.links) {
          popup_contents += "<br />" + '<a href="' + link.url + '" target="_blank">' + link.label + '</a>';
      }
      popup_contents += '<br /><br /><a href="https://www.google.com/maps/@?api=1&map_action=map&center=' +
        coords[0] + ','+ coords[1] + '&zoom=17&basemap=satellite' + '" target="_blank">View on Google Map</a>'
      popup_contents += '</div>';
      number = i + 1;
      temp_string = "000" + number;
      f_name = "marker" + temp_string.substring(temp_string.length - 3, temp_string.length) + ".png";
      let iconImage = new LeafIcon({iconUrl: f_name});
      
      markers.push(L.marker(coords, {icon: iconImage}).bindPopup(popup_contents, {maxWidth: 480}).addTo(map));
      (function(i, name) {
        listarea.innerHTML += i + 1 + ") " + '<a href="javascript:void(0)" onclick="markers[' + i + '].openPopup()">' + name + '</a><br />';
      }) (i, props.name)
    }
    L.control.scale().addTo(map);
  };
})();
</script>

    <title>NYC Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<style>
  html, body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: #FFFFEE;
    color: #660000;
  }
  #map {
    width: 100%;
    height: 540px;
    border: 1px solid black;
  }
  #listarea {
    width: 100%;
    height: 540px;
    border: 1px solid black;
    overflow: auto;
  }
  #info {
    width: 400px;
    height: 240px;
  }
  .name {
    font-weight: bold;
  }
</style>

</head>

<body>
  <table width="100%">
    <tr>
    <td>
      <h2>NYC Map</h2>
    </td>
    <td>
      <span id="last_revised"></span>
    </td>

    </tr>
  </table>
  <table width="100%">
    <tr>

    <td width="64%"><div id="map"></div></td>
    <td width="36%"><div id="listarea"></div></td>
    </tr>
    </table>

  <script>
    document.getElementById("last_revised").innerHTML = "Revised " + date_revised;
  </script>
</body>
</html>

To open the example map:

  • First, run the p5.js script to create at least 12 markers, beginning with a marker with the number 1.
  • Save the markers in the same folder or directory as the html file for the Leaflet map.
  • Open the html file for the map in a browser.

Image capture of the example map:

NYC Map
NYC Map1060×836 338 KB

Advice is welcome regarding the code, the map, and the design of the markers. :smiley:

4 Likes