wrobstory/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A custom Mapbox map generated by Folium. One fixed marker, one fixed circle marker. Click on the map to place a new marker, click the marker to see Lat/Lng, double-click the marker to remove it. This map was generated with the following Python code:
import folium

#Custom Mapbox Tiles
tileset = r'http://a.tiles.mapbox.com/v3/[...]/{z}/{x}/{y}.png'
attribution = (r'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
                ' contributors, Imagery © <a href="http://mapbox.com">MapBox</a>')
#Create Map
mapbox = folium.Map(location=[45.5236, -122.6750], tiles=tileset, zoom_start=13,
                    attr=attribution)
#Add a simple marker and a circle
mapbox.simple_marker(location=[45.5244, -122.6699], popup_txt='The Waterfront')
mapbox.circle_marker(location=[45.5215, -122.6261], radius=300, 
                     popup_txt='Laurelhurst Park', line_color='#9cc6a5',
                     fill_color='#9cc6a5')
#Enable marker placement
mapbox.click_for_marker()
mapbox.create_map(path='index.html')

  
## folium_popups.py
import folium

#Custom Mapbox Tiles
tileset = r'http://a.tiles.mapbox.com/v3/[...]/{z}/{x}/{y}.png'
attribution = (r'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
                ' contributors, Imagery © <a href="http://mapbox.com">MapBox</a>')
#Create Map
mapbox = folium.Map(location=[45.5236, -122.6750], tiles=tileset, zoom_start=13,
                    attr=attribution)
#Add a simple marker and a circle
mapbox.simple_marker(location=[45.5244, -122.6699], popup_txt='The Waterfront')
mapbox.circle_marker(location=[45.5215, -122.6261], radius=300,
                     popup_txt='Laurelhurst Park', line_color='#9cc6a5',
                     fill_color='#9cc6a5')
#Enable marker placement
mapbox.click_for_marker()
mapbox.create_map(path='index.html')

## index.html
<!DOCTYPE html>
<head>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
   <!--[if lte IE 8]>
       <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
   <![endif]-->

<style>

#map {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
}

</style>
</head>
<body>

        <div id="map" style="width: 960px; height: 500px"></div>

        <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

<script>

var map = L.map('map').setView([45.5236, -122.675], 13);

L.tileLayer('http://a.tiles.mapbox.com/v3/wrobstory.map-dgc3tq1r/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery © <a href="http://mapbox.com">MapBox</a>'
}).addTo(map);


var marker_1 = L.marker([45.5244, -122.6699]).addTo(map);
marker_1.bindPopup("The Waterfront");

var circle_1 = L.circle([45.5215, -122.6261], 300, {
                            color: '#9cc6a5',
                            fillColor: '#9cc6a5',
                            fillOpacity: 0.6
                            }).addTo(map);
circle_1.bindPopup("Laurelhurst Park");


function newMarker(e){
    var new_mark = L.marker().setLatLng(e.latlng).addTo(map);
    new_mark.dragging.enable();
    new_mark.on('dblclick', function(e){map.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.on('click', newMarker)

</script>

</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	import folium

	#Custom Mapbox Tiles
	tileset = r'http://a.tiles.mapbox.com/v3/[...]/{z}/{x}/{y}.png'
	attribution = (r'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
	' contributors, Imagery © <a href="http://mapbox.com">MapBox</a>')
	#Create Map
	mapbox = folium.Map(location=[45.5236, -122.6750], tiles=tileset, zoom_start=13,
	attr=attribution)
	#Add a simple marker and a circle
	mapbox.simple_marker(location=[45.5244, -122.6699], popup_txt='The Waterfront')
	mapbox.circle_marker(location=[45.5215, -122.6261], radius=300,
	popup_txt='Laurelhurst Park', line_color='#9cc6a5',
	fill_color='#9cc6a5')
	#Enable marker placement
	mapbox.click_for_marker()
	mapbox.create_map(path='index.html')
	<!DOCTYPE html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
	<![endif]-->

	<style>

	#map {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	}

	</style>
	</head>
	<body>

	<div id="map" style="width: 960px; height: 500px"></div>

	<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

	<script>

	var map = L.map('map').setView([45.5236, -122.675], 13);

	L.tileLayer('http://a.tiles.mapbox.com/v3/wrobstory.map-dgc3tq1r/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery © <a href="http://mapbox.com">MapBox</a>'
	}).addTo(map);


	var marker_1 = L.marker([45.5244, -122.6699]).addTo(map);
	marker_1.bindPopup("The Waterfront");

	var circle_1 = L.circle([45.5215, -122.6261], 300, {
	color: '#9cc6a5',
	fillColor: '#9cc6a5',
	fillOpacity: 0.6
	}).addTo(map);
	circle_1.bindPopup("Laurelhurst Park");




	function newMarker(e){
	var new_mark = L.marker().setLatLng(e.latlng).addTo(map);
	new_mark.dragging.enable();
	new_mark.on('dblclick', function(e){map.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.on('click', newMarker)

	</script>

	</body>