Code4HR / open-health-inspection-app

The frontend for Code for Hampton Roads' Open Health Inspection Data.
http://ohi.code4hr.org
GNU General Public License v3.0
13 stars 21 forks source link

Use OpenStreetMap #116

Closed harry-wood closed 10 years ago

harry-wood commented 10 years ago

Use maps from OpenStreetMap not Google.

Maybe not very high on your priority list, but when I see "@OpenData" pimping this, I feel obliged to say something :-)

The OpenStreetMap project is a a not-for-profit project which releases all raw map data with an open license. Google maps is a closed-data commercial map provider.

Some practical hints on how you might do this: "LeafletJS" is a popular javascript library (A.K.A. "API") for display maps such as OpenStreetMap. I see it's available as an angularJS directive: http://tombatossals.github.io/angular-leaflet-directive/#!/ though I haven't tried using that myself.

If you prefer google's API, you could at least bring in OpenStreetMap map tiles like this: http://wiki.openstreetmap.org/wiki/Google_Maps_Example

wbprice commented 10 years ago

There are a few more features we'll want to implement on the maps side, so we'll look at how we might do that in Leaflet JS or similar solutions for a future release.

qwo commented 10 years ago

@harry-wood we appreciate the feedback and are looking into this on #117 now.

We are definitely a OSM fan and @c4hrva/norfolkart application uses OSM tiles and leaflet http://iartnorfolk.com/.

We're receptive to PR and I definitely have limited experience with angular to know the compatibility between ng-leaflet and ng-maps

ghost commented 10 years ago

nlaplante/angular-google-maps#460 states anglular-leaflet-directive as the way to go for Angular, and if you want an example, the OpenStreetMap Wiki has information on their tile server URLs.

qwo commented 10 years ago

would use it in a heart beat if its a drop in replacement

Buzz word Turnkey

jalbertbowden commented 10 years ago

yeah but this is just another glaring reminder to not start anything with google maps. leaflet should be the default.

ghost commented 10 years ago

@jalbertbowden :+1: At least for open data.

nameispete commented 10 years ago

Let's close this for now at least as far as OHI 1.0 goes. Perhaps we can create a separate 2.0 fork.

I know that OpenStreetMap is a nice to have and we will definitely learn more about it in three weeks, but at this point, I think we need to refine what we currently have rather than change the underpinnings of the application. If it's not broken, let's not break it.

wbprice commented 10 years ago

I'm not opposed to switching to OSM for a future release, but I'd like some time to look at what LeafletJS has to offer and what the tangible benefits of switching would be.

ghost commented 10 years ago

Could also create an openstreetmap branch to test out changes without breaking the master development branch.

wbprice commented 10 years ago

@ryayak1460 Definitely. I'm focusing on other things right now, but if you want to get started please feel free to fork the repo and try it out.

qwo commented 10 years ago

agreed with @wbprice if you guys have any questions feel free to ping either one of us. The leaflet rewrite is a goal but not in the immediate time frame.

ghost commented 10 years ago

I got a question for this: what's the Geosearch value in the controller? Does this stem from a library? I want to see how to use this to interact with the directive I'm looking at currently.

wbprice commented 10 years ago

Geosearch is a service (in services.js) that passes lat/lon information to the API. The response contains a list of nearby restaurants. I'm also using Geosearch to pass information between controllers.

qwo commented 10 years ago

Hi are you talking about https://github.com/c4hrva/open-health-inspection-app/blob/gh-pages/js/controllers.js#L7-11?

ghost commented 10 years ago

@wbprice Cool, okay. Have to learn some Angular first. Didn't know if angular.extend($scope.map, {...}); would prove safe. @stanzheng Yes. I think the Leaflet w/OpenStreetMap code would only really affect this part of the definitions past the dependencies.

qwo commented 10 years ago

cool :+1: go for it

ghost commented 10 years ago

Trying to figure out how to generate markers from the restaurant models inside the controller, since I don't see a way to template them out instead, at the moment.

qwo commented 10 years ago

hi ryan, im not too familiar with the app as wbprice is but if you post line number and file contexts I would be better able to assist you

ghost commented 10 years ago

Well, it's not currently in the existing codebase. Essentially, I have to move:

          <marker ng-repeat="restaurant in results" coords="restaurant.coordinates">
            <window show="markerShow" closeClick="true">
              <center>
                <h4>{{restaurant.name}}</h4>
                <h4>{{restaurant.score}}</h4>
                <p><a class="btn btn-info" href="#{{restaurant.url}}">Learn More</a></p>
              </center>
            </window>
          </marker>

...to a map.markers element on the controller bound to the results element in the preceeding HTML.

ghost commented 10 years ago

In any case, I'll take a look at this later. Got a handrolled data replication bug to track down.

qwo commented 10 years ago

Try some of these links, I think i tried to debug that section of code to no avali. My angular and my map fu is no good but thats how it looks in the docs.

I saw some examples how the guy restructured it for NG-MAP dunno about NG-Leaflet.

These were helpful https://github.com/nlaplante/angular-google-maps/issues/408#eed5fda471ce7c89fae6c9a93dcb6178 https://github.com/nlaplante/angular-google-maps/pull/83#issuecomment-22724699 https://github.com/nlaplante/angular-google-maps/blob/master/example/example.html#L62-L67

Am i hot or cold?

qwo commented 10 years ago

Also maybe a strategy would be refactoring the code to fall aligned to very strict angular MVC js patterns and be easier to translate and mimic behavior similar to angular-leaflet

Heres the docs on NG-Maps http://angular-google-maps.org/#!/api#window

ghost commented 10 years ago

I can't exactly use those approaches since you bind markers on the markers element of the leaflet tag with angular-leaflet-directive, like so:

<leaflet markers="markers">
</leaflet>

So you have to have a markers element in your scope, and you have to somehow bind the results element with the markers element:

angular.extend($scope, {
    markers: {
        restaurantOne: {
            lat: 9999999,
            lng: 99999
        }, //...
        restaurantN: {
            // ...
        }
    }
});
ghost commented 10 years ago

Next?

wbprice commented 10 years ago

Doubtful. I'm reducing scope and maps are getting cut for now.

ghost commented 10 years ago

Ah, right, forgot. Completely?

wbprice commented 10 years ago

1.3 maybe? The current plan is to consider the app stable after 1.2 ships.

ghost commented 10 years ago

Okay. Next falls outside of 1.2 or do they equal each other?

ghost commented 10 years ago

fitshipit