psychemedia/index.html

## index.html
<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script>L_PREFER_CANVAS = false; L_NO_TOUCH = false; L_DISABLE_3D = false;</script>
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster-src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.css" />
    <link rel="stylesheet" href="https://rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css" />
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

            <style> #map_000324dfdead42218c33e25a9c169a2a {
                position : relative;
                width : 100.0%;
                height: 100.0%;
                left: 0.0%;
                top: 0.0%;
                }
            </style>

</head>
<body>

            <div class="folium-map" id="map_000324dfdead42218c33e25a9c169a2a" ></div>

</body>
<script>


                var southWest = L.latLng(-90, -180);
                var northEast = L.latLng(90, 180);
                var bounds = L.latLngBounds(southWest, northEast);


            var map_000324dfdead42218c33e25a9c169a2a = L.map(
                                  'map_000324dfdead42218c33e25a9c169a2a',
                                  {center: [52.0236,-0.7088],
                                  zoom: 15,
                                  maxBounds: bounds,
                                  layers: [],
                                  worldCopyJump: false,
                                  crs: L.CRS.EPSG3857
                                 });


            var tile_layer_49f8a71bd7514b82bf72af72949ce443 = L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                {
                    maxZoom: 18,
                    minZoom: 1,
                    continuousWorld: false,
                    noWrap: false,
                    attribution: 'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
                    detectRetina: false
                    }
                ).addTo(map_000324dfdead42218c33e25a9c169a2a);


                function newMarker(e){
                    var new_mark = L.marker().setLatLng(e.latlng).addTo(map_000324dfdead42218c33e25a9c169a2a);
                    new_mark.dragging.enable();
                    new_mark.on('dblclick', function(e){ map_000324dfdead42218c33e25a9c169a2a.removeLayer(e.target)})
                    var lat = e.latlng.lat.toFixed(4),
                       lng = e.latlng.lng.toFixed(4);
                    new_mark.bindPopup("Latitude: " + lat + "<br>Longitude: " + lng );
                    };
                map_000324dfdead42218c33e25a9c169a2a.on('click', newMarker);


            var marker_c8be18e4efa041e6ad8699cc564b1dac = L.marker(
                [52.0239,-0.7072],
                {
                    icon: new L.Icon.Default()
                    }
                )
                .addTo(map_000324dfdead42218c33e25a9c169a2a);


            var popup_554f2f5015cc4a0da796333013c013fc = L.popup({maxWidth: '300'});


                var html_4b724bf811fa4b128303536ea0a2711b = $('<div id="html_4b724bf811fa4b128303536ea0a2711b" style="width: 100.0%; height: 100.0%;">OU Library</div>')[0];
                popup_554f2f5015cc4a0da796333013c013fc.setContent(html_4b724bf811fa4b128303536ea0a2711b);


            marker_c8be18e4efa041e6ad8699cc564b1dac.bindPopup(popup_554f2f5015cc4a0da796333013c013fc);


            var marker_e06942ec3e644304b7c501866cae1abe = L.marker(
                [52.0242,-0.7112],
                {
                    icon: new L.Icon.Default()
                    }
                )
                .addTo(map_000324dfdead42218c33e25a9c169a2a);


            var popup_77bc2ac75dad43dab1c8d672aafeaf81 = L.popup({maxWidth: '300'});


                var html_0b1729b1a13a4948b1945c4c9bd3f134 = $('<div id="html_0b1729b1a13a4948b1945c4c9bd3f134" style="width: 100.0%; height: 100.0%;">Jennie Lee Building</div>')[0];
                popup_77bc2ac75dad43dab1c8d672aafeaf81.setContent(html_0b1729b1a13a4948b1945c4c9bd3f134);


            marker_e06942ec3e644304b7c501866cae1abe.bindPopup(popup_77bc2ac75dad43dab1c8d672aafeaf81);


</script>

## simpleMapDemo.ipynb

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              simpleMapDemo.ipynb
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<script>L_PREFER_CANVAS = false; L_NO_TOUCH = false; L_DISABLE_3D = false;</script>
	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster-src.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.Default.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.css" />
	<link rel="stylesheet" href="https://rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css" />
	<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
	<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

	<style> #map_000324dfdead42218c33e25a9c169a2a {
	position : relative;
	width : 100.0%;
	height: 100.0%;
	left: 0.0%;
	top: 0.0%;
	}
	</style>

	</head>
	<body>

	<div class="folium-map" id="map_000324dfdead42218c33e25a9c169a2a" ></div>

	</body>
	<script>



	var southWest = L.latLng(-90, -180);
	var northEast = L.latLng(90, 180);
	var bounds = L.latLngBounds(southWest, northEast);


	var map_000324dfdead42218c33e25a9c169a2a = L.map(
	'map_000324dfdead42218c33e25a9c169a2a',
	{center: [52.0236,-0.7088],
	zoom: 15,
	maxBounds: bounds,
	layers: [],
	worldCopyJump: false,
	crs: L.CRS.EPSG3857
	});



	var tile_layer_49f8a71bd7514b82bf72af72949ce443 = L.tileLayer(
	'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	{
	maxZoom: 18,
	minZoom: 1,
	continuousWorld: false,
	noWrap: false,
	attribution: 'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
	detectRetina: false
	}
	).addTo(map_000324dfdead42218c33e25a9c169a2a);



	function newMarker(e){
	var new_mark = L.marker().setLatLng(e.latlng).addTo(map_000324dfdead42218c33e25a9c169a2a);
	new_mark.dragging.enable();
	new_mark.on('dblclick', function(e){ map_000324dfdead42218c33e25a9c169a2a.removeLayer(e.target)})
	var lat = e.latlng.lat.toFixed(4),
	lng = e.latlng.lng.toFixed(4);
	new_mark.bindPopup("Latitude: " + lat + "<br>Longitude: " + lng );
	};
	map_000324dfdead42218c33e25a9c169a2a.on('click', newMarker);



	var marker_c8be18e4efa041e6ad8699cc564b1dac = L.marker(
	[52.0239,-0.7072],
	{
	icon: new L.Icon.Default()
	}
	)
	.addTo(map_000324dfdead42218c33e25a9c169a2a);


	var popup_554f2f5015cc4a0da796333013c013fc = L.popup({maxWidth: '300'});


	var html_4b724bf811fa4b128303536ea0a2711b = $('<div id="html_4b724bf811fa4b128303536ea0a2711b" style="width: 100.0%; height: 100.0%;">OU Library</div>')[0];
	popup_554f2f5015cc4a0da796333013c013fc.setContent(html_4b724bf811fa4b128303536ea0a2711b);


	marker_c8be18e4efa041e6ad8699cc564b1dac.bindPopup(popup_554f2f5015cc4a0da796333013c013fc);





	var marker_e06942ec3e644304b7c501866cae1abe = L.marker(
	[52.0242,-0.7112],
	{
	icon: new L.Icon.Default()
	}
	)
	.addTo(map_000324dfdead42218c33e25a9c169a2a);


	var popup_77bc2ac75dad43dab1c8d672aafeaf81 = L.popup({maxWidth: '300'});


	var html_0b1729b1a13a4948b1945c4c9bd3f134 = $('<div id="html_0b1729b1a13a4948b1945c4c9bd3f134" style="width: 100.0%; height: 100.0%;">Jennie Lee Building</div>')[0];
	popup_77bc2ac75dad43dab1c8d672aafeaf81.setContent(html_0b1729b1a13a4948b1945c4c9bd3f134);


	marker_e06942ec3e644304b7c501866cae1abe.bindPopup(popup_77bc2ac75dad43dab1c8d672aafeaf81);



	</script>