-
Notifications
You must be signed in to change notification settings - Fork 7
Make interactive map of troy #145
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 9 commits
f53efb5
c2345ac
d7467e8
b1a23a7
5c49c43
a0f6ee2
150e52d
7d94024
eea2104
d24e3d3
8f72a4c
a5cb531
6ba1918
1a80ceb
3c3da18
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # Generated by Django 2.2.1 on 2019-10-08 18:47 | ||
|
|
||
| from django.db import migrations, models | ||
| import django.db.models.deletion | ||
|
|
||
|
|
||
| class Migration(migrations.Migration): | ||
|
|
||
| dependencies = [ | ||
| ('wagtailcore', '0041_group_collection_permissions_verbose_name_plural'), | ||
| ('core', '0004_archivespage_body'), | ||
| ] | ||
|
|
||
| operations = [ | ||
| migrations.CreateModel( | ||
| name='MapPage', | ||
| fields=[ | ||
| ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.Page')), | ||
| ], | ||
| options={ | ||
| 'abstract': False, | ||
| }, | ||
| bases=('wagtailcore.page',), | ||
| ), | ||
| ] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # Generated by Django 2.2.1 on 2019-10-22 21:01 | ||
|
|
||
| from django.db import migrations | ||
| import wagtail.core.blocks | ||
| import wagtail.core.fields | ||
|
|
||
|
|
||
| class Migration(migrations.Migration): | ||
|
|
||
| dependencies = [ | ||
| ('core', '0005_mappage'), | ||
| ] | ||
|
|
||
| operations = [ | ||
| migrations.AddField( | ||
| model_name='mappage', | ||
| name='places', | ||
| field=wagtail.core.fields.StreamField([('Locations', wagtail.core.blocks.StructBlock([('name', wagtail.core.blocks.RichTextBlock(default='', required=True)), ('address', wagtail.core.blocks.RichTextBlock(default='', required=True)), ('description', wagtail.core.blocks.RichTextBlock(default='', required=True))]))], default=''), | ||
| preserve_default=False, | ||
| ), | ||
| ] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| name: "Place1" | ||
| address: "Address1" | ||
| information: "information1" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,207 @@ | ||
| {% extends "base.html" %} | ||
|
|
||
| {% load wagtailcore_tags wagtailimages_tags %} | ||
|
|
||
| {% block body_class %}template-mappage{% endblock %} | ||
|
|
||
| {% block content %} | ||
| <div class="container"> | ||
| <!-- {% for Location in page.places %} | ||
| <strong id ="places" class="text-primary text-uppercase text-kicker">{{ Location.value.name }}</strong> | ||
| {% endfor %} --> | ||
| <hr class="pb-3"> | ||
|
|
||
| <html> | ||
| <head> | ||
| <style> | ||
| /* Set the size of the div element that contains the map */ | ||
| #map { | ||
| height: 525px; /* The height is 400 pixels */ | ||
| width: 100%; /* The width is the width of the web page */ | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
|
|
||
| <h3>Map Demo</h3> | ||
| <!--The div element for the map --> | ||
| <div id="map"></div> | ||
|
|
||
| <script> | ||
|
|
||
| function similarity(s1, s2) { | ||
| var longer = s1; | ||
| var shorter = s2; | ||
| if (s1.length < s2.length) { | ||
| longer = s2; | ||
| shorter = s1; | ||
| } | ||
| var longerLength = longer.length; | ||
| if (longerLength == 0) { | ||
| return 1.0; | ||
| } | ||
| return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength); | ||
| } | ||
|
|
||
| function editDistance(s1, s2) { | ||
| s1 = s1.toLowerCase(); | ||
| s2 = s2.toLowerCase(); | ||
|
|
||
| var costs = new Array(); | ||
| for (var i = 0; i <= s1.length; i++) { | ||
| var lastValue = i; | ||
| for (var j = 0; j <= s2.length; j++) { | ||
| if (i == 0) | ||
| costs[j] = j; | ||
| else { | ||
| if (j > 0) { | ||
| var newValue = costs[j - 1]; | ||
| if (s1.charAt(i - 1) != s2.charAt(j - 1)) | ||
| newValue = Math.min(Math.min(newValue, lastValue), | ||
| costs[j]) + 1; | ||
| costs[j - 1] = lastValue; | ||
| lastValue = newValue; | ||
| } | ||
| } | ||
| } | ||
| if (i > 0) | ||
| costs[s2.length] = lastValue; | ||
| } | ||
| return costs[s2.length]; | ||
| } | ||
|
|
||
| // Get values for map locations | ||
| window.names = [ | ||
| {% for Location in page.places %} | ||
| `{{Location.value.name}}`, | ||
| {% endfor %} | ||
| ] | ||
| window.addresses = [ | ||
| {% for Location in page.places %} | ||
| `{{Location.value.address}}`, | ||
| {% endfor %} | ||
| ] | ||
| window.descriptions = [ | ||
| {% for Location in page.places %} | ||
| `{{Location.value.description}}`, | ||
| {% endfor %} | ||
| ] | ||
|
|
||
| // Parse addresses | ||
| window.parsedaddresses = [] | ||
| for(i = 0; i< window.addresses.length;i++){ | ||
| var addressString = window.addresses[i]; | ||
| var index = addressString.search("p"); | ||
| var index2 = addressString.search("/p"); | ||
| var addressString = addressString.slice(index + 2,index2-1); | ||
| window.parsedaddresses.push(addressString); | ||
| } | ||
|
|
||
| // Initialize and add the map | ||
| function initMap() { | ||
| var customMapType = new google.maps.StyledMapType([ | ||
| { | ||
| elementType: 'labels', | ||
| stylers: [{visibility: 'off'}] | ||
| },{ | ||
| featureType: "road", | ||
| stylers: [{visibility: 'on'}] | ||
| } | ||
| ], { | ||
| name: 'Custom Style' | ||
| }); | ||
|
|
||
|
|
||
| var customMapTypeId = 'custom_style'; | ||
| // The location of Troy | ||
| var Troy = {lat: 42.728, lng: -73.691}; | ||
| // The map, centered at Troy | ||
| var map = new google.maps.Map( | ||
| document.getElementById('map'), {zoom: 16, center: Troy}); | ||
|
|
||
| // Get Lat and Long from addresses | ||
| var geocoder = new google.maps.Geocoder(); | ||
|
|
||
| // create markers per address | ||
| for(i=0;i<window.parsedaddresses.length;i++){ | ||
| console.log(window.parsedaddresses[i]); | ||
| console.log(i); | ||
| geocoder.geocode( { 'address': window.parsedaddresses[i]}, function(results, status) { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm afraid geocoding the addresses on the frontend for all clients will cause us to hit a rate limit rather quickly once deployed. Perhaps we should request the latitude and longitude on map creation/update and store those lat/lng values then |
||
|
|
||
| if (status == google.maps.GeocoderStatus.OK) { | ||
|
|
||
|
|
||
|
|
||
| var latitude = results[0].geometry.location.lat(); | ||
| var longitude = results[0].geometry.location.lng(); | ||
| console.log(results[0].formatted_address); | ||
|
|
||
| var marker = new google.maps.Marker({ | ||
| position: {lat:latitude, lng:longitude}, | ||
| title:"A marker" | ||
| }); | ||
|
|
||
|
|
||
|
|
||
| var max_value = 0; | ||
| var max_index = 0; | ||
| for(j = 0 ;j<window.parsedaddresses.length;j++){ | ||
|
|
||
| if(similarity(window.parsedaddresses[j],results[0].formatted_address)> max_value){ | ||
| max_value = similarity(window.parsedaddresses[j],results[0].formatted_address); | ||
| max_index = j; | ||
| } | ||
| } | ||
|
|
||
| var contentString = window.descriptions[max_index]; | ||
|
|
||
|
|
||
| var infowindow = new google.maps.InfoWindow({ | ||
| content: contentString | ||
| }); | ||
|
|
||
| marker.addListener('click', function() { | ||
| infowindow.open(map, marker); | ||
| }); | ||
|
|
||
| marker.setMap(map); | ||
| console.log(contentString); | ||
|
|
||
|
|
||
| } | ||
| }); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // To add the marker to the map, call setMap(); | ||
|
|
||
|
|
||
| } | ||
| map.mapTypes.set(customMapTypeId, customMapType); | ||
| map.setMapTypeId(customMapTypeId); | ||
| } | ||
| </script> | ||
| <!--Load the API from the specified URL | ||
| * The async attribute allows the browser to render the page while the API loads | ||
| * The key parameter will contain your own API key (which is not needed for this tutorial) | ||
| * The callback parameter executes the initMap() function | ||
| --> | ||
| <script async defer | ||
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2QD1ngZzv0QjZhylFw0T4_22hzOMjx34&callback=initMap"> | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this the browser api key? if it is not, embedding it in the frontend will expose the key to the user and could potentially expose us to other people using our key for things we did not intend. We should request the information we need (lat, lng, etc) on the backend and send the information down
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah in addition to open streets map, I plan on looking into a few other open source map options. Notably, Mapbox, Leaflet, Modest Maps, and Polymaps. Whichever seems to work best. I'll also get on replacing address with lat lng in admin panel. |
||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
| </div> | ||
| {% endblock %} | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -104,7 +104,7 @@ | |
| # https://docs.djangoproject.com/en/2.0/ref/settings/#databases | ||
|
|
||
| DATABASES = { | ||
| "default": dj_database_url.config(default="postgres://127.0.0.1:5432/pipeline") | ||
| "default": dj_database_url.config(default="postgresql://postgres:gav228@/pipeline") | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should not change this |
||
| } | ||
|
|
||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -36,7 +36,7 @@ | |
|
|
||
| DATABASES = { | ||
| "default": dj_database_url.config( | ||
| default="postgresql://postgres:postgres@127.0.0.1:5432/pipeline" | ||
| default="postgresql://postgres:gav228@127.0.0.1:5432/pipeline" | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should not change this
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. will resolve in my next commit along with other quickfixes (console logs, lat, lng etc) |
||
| ) | ||
| } | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should also remove the console logs.