calvinmetcalf/README.md

## README.md

      
    Raw
  

              README.md
            
          
    large geojson dataset mapped using geojquery, in chrome, but weirdly enough, not in IE9 the overlay doesn't quite keep up with the map when it pans.

  
## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8'/>
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;font-family: Verdana,Arial,sans-serif;font-size: .9em; }
      #map{ height: 100% }
    </style>
   <title>Title</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

## script.js
$(function() {
    var m = $("#map").geomap({
        center: [-71.0595678, 42.3604823],
        zoom: 8,
        services: [ {
            id: "osm-string-src",
            type: "tiled",
            src: function (view) {
                return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/"+ view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
            },
        attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"} ]
      });
    $.get("http://oa-otp.rhcloud.com/oag.jsonp",function(data){
        m.geomap("append",data);
    },"JSONP");
});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset='utf-8'/>
	<style>
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0;font-family: Verdana,Arial,sans-serif;font-size: .9em; }
	#map{ height: 100% }
	</style>
	<title>Title</title>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</body>
	</html>
	$(function() {
	var m = $("#map").geomap({
	center: [-71.0595678, 42.3604823],
	zoom: 8,
	services: [ {
	id: "osm-string-src",
	type: "tiled",
	src: function (view) {
	return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/"+ view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
	},
	attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"} ]
	});
	$.get("http://oa-otp.rhcloud.com/oag.jsonp",function(data){
	m.geomap("append",data);
	},"JSONP");
	});