NOTES
on
MAKING CRIME MAPS
from Daily Press 2016 Mar 30
or
alternative AmazonAWS.com link
(These links may not work eventually.)
NOTES |
from Daily Press 2016 Mar 30 or alternative AmazonAWS.com link (These links may not work eventually.) |
Sections of this page :
INTRO
GEOCODE (street-address to longitude-latitude)
OSM (Open Street Map)
MARKERS-on-maps
Google Maps
|
INTRODUCTION: The information and web links below are intended to help make crime maps for purposes described on a Lethal Crimes Menu page. The idea of these 'Lethal Crimes' pages are to use an 'open source' maps facility like Open Street Map to make the background of the maps. When crimes are reported in newspapers, there is usually a description of the location of the crime --- a street address or an intersection of two streets in a city. In order to put markers ('pins') on a map of the metropolitan area, we need the longitude and latitude coordinates of the location. This conversion of city and street location information to longitude-latitude coordinates is often referred to as Geocoding. After getting the longitude-latitude coordinates (in decimal form rather than degrees-minutes-seconds form), the mapping task then becomes an issue of how to put 'pin' images on the map of the metropolitan area. The links (and 'code snippets') below are intended to help with making maps with markers on them. LINKS TO GEOCODING WEB PAGES (to convert street-location to lat-lon coords) When one has city-and-street location information, one can use one of the following web sites to get the longitude-latitude coordinates of the location (in decimal format). I may eventually put these links in order according to the ones I prefer to use (and I may add or remove some) --- but, for now, they are in no particular order. Open Street Map (OSM) INFO : (including 'code snippets') A general description of 'Open Street Map' (OSM) is available at Wikipedia. The Open Street Maps home page is at openstreetmap.org. A description of the 'tiles' used to make 'slippy maps' with Open Street Map is at an OSM slippy map tilenames page. This page gives info on 'Slippy Map' tile names (at the OSM server). The names are of the form 'z/x/y.png' where 'z' is a zoom-level (between 0 and 18) and 'x' is an integer corresponding to a longitudinal (east-west) location and 'y' is an integer corresponding to a latitudinal (north-south) location. An Open Street Map query on 'newport news virginia' (in the Search field on the home page of openstreetmap.org) returns a URL like the following: |
https://www.openstreetmap.org/search?query=newport news virginia#map=10/37.0758/-76.5039
|
where 10 is a 'zoom-level' (from the range 0 to 18) and 37.0758 is a northern latitude (with the equator at zero latitude) and -76.5039 is a western longitude (west of Greenwich England which is at zero longitude). To show a 'slippy map' of the Newport News area (at zoom-level 10), one can use the following URL: |
https://www.openstreetmap.org/#map=10/37.0758/-76.5039
|
Click here to display that map in a separate tab or window. To show a 'slippy map' of the Newport News area (at zoom-level 10) WITH A (single) MARKER, one can use the following URL: |
https://www.openstreetmap.org/?mlat=37.1258&mlon=-76.4992#map=10/37.1258/-76.4992
|
Click here to display that map WITH A (centered) MARKER in a separate tab or window. To specify a 'bounding box' in which to display the Newport News area, you can use a URL like the following (using 'minlon', 'maxlon', 'minlat', 'maxlat' keywords): |
https://www.openstreetmap.org/?minlon=-75.5&maxlon=-76.5&minlat=36.5&maxlat=37.5
|
Note that this URL does not use a zoom-level specification. Click here to display that bounding-box map in a separate tab or window. To add a single marker to the 'bounding box', you can use the 'mlon' and 'mlat' keywords in a URL like the following: |
https://www.openstreetmap.org/?minlon=-75.5&maxlon=-76.5&minlat=36.5&maxlat=37.5&mlon=-76.0&mlat=37.0
|
Click here to display that map-with-marker in a separate tab or window. For MORE examples of OSM URLs, see the link at: wiki.openstreetmap.org/wiki/Browsing#Other_URL_tricks. Unfortunately, Open Street Map does not (in 2018) provide a simple way to add multiple markers to a map. To do that, most people use a Javascript library like Leaflet (Wikipedia link) --- or the somewhat more complex library Open Layers (Wikipedia link) --- to put multiple markers on a map (from Open Street Map or Google Maps or Mapquest or other map servers). See the following section for sources of information on adding multiple markers to a map. INFO ON HOW TO MAKE MAPS WITH MULTIPLE MARKERS : There is a response to the question 'how-can-i-display-a-map-with-multiple-markers' at help.openstreetmap.org/questions/. It turns out that Harry Wood of the UK has several HTML-Javascript examples of adding multiple markers to maps --- using either 'Open Layers' or 'Leaflet':
In case the above links go dead, here are copies of those 3 example HTML files: And here is a copy of an example HTML-Javascript file that uses 'Google Maps' and a Javascript array to make a map with multiple markers: This example came from a stackoverlow.com page. Alternatively, see the HTML-Javascript code at coderwall.com. To use 'OpenLayers', you can download an 'OpenLayers.js' Javascript file to use with your HTML pages and image files. (This might be safer than accessing a remote file that might change and no longer be compatible with your HTML-Javascript code.) The Harry Wood OpenLayers markers-array example above uses the following OpenLayers functions to create 'new' objects.
To use 'Leaflet', you can download 'leaflet.css' and 'leaflet.js' files to use with your HTML pages and image files. WARNING: Around 2016, the History section of the Wikipedia page on Leaflet indicated that Leaflet may not be developed/maintained after 2016. HOWEVER, Leaflet seems to be used by many web sites, including OpenStreetMap itself, as well as the Washington Post, the Wall Street Journal, Craigs List, and other 'major players'. There is a map-with-markers example at dev.openlayers.org/examples/markers.html. It uses marker location(lat,lon)-and-label data in a separate 'textfile.txt' text file. See the Harry Wood examples above for putting the 'lonLat' data in an array in the Javascript code. That may be a better way to go --- keeping most of the map and marker data in one file --- an HTML file. You can use your web browser to look at the source code in that 'markers.html' file --- and you can save it to your local computer as an example. In fact, that 'markers.html' file references an 'OpenLayers.js' file, and here is a copy of that file as it existed on 9 May 2018 (version 2.14? ; copyright 2006-2015):
You can do a web search for more sites with code for map making with 'OpenLayers' using a
You can do a web search for more sites with code for map making with 'Leaflet' using a
Note that for some purposes, it may be better/safer/whatever to make a large PNG, JPEG or GIF image of the desired map and use an image editor to put markers on the image file at the appropriate street locations. (With this method, you do not have to keep your HTML-Javascript code working through various releases of OpenLayers.) The following two Tcl-Tk scripts can be helpful in making such an image file.
MARKER ICONS: Some sites that offer various marker icons (small image files) are
There are 'crime-themed markers' at You can do a web search for more sites with marker icons using a
INTERACTIVE MAPS-WITH-MARKERS MAKING-SITES: Here are some sites that offer a way to make a map interactively at their web site --- but if you have a lot of markers to add, you will probably have to pay for the service.
You can do a web search for more sites with interactive map making capability using a
GOOGLE MAPS INFO : I prefer to use 'Open Street Map' rather than 'Google Maps', because Google tends to be more intrusive into your privacy and seems to try to 'monetize' every little service they offer. You need to 'register' with Google to get an API (Application Programming Interface) 'key' to use in your HTML-Javascript code to make maps. This seems too 'intrusive' (and unnecessary) to me. But some people might find that there are features --- like 'satellite image' maps --- that are available via Google Maps and (perhaps) not (so much) by 'open source' methods. So following is some Google Maps info. Here is a sample Google Maps URL for creating a satellite image of the NewportNews-Hampton-Virginia (Peninsula) area. |
https://www.google.com/maps/@37.0751201,-76.3775087,11z/data=!3m1!1e3
|
Click here to show the satellite image in a separate tab or window. Here is a sample Google Maps URL for creating a 'drawn' map image of the NewportNews-Hampton-Virginia (Peninsula) area. |
https://www.google.com/maps/@37.0751201,-76.3775087,11z
|
Click here to show the 'drawn' map image in a separate tab or window. You can do a web search for Google Maps code for making a map with at least one marker on it, by using a
Here are some miscellaneous links to info on CODING to make maps-with-markers. Many of these use Google Maps.
|
|
Bottom of this To return to a previously visited web page location, click on the Back button of your web browser, a sufficient number of times. OR, use the History-list option of your web browser. OR, ....
< Go to Top of Page, above. >
|