Make interactive map of troy #145
Conversation
…e_interactive_map_of_troy
…e_interactive_map_of_troy
|
This needs a reformat of |
jlyon1
left a comment
jlyon1
left a comment
There was a problem hiding this comment.
This does work, just a few things that I think need to be addressed before we deploy this.
One other question I have: Does the google maps license allow us to do this? I generally prefer open street maps to google maps in general as well.
core/templates/core/map_page.html
Outdated
| * The callback parameter executes the initMap() function | ||
| --> | ||
| <script async defer | ||
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2QD1ngZzv0QjZhylFw0T4_22hzOMjx34&callback=initMap"> |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
pipeline/settings/base.py
Outdated
|
|
||
| DATABASES = { | ||
| "default": dj_database_url.config(default="postgres://127.0.0.1:5432/pipeline") | ||
| "default": dj_database_url.config(default="postgresql://postgres:gav228@/pipeline") |
pipeline/settings/dev.py
Outdated
| 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" |
There was a problem hiding this comment.
will resolve in my next commit along with other quickfixes (console logs, lat, lng etc)
core/templates/core/map_page.html
Outdated
| 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) { |
There was a problem hiding this comment.
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
core/templates/core/map_page.html
Outdated
| // create markers per address | ||
| for(i=0;i<window.parsedaddresses.length;i++){ | ||
| console.log(window.parsedaddresses[i]); | ||
| console.log(i); |
There was a problem hiding this comment.
Should also remove the console logs.
…g files to proper values and removed console.logs
Related Issues
Make a digital/interactive map of Downtown Troy #110
Describe the Changes
Added a model in the models.py file for a map page and an accompanying html file that parses wagtail data and renders a google maps on the page.
Still To Do
The map could use some styling optimizations
Problems
If someone clicks on the satelite imagery or geographic buttons on the map page, the cleared out markers come back. Basically it becomes less blank which draws attention away from what we may be trying to highlight. One of the potential style optimizations we could look at.
Testing
I used the pipeline admin page to create a mappage, then added locations to the map page to verify they displayed properly with the right locations