Demo entry 6780122

Neighbourhood Project

   

Submitted by anonymous on Dec 22, 2018 at 17:09
Language: JavaScript. Code size: 3.0 kB.

// Location Class
var Location = function(title, lng, lat) {
    var self = this;
    this.title = title;
    this.lng = lng;
    this.lat = lat;
    //Wiki Ajax Request
    this.wikiUrl = 'http://en.wikipedia.org/w/api.php?action=query&titles=' + self.title + '&prop=extracts|pageimages&format=json&pithumbsize=50&exchars=175&callback=?';
    $.ajax({
        type: "GET",
        url: self.wikiUrl,
        dataType: 'jsonp',
        async: true
    }).done(function(data) {
        var wikiImage = data.query.pages[Object.keys(data.query.pages)[0]].thumbnail;
        var wikiExtract = data.query.pages[Object.keys(data.query.pages)[0]].extract;
        noGapTitle = self.title.replace(/\s/g, '_');
        self.content = '<div id="wikiSnippet"><h2 id="wikiTitle">' + self.title + '</h2><div id="wikiImageDiv"><img id="wikiImage"src="' + wikiImage.source + '" /></div><div id="wikiExtracts">' + wikiExtract + '<p>from wiki</p></div></div>';
    }).fail(function(jqXHR, textStatus) {
        console.log("Problem loading wiki articles");
    });
    // Defining Markers
    self.marker = new google.maps.Marker({
        position: new google.maps.LatLng(self.lng, self.lat),
        map: map,
        title: self.title,
        animation: google.maps.Animation.DROP,
    });

    // Clicklistener for animation
    this.markerAnimation = function() {
        if (self.marker.getAnimation() !== null) {
            self.marker.setAnimation(null);
        } else {
            self.marker.setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(function() {
                self.marker.setAnimation(null);
            }, 1400);
        }
    };
    // InfoWindow
    this.openInfowindow = function() {
        map.panTo(self.marker.getPosition());
        infowindow.setContent(self.content);
        infowindow.open(map, self.marker);
        self.markerAnimation();
    };
    // Clicklistener for infoWindow
    this.addListener = google.maps.event.addListener(self.marker, 'click', function() {
        self.openInfowindow();
    });
};

// Location Model
var locationsModel = {

    locations: [
        new Location('HAL Aerospace Museum', 12.955003, 77.681239),
        new Location('Bangalore Palace', 12.998696, 77.592026),
        new Location('Cubbon Park', 12.976347, 77.592928),
        new Location('Government Museum, Bangalore', 12.975226, 77.596345),
        new Location('Bannerghatta National Park', 12.800285, 77.577047),
    ],
    query: ko.observable(''),
};


// Filter Search
locationsModel.search = ko.computed(function() {
    var self = this;
    search = this.query().toLowerCase();
    return ko.utils.arrayFilter(self.locations, function(location) {
        var searchList = location.title.toLowerCase().indexOf(search) >= 0;
        location.marker.setVisible(searchList);
        return searchList;
    });
}, locationsModel);

ko.applyBindings(locationsModel);

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).