Simple Map Leaflet

Simple Leaflet Map.

This is a simple Leaflet map using a static GeoJSON file (BaseBallFinal.json) I use JQuery's getJSON function to read the file. I start with the basic map view and basemap, here I use osm (OpenStreetMap), define what the layer is going to look like, I chose circleMarker, and define the popup format and data. Last I read the GeoJSON file and add the data to the layer.

Now the code.

In the head section, I have the list of libraries I used, basically Leaflet, JQuery, and JQuery UI (User Interface), both the JavaScript and CSS files.

<!DOCTYPE html>
<html>
<head>
	<title>GeoJSON tutorial - Leaflet</title>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Now the CSS information. This only a map but here you define the height and width in pixals.

<style>
		#map {
			width: 800px;
			height: 600px;
		}
</style>

Define the div for the map.

Now the data, here I define the GeoJSON file. It's a static file instead of a web service (REST) feed. Since this data won't change this method saves on server processing.


</head>
<body>

<div id="map" >
</div> 

<script> 

var url = 'BaseBallFinal.json';  // my GeoJSON data source, in the same folder as my HTML file.

Now I need to define the base map.

The map is declared with the center and zoom level set for the US.

I'm using OpenStreetMap as the basemap, it's a very clean popular map.

  
	var map = L.map('map').setView([37.52715,-96.877441], 4); 

	var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
				attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});

Since I'm using circleMarkers, I have to define how they look. I create an object called geojsonMarkerOptions, inside it I define the options. Radius is the size, opacity is transparency, color is actually the outline, fillcolor is inside the marker, and fillOpacity is how transparent the interior fill is.

The forEachFeature function. The name should explain it all, basically you setup the popup format and the data fields it uses, this is formated with HTML tags, so color, size, bold, etc and all be set using HTML tags. Since my data had a website i created a href link too open the site.

The command layer.bindPopup(popupContent); tells the layer to use your predefined popup template.

	var  geojsonMarkerOptions = {
        'radius':6,
		'opacity': .5,
		'color': "red",
		'fillColor':  "blue",
		'fillOpacity': 0.8
	};

	function forEachFeature(feature, layer) {
	
			var popupContent = "<p>The <b>" +
					feature.properties.Team + "</b> play here,</br> They are in the " +
					feature.properties.League + "</br>" +
					'<a href="'+ feature.properties.Website +'" target="_blank">Website</a></p>' ;
							
			if (feature.properties && feature.properties.popupContent) {
				popupContent += feature.properties.popupContent;
			}
				layer.bindPopup(popupContent);
	};

Now I'm ready to define the layer. I'm calling it bbTeam and the null means not data source yet, however it should use the forEachFeature function for the onEachFeature option.

The pointToLayer is a function that converts the data to points, and for every feature retun a circleMarker at that location using the geojsonMarkerOption we setup earlier.

		
		
	 //var bbTeam = L.geoJSON(null, {onEachFeature: forEachFeature, style: style});
	  var bbTeam = L.geoJSON(null, {
			onEachFeature: forEachFeature, 
			pointToLayer: function (feature, latlng) {
				return L.circleMarker(latlng, geojsonMarkerOptions);
			}
	  });

Next using the JQuery getJSON function, read the data at the url location, pass it to the function as data, and add it to the layer. Finally add the layer to the map.


  	// Get GeoJSON data and create features.
    $.getJSON(url, function(data) {
  			bbTeam.addData(data);
	});
	
	bbTeam.addTo(map);

That is it, toss in some closing tags and I am done. My finished script, My GeoJSON data

</script> 
</body>
</html>