wboykinm/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Point in Polygon</title>

  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.css' rel='stylesheet' />

  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
#state {
    position:absolute;
    top:10px;
    right:10px;
    background:#fff;
    font-size:30px;
    padding:10px;
    z-index:999;
}
</style>

<!--
  This example requires leaflet-pip, which you can get on GitHub:
  https://github.com/tmcw/leaflet-pip
  and jQuery to load the file with AJAX. You can use another tool for AJAX.

  This pulls the file airports.csv, converts into into GeoJSON by autodetecting
  the latitude and longitude columns, and adds it to the map.

  Another CSV that you use will also need to contain latitude and longitude
  columns, and they must be similarly named.
-->

<script src='https://www.mapbox.com/mapbox.js/assets/leaflet-pip.js'></script>
<div id='map'></div>
<div id='state'></div>
<script>
var map = L.mapbox.map('map', baselayer)
    .setView([38, -102.0], 5);
var baselayer = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
    maxZoom: 17,
      attribution: "<a href='https://maps.stamen.com' target='_blank'>Stamen<\/a>",
    }).addTo(map);

$.ajax({
    url: 'map.geojson',
    dataType: 'json',
    success: function load(d) {
        var states = L.geoJson(d).addTo(map);
        L.marker([38, -102], {
            icon: L.mapbox.marker.icon({
                'marker-color': '#f22',
                'marker-size': 'large',
                'marker-symbol': 'circle-stroked'
            }),
            draggable: true
        }).addTo(map)
        .on('dragend', function(e) {
            var layer = leafletPip.pointInLayer(this.getLatLng(), states, true);
            document.getElementById('state').innerHTML = layer.length ?
                layer[0].feature.properties.name : '';
        });
    }
});
</script>
</body>
</html>

## map.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              map.geojson
            
          
      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>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Point in Polygon</title>

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.4.2/mapbox.css' rel='stylesheet' />

	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	#state {
	position:absolute;
	top:10px;
	right:10px;
	background:#fff;
	font-size:30px;
	padding:10px;
	z-index:999;
	}
	</style>

	<!--
	This example requires leaflet-pip, which you can get on GitHub:
	https://github.com/tmcw/leaflet-pip
	and jQuery to load the file with AJAX. You can use another tool for AJAX.

	This pulls the file airports.csv, converts into into GeoJSON by autodetecting
	the latitude and longitude columns, and adds it to the map.

	Another CSV that you use will also need to contain latitude and longitude
	columns, and they must be similarly named.
	-->

	<script src='https://www.mapbox.com/mapbox.js/assets/leaflet-pip.js'></script>
	<div id='map'></div>
	<div id='state'></div>
	<script>
	var map = L.mapbox.map('map', baselayer)
	.setView([38, -102.0], 5);
	var baselayer = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	maxZoom: 17,
	attribution: "<a href='https://maps.stamen.com' target='_blank'>Stamen<\/a>",
	}).addTo(map);

	$.ajax({
	url: 'map.geojson',
	dataType: 'json',
	success: function load(d) {
	var states = L.geoJson(d).addTo(map);
	L.marker([38, -102], {
	icon: L.mapbox.marker.icon({
	'marker-color': '#f22',
	'marker-size': 'large',
	'marker-symbol': 'circle-stroked'
	}),
	draggable: true
	}).addTo(map)
	.on('dragend', function(e) {
	var layer = leafletPip.pointInLayer(this.getLatLng(), states, true);
	document.getElementById('state').innerHTML = layer.length ?
	layer[0].feature.properties.name : '';
	});
	}
	});
	</script>
	</body>
	</html>