okjodom/saurus.html

## saurus.html
<!-- guess why I called this saurus, the eye -->
<!DOCTYPE html>
<html>
	<head>
		<title>
			Happy Map
		</title>
		<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
    <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>

		<style type="text/css">
			#mapid {
				height: 100vh;
				width: 98vw;
        padding: 0;
        margin: 0;
			}
      /*.custom .leaflet-popup-tip,*/
      .custom .leaflet-popup-content-wrapper {
        min-height: 100px;
      }
      .custom .leaflet-popup-content{
        font-size: 20px;
      }
		</style>

    <!-- jquery test -->
    <script>
      $(document).ready(function(){
        var mymap = L.map('mapid').setView([ -1.281733, 36.814979 ], 17);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: '',
        accessToken: '' //get an id and token from mapbox
        }).addTo(mymap);

        //id and token are things which look like
        // id = jodom.pb0nfifa
        // accessToken = pk.eyJ1Ijoiam9kb20iLCJhIjoiY2lsZGJDVKWhoMDAyc3c4bHo4ZGFlYmZudSJ9.DwhiEpJa1iouJ13m6IKmcg
        // these commented ones wont work, i messed with them and made sure to test after

        // by all means i got style
        var myStyle = {
          radius: 8,
          fillColor: "#f44295",
          color: "red",
          weight: 1,
          opacity: 1,
          fillOpacity: 1
        };
        var popUpStyle = {
          'className' : 'custom'
        };
        // pop-up binder
        function onEachFeature(feature, layer){
          var popUpContent = '<img src="./res/tbb.png" alt="Tweet:" width="25px" heigh="25px"/> @' + feature.properties.user +  '<br/>' + "  " + feature.properties.text;
          // check if feature has text
          if (feature.properties && feature.properties.text){
            layer.bindPopup(popUpContent, popUpStyle)
          }
        }

        // load GeoJSON from an external file
        $.getJSON("http://localhost:8000/sample_data.geojson", function(data){

          var geojson = L.geoJSON(data, {
            onEachFeature: onEachFeature,
            pointToLayer: function(feature, latlng){
              return L.circleMarker(latlng, myStyle)
            }
          });
          geojson.addTo(mymap)
        });
      });
    </script>

	</head>

	<body>

		<div id="mapid"></div>

	</body>

</html>
	<!-- guess why I called this saurus, the eye -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	Happy Map
	</title>
	<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
	<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>

	<style type="text/css">
	#mapid {
	height: 100vh;
	width: 98vw;
	padding: 0;
	margin: 0;
	}
	/.custom .leaflet-popup-tip,/
	.custom .leaflet-popup-content-wrapper {
	min-height: 100px;
	}
	.custom .leaflet-popup-content{
	font-size: 20px;
	}
	</style>

	<!-- jquery test -->
	<script>
	$(document).ready(function(){
	var mymap = L.map('mapid').setView([ -1.281733, 36.814979 ], 17);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
	maxZoom: 18,
	id: '',
	accessToken: '' //get an id and token from mapbox
	}).addTo(mymap);

	//id and token are things which look like
	// id = jodom.pb0nfifa
	// accessToken = pk.eyJ1Ijoiam9kb20iLCJhIjoiY2lsZGJDVKWhoMDAyc3c4bHo4ZGFlYmZudSJ9.DwhiEpJa1iouJ13m6IKmcg
	// these commented ones wont work, i messed with them and made sure to test after

	// by all means i got style
	var myStyle = {
	radius: 8,
	fillColor: "#f44295",
	color: "red",
	weight: 1,
	opacity: 1,
	fillOpacity: 1
	};
	var popUpStyle = {
	'className' : 'custom'
	};
	// pop-up binder
	function onEachFeature(feature, layer){
	var popUpContent = '<img src="./res/tbb.png" alt="Tweet:" width="25px" heigh="25px"/> @' + feature.properties.user + '<br/>' + " " + feature.properties.text;
	// check if feature has text
	if (feature.properties && feature.properties.text){
	layer.bindPopup(popUpContent, popUpStyle)
	}
	}

	// load GeoJSON from an external file
	$.getJSON("http://localhost:8000/sample_data.geojson", function(data){

	var geojson = L.geoJSON(data, {
	onEachFeature: onEachFeature,
	pointToLayer: function(feature, latlng){
	return L.circleMarker(latlng, myStyle)
	}
	});
	geojson.addTo(mymap)
	});
	});
	</script>

	</head>

	<body>

	<div id="mapid"></div>

	</body>

	</html>