More and more often, websites are using maps to display location data to their users. Most of the time, I see sites using Google Maps and occasionally you will see them use Mapquest or Bing Maps. These are the sites people are most familiar with so web development teams often have to go through the process of purchasing an API from one of these companies, installing the API, learning the API, and making sure the license keys are provided to developers, testers, and administrators. You have to make sure you re-purchase the license periodically and hope that they do not decide to increase the charge so much that it breaks your product’s budget. These third-party components also make your application builds more complex, likely to have errors, and limit your flexibility. Many developers have found out that a third-party component no longer works when you try to release new programming language versions or server infrastructure. Don’t you wish you could avoid all of that?
You can with a very simple to use, open-source JavaScript library named Leaflet (https://leafletjs.com). The Leaflet library can be used to display interactive maps from several sources but most commonly uses the OpenStreetMap map data (https://www.openstreetmap.org). I have found the quality of these maps to be great in the places I have tested. You can draw markers and shapes on the map easily, create pop-ups for each item you draw, and animate movements across the map.
The documentation for Leaflet is pretty good and I found several examples online that show how to do one small part of the code for a page but no good tutorials that show a complete working solution. I have written several articles to fill that need.
For a beginner’s tutorial, start with my first article.
To jump straight to an example that has lots of functionality already built, see Leaflet_part7_rest_GeoJSON.htm or for several examples see Leaflet_part7_rest_GeoJSON_more.htm.
I also created some other articles each with example files that show step-by-step how you can start with a list of markers and/or polygons, draw each one, give each polygon specified color, display data when a marker or polygon is clicked, create a clickable index of the mapped objects, and more. I have them available for download at https://github.com/MattGingery/LeafletExamples/ or for displaying at https://mattgingery.github.io/LeafletExamples/ and https://jsfiddle.net/user/mgingery/fiddles/ (the code on JSFiddle is slightly different since JSFiddle sometimes displays differently than a stand-alone HTM file).
I used ECMAScript 5 Javascript in these examples so that this code would work in all Browsers including I.E.
For more information about me, visit my LinkedIn page.