maptastik/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery Geo-KY Map</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="map"></div>

  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="http://code.jquerygeo.com/jquery.geo-1.0.0-rc1.min.js"></script>
  <script src="map.js"></script>
</body>
</html>

## kyCounties.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              kyCounties.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.
      
    
## map.js
// request GeoJSON feature data
var counties = $.ajax({
   url: "kyCounties.geojson",
   dataType: "json",
   success: function (result){
     return result;
   },
   error: function (xhr) {
     alert(xhr.statusText)
   }
 });

 // once the county data is retrieved, we can start making a map!
$.when(counties).done(function(){
  // set up the map
  var map = $("#map").geomap({
    center: [-85.632935, 37.857507],
    zoom: 7,
    services: [{
      id: "toner",
      type: "tiled",
      src:"http://a.basemaps.cartocdn.com/light_all/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png"
    }]
  });

  // parse the responseText property from the feature data request as JSON
  counties = JSON.parse(counties.responseText);
  // add and style the feature data
  map.geomap("append", counties, {
    fill: "#2196F3",
    fillOpacity: 0.75,
    stroke: "#212121",
    strokeOpacity: 1,
    strokeWidth: 1
  });
});

## style.css
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>jQuery Geo-KY Map</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="map"></div>

	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="http://code.jquerygeo.com/jquery.geo-1.0.0-rc1.min.js"></script>
	<script src="map.js"></script>
	</body>
	</html>
	// request GeoJSON feature data
	var counties = $.ajax({
	url: "kyCounties.geojson",
	dataType: "json",
	success: function (result){
	return result;
	},
	error: function (xhr) {
	alert(xhr.statusText)
	}
	});

	// once the county data is retrieved, we can start making a map!
	$.when(counties).done(function(){
	// set up the map
	var map = $("#map").geomap({
	center: [-85.632935, 37.857507],
	zoom: 7,
	services: [{
	id: "toner",
	type: "tiled",
	src:"http://a.basemaps.cartocdn.com/light_all/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png"
	}]
	});

	// parse the responseText property from the feature data request as JSON
	counties = JSON.parse(counties.responseText);
	// add and style the feature data
	map.geomap("append", counties, {
	fill: "#2196F3",
	fillOpacity: 0.75,
	stroke: "#212121",
	strokeOpacity: 1,
	strokeWidth: 1
	});
	});
	body {
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}