Skip to content

Commit

Permalink
added subdir for address additions
Browse files Browse the repository at this point in the history
  • Loading branch information
@landonreed
landonreed committed Jun 18, 2014
1 parent 56ceaee commit d8030db
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 8 deletions.
100 changes: 100 additions & 0 deletions address/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<title>On OpenStreetMap</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='../css/style.css' />
<link rel='stylesheet' type='text/css' href='../css/site.css' />
<link rel='stylesheet' type='text/css' href='../css/select2.css' />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../js/select2.min.js"></script>
</head>
<body>
<div class='container pad2 margin2 col8'>
<div class='pad2'>
<img src='../img/osm.png' class='fl mr' alt='OpenStreetMap' />
<h2>On OpenStreetMap</h2>
<p>OpenStreetMap is an open, global map used by people around the world
to navigate and find local businesses and homes.<br />
It's easy and free to get on the map!</p>
</div>

<div class='col12 on-1 steps clearfix'>
<div class='col4 center pad1 step-1'>
<a href='#location'>Location</a>
</div>
<div class='col4 center pad1 step-2'>
<a>Details</a>
</div>
<div class='col4 center pad1 step-3'>
<strong>Done</strong>
</div>
</div>

<div class='col12' id='address-step'>
<div class='center pad2'>
<h3 id='address-welcome'>Is your address missing from OpenStreetMap? No problem.</h3>
<span id='instructions'>Start by telling us the street and city in which your home or business is located.</span>
</div>
<div class='col12'>
<div class='pad1'>
<form id='find'>
<input class='col8' id='address' placeholder='West Main Street, Alexandria, VA' />
<button class='col4' id='findme'>Find Me!</button>
</form>
</div>
<br />
<br />
<div class='col12' id='findme-map'></div>
<p id="couldnt-find" style='display: none;'>
<strong>We couldn't find your street.</strong> Try searching for just the city without the street.
</p>
</div>
</div>

<div class='col12 hide' id='collect-data-step'>
<h3 class="center">Almost there...</h3>
<p class="center">We found your location. Now fill us in on your address details.</p>
<div class='col12'>
<div class='margin3 col1'>
<label for='number'>#</label>
<input id='number' type='text' placeholder='123' />
</div>
<div class='col5'>
<label for='street'>Street</label>
<input id='street' type='text' placeholder='West Main St' />
</div>
</div>
<div class='col12'>
<div class='margin3 col4'>
<label for='city'>City</label>
<input id='city' type='text' placeholder='Alexandria' />
</div>
<div class='col2'>
<label for='postal_code'>Postal Code</label>
<input id='postal_code' type='text' placeholder='22309' />
</div>

</div>
<button class='col12' id='collect-data-done'><h4>Done!</h4></button>
</div>

<div class='col12 pad2 hide' id='confirm-step'>
<p>
<strong>Thanks!</strong> An OpenStreetMap volunteer will add your data to the map soon.
</p>
<p>
Did you know you can add your own data to the map and skip the wait?
It's very easy to get started <a href="http://openstreetmap.org/edit">editing OSM</a>
in your browser.
</p>
</div>
</div>
<script src='../js/site.js'></script>
</body>
</html>
36 changes: 28 additions & 8 deletions js/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,20 @@ var findme_map = L.map('findme-map')
osm = L.tileLayer(osmUrl, {minZoom: 2, maxZoom: 18, attribution: osmAttrib}).addTo(findme_map),
category_data = [];

// Check if user is on business page or home/address page
var addr = location.pathname.match(/address/) ? true : false;

var findme_marker = L.marker([0,0], {draggable:true}).addTo(findme_map);
findme_marker.setOpacity(0);

if (location.hash) location.hash = '';

$.ajax('./categories.json').success(function(data){
category_data = data;
});
// only need categories.json if finding a business
if (!addr){
$.ajax('/categories.json').success(function(data){
category_data = data;
});
}

$("#category").select2({
query: function (query) {
Expand Down Expand Up @@ -51,11 +57,18 @@ $("#find").submit(function(e) {

findme_marker.setOpacity(1);
findme_marker.setLatLng([chosen_place.lat, chosen_place.lon]);

$('#instructions').html('We found it! Click and drag the marker to sit on your business, then you are ready to <a href="#details">add details to your business listing</a>.');
var successMessage = !addr ? 'We found it! Click and drag the marker to sit on your business, then you are ready to <a href="#details">add details to your business listing</a>.' : 'We found your general vicinity! Click and drag the marker to sit on your home or business, then you are ready to <a href="#details">refine your address</a>.';
$('#instructions').html(successMessage);
if (addr){
$('#address-welcome').html('Ah ha!')
}
$('.step-2 a').attr('href', '#details');
} else {
$('#instructions').html('<strong>We couldn\'t find your address.</strong> Try searching for your street or city without the address.');
var failureMessage = !addr ? '<strong>We couldn\'t find your address.</strong> Try searching for your street or city without the address.' : '<strong>We couldn\'t find your street.</strong> Try searching for your city without the address or street.';
$('#instructions').html(failureMessage);
if (addr){
$('#address-welcome').html('Hrrm...')
}
}
$("#findme").removeClass("loading");
});
Expand Down Expand Up @@ -86,14 +99,21 @@ $(window).on('hashchange', function() {
$("#collect-data-done").click(function() {
location.hash = '#done';

var note_body = "onosm.org submitted note from a business:\n" +
var note_body = !addr ?
"onosm.org submitted note from a business:\n" +
"name: " + $("#name").val() + "\n" +
"phone: " + $("#phone").val() + "\n" +
"website: " + $("#website").val() + "\n" +
"twitter: " + $("#twitter").val() + "\n" +
"hours: " + $("#opening_hours").val() + "\n" +
"category: " + $("#category").val() + "\n" +
"address: " + $("#address").val(),
"address: " + $("#address").val()
:
"onosm.org submitted note for a home address:\n" +
"number: " + $("#number").val() + "\n" +
"street: " + $("#street").val() + "\n" +
"city: " + $("#city").val() + "\n" +
"postal_code: " + $("#postal_code").val() + "\n",
latlon = findme_marker.getLatLng(),
qwarg = {
lat: latlon.lat,
Expand Down

0 comments on commit d8030db

Please sign in to comment.