Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Small Farms Manitoba - A new Elefant-powered site that connects people to local farmers

edited January 2014 in Announcements

It's been a busy week for Elefant website launches, the second of which being Small Farms Manitoba, a site that helps connect consumers with local food producers across the province.

It's just a soft launch so some content isn't fully written yet, but there are already 80 farms in the directory with more to come!

Cheers,
Johnny

Comments

  • Nice! What did you use for the map/checkbox search on the home page?

  • I just wrote a little wrapper around a REST query for updating the results, and the Google Maps API: http://smallfarmsmanitoba.com/apps/farms/js/farm_directory.js

  • One suggestion: consider different color flags for the different products.

  • Thanks for the suggestion! We're playing with a few options for clearer flags, since they do merge together too easily

  • This is probably obvious, but it's got me stumped at the moment. If you wanted to pass geolocation to

    self.map_opts = {
        zoom: 7,
        center: new google.maps.LatLng (50.5, -98.34),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };      
    

    how would you do it exactly? I can set it after the fact with

        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    
        function onSuccess (position) {
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            self.map.setCenter(new google.maps.LatLng(myLat, myLong));
        }
    
        function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        }
    

    but that causes the map to load one way before jumping to my location.

  • To have the map start at a given point, you just give it that point in the center option and adjust the zoom. Expanding the variables from that code, here's the full map declaration that zooms in on Southern Manitoba based on the center and zoom options:

    var map = new google.maps.Map (
        document.getElementById ('map'),
        {
            zoom: 7,
            center: new google.maps.LatLng (50.5, -98.34),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    );
    

    Is that what you mean?

  • I got that part, but I'm confused how to center it at the position.coords.latitude and position.coords.longitude that navigator.geolocation.getCurrentPosition(onSuccess) returns. I guess the question is how do I get a variable from the onSuccess function to the google.maps.Map. I know this is outside the scope of elefant -- sorry! I've googled and only gotten more confused, and you're the best source I know for questions like this.

  • Hmm, I'm not sure. Just to be clear, you're trying to dynamically fetch the geolocation info and then update the map based on the results, without initializing it to a default spot and having it jump to the next one visibly for the user. Is that correct?

    If so, can you hold off on initializing the map until the onSuccess is triggered and put the new google.maps.Map() call in there?

  • Getting back to this -- I decided to initialize the map based on the lat/long returned by geoip and then update it onSuccess.

Sign In or Register to comment.