A step-by-step guide to build a store locator map https://www.mapbox.com/foundations/building-a-store-locator/
A Pen by weedkiller on CodePen.
border: no |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<title>Treemap - Neat Zoom Effect</title> | |
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/browserdetect/browserdetect.js"></script> | |
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/d3/d3.js"></script> | |
<style type="text/css"> | |
body { | |
overflow: hidden; |
#!/usr/bin/php | |
<?php | |
error_reporting(E_ALL); | |
if (count($argv) <= 1) { | |
print("usage: createMockup source_dir dest_dir images_dir\n"); | |
print("\tsource_dir: the directory containing all bmml file to convert\n"); | |
print("\tdest_dir: the directory where all html files will be written to\n"); | |
print("\timages_dir: a directory containing the exported PNGs of all .bmml files in source_dir (will be copied to dest_dir/images)\n"); | |
exit(1); | |
} |
<div id="map"></div> |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,480' rel='stylesheet' type='text/css'> | |
<script src="https://code.jquery.com/jquery.min.js"></script> | |
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
<script src="https://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script> | |
<p>Some of my Garmin Connect running data turned into a heatmap using Leaflet.js.</p> | |
<div id="mymap" style="width:520px;height:400px;"></div> |
A step-by-step guide to build a store locator map https://www.mapbox.com/foundations/building-a-store-locator/
A Pen by weedkiller on CodePen.
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<script>var OSMBuildings=function(){function wa(a,b){var c=a.x-b.x,d=a.y-b.y;return c*c+d*d}function Sa(a){for(var b=Infinity,c=-Infinity,d=Infinity,e=-Infinity,f=0,h=a.length-3;f<h;f+=2)b=T(b,a[f]),c=O(c,a[f]),d=T(d,a[f+1]),e=O(e,a[f+1]);return{x:b+(c-b)/2<<0,y:d+(e-d)/2<<0}}function Z(a,b){var c={};a/=U;b/=U;c[Ta]=0>=b?90:1<=b?-90:xa*(2*Ua(Va(A*(1-2*b)))-P);c[Wa]=360*(1===a?1:(a%1+1)%1)-180;return c}function ya(a,b,c){function d(a){if("XDomainRequest"in B&&a!==e.readyState&&(e.readyState=a,e.onreadystatechange))e.onreadystatechange()} | |
a=a.replace(/\{ *([\w_]+) *\}/g,function(a,c){return b[c]||a});var e="XDomainRequest"in B?new XDomainRequest:new XMLHttpRequest;e.onerror=function(){e.status=500;e.statusText="Error";d(4)};e.ontimeout=function(){e.status=408;e.statusText="Timeout";d(4)};e.onprogress=function(){d(3)};e.onload=function(){e.status=200;e.st |
.container | |
.map | |
.map__inner#map | |
.sidebar | |
h1 Location History | |
.timeline#timeline |
<div class="buttons"> | |
<button id="add-data">Add Data</button> | |
<button id="add-data">Add Data</button> | |
</div> | |
<div id="map" class="map"></div> |
A Pen by weedkiller on CodePen.