Google recently announced a change in their Maps API usage quota that will inevitably move some current users from the previously free tier into a paid tier. I thought this might perhaps drive more developers to switch from Google Maps to OpenStreetMap if only for budget reasons, so hopefully the following guide would help get things started.<\/p>\n
OpenStreetMap implementation is actually just as simple as Google Maps, especially when coupled with Javascript libraries focused on building maps. In the following example, I used Leaflet<\/a>. As far as tiles are concerned, I used tiles by Stamen<\/a>. While I personally like Stamen’s tiles a lot, there are many tiles available across the web with different styles, and some might fit your particular niche or style better; check out this link<\/a> for a few others. Finally, for the data, I used some data from Lava’s WW2DB<\/a> project.<\/p>\n To get things started, I created a div that will eventually contain the map. Then, I linked to the .css stylesheet and the .js package files:<\/p>\n Then, a snippet of PHP code fetched necessary data from the WW2DB backend database, and used the data to build a Javascript array. The resulting Javascript array that I built looked something like this:<\/p>\n Now comes the main part. You will see that it is not too complex, even if have little experience with Google Maps, OpenStreetMap, or Leaflet.<\/p>\n Here's an example I implemented for showing WW2-era facilities found on the island of Taiwan:<\/p>\n\r\n<div id=\"mapdiv\" style=\"width: 400px; height: 400px;\"><\/div>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.3.1\/dist\/leaflet.css\" integrity=\"sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==\" crossorigin=\"\"\/>\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.3.1\/dist\/leaflet.js\" integrity=\"sha512-\/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==\" crossorigin=\"\"><\/script>\r\n<\/pre>\n
\r\nvar rawDataArray = [\r\n\t{ \"name\": \"This is marker #1\", \"lat\": \"10\", \"lng\": \"10\" },\r\n\t{ \"name\": \"This is marker #2\", \"lat\": \"20\", \"lng\": \"20\" },\r\n\t{ \"name\": \"This is marker #3\", \"lat\": \"30\", \"lng\": \"30\" },\r\n\t...\r\n];\r\n<\/pre>\n\r\n\/\/ Initialize the map (parameters: initial latitude, initial longitude, zoom level)\r\nvar mymap = L.map('mapdiv').setView([0, 0], 13);\r\n\r\n\/\/ Specify tiles\r\nL.tileLayer('https:\/\/stamen-tiles-{s}.a.ssl.fastly.net\/terrain\/{z}\/{x}\/{y}.{ext}', {\r\n\tattribution: 'Tiles <a href=\"http:\/\/stamen.com\">Stamen Design<\/a>, <a href=\"http:\/\/creativecommons.org\/licenses\/by\/3.0\">CC BY 3.0<\/a> — Data <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>',\r\n\tsubdomains: 'abcd',\r\n\tminZoom: 0,\r\n\tmaxZoom: 18,\r\n\text: 'png'\r\n}).addTo(mymap);\r\n\r\n\/\/ Loops through the raw data, place a point on the map, and build an array of the points\r\nvar circleArray = [];\r\nfor (var i = 0; i < rawDataArray.length; i++) {\r\n\tvar rawData = rawDataArray[i];\r\n\tcircle = new L.circle([rawData[\"lat\"], rawData[\"lng\"]], {\r\n\t\tcolor: 'red',\r\n\t\tfillColor: '#f03',\r\n\t\tfillOpacity: 0.5,\r\n\t\tradius: 50\r\n\t}).addTo(mymap).bindPopup(L.popup({maxHeight:200}).setContent(rawData[\"name\"]));\r\n\tcircleArray.push(circle);\r\n}\r\n\r\n\/\/ Adjust the map view based on the array of points, so the map won't appear to be zoomed overly in or out\r\nvar group = new L.featureGroup(circleArray);\r\nmymap.fitBounds(group.getBounds());\r\n<\/pre>\n