Kirjautuminen

Haku

Tehtävät

Keskustelu: Projektit: Helsingin palautteet Google Mapsiin

Sivu 1 / 1

lakda [12.11.2016 22:36:05]

Lainaa #

Tarkotus oli tehdä sovellus joka hakee helsingin kaupungin palauterajapinnasta tietoa ja esittää ne google mapsillä. Mielestäni sovellus toimii riittävän hyvin mutta voisiko joku tarkistaa että se on tehty kunnolla, sillä aikasempaa js kokemusta minulla ei ole ja tämä on ensimmäinen työ minkä olen tehnyt

var map;



function initMap() {
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 60.16985569999999, lng: 24.938379}, zoom: 12 });
var infowindow =  new google.maps.InfoWindow({
        content: ''
    });
}




$(document).ready(function() {

	fetchData();

});

function fetchData() {

  //https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=closed---korjatut
	$.get('https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=open', function(result)
  {
  	renderData(result);
  });
}

function renderData(json)
{
	$.each(json,function(i) {

        var tila;
        var infowindow;
        var marker;
        var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.long);

        infowindow = new google.maps.InfoWindow();


        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });

        if(json[i].status === 'closed'){
            tila = 'Korjaus pyyntö lähetetty';
        }
        else {
           tila='Korjaus pyyntöä ei ole lähetetty';
        }


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.close();
          infowindow.setContent(json[i].description + '<br>Osoite: '+ json[i].address +'<br>Tila: '+ tila);
          infowindow.open(map, marker);
        }
      })(marker, i));
	})
}

groovyb [13.11.2016 00:55:12]

Lainaa #

Koodissa et ladannut itse karttaa missään ( initMap(); ). Lisäsin myös pätkän koodia sille, että vanha infowindow sulkeutuu, kun klikkaa uutta merkkiä. Jäsensin myös vähän javascriptiäsi ja poistin turhia pätkiä koodista. Mutta muuten ihan soiva peli, eli varsin hyvä suoritus ensimmäiseksi javascript viljelmäksi! Ps. Muista myös kommentoida mitä koodissasi tapahtuu, jos tarkoitus on jakaa sitä, eikä ole vain omaan testi/harjoituskäyttöön.

(jotta pätkä voi toimia, tarvitaan seuraavanlainen html -kikkare)

 <!-- nykyään google vaatii api -avainta, joten käykääs generoimassa itselle moinen -->
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=API-AVAIN"
  type="text/javascript"></script>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<!-- tolla kartan koolla nyt ei ole väliä, heitin vain jonkun -->
<div id="map" style="width:100%;height:500px"></div>
var currentInfoWindow; //Auki oleva infowindow
var map; //karttaobjekti

$(document).ready(function() {
   //Haetaan kartta
   initMap();
   //Haetaan palautteet
   fetchData();
});

function initMap() {
   map = new google.maps.Map(document.getElementById('map'), { center: {lat: 60.16985569999999, lng: 24.938379}, zoom: 12 });
}

function fetchData() {
   $.get('https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=open', function(result)
   {
      renderData(result);
   });
}

function renderData(json)
{
	$.each(json,function(i) {
        var data = json[i]
        var latLng = new google.maps.LatLng(data.lat, data.long);
        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });
        var tila = json[i].status === 'closed' ? 'Korjauspyyntö lähetetty' : 'Korjauspyyntöä ei ole lähetetty';

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          //Jos joku infowindow on aiemmin avattu, suljetaan se
          if(currentInfoWindow != null) {
             currentInfoWindow.close();
          }

          //Uusi data infowindowiin
          infowindow.setContent(createInfoWindowTemplate(json[i].description,
                                                         json[i].address,
                                                         tila)
          );

          //Avataan infowindow
          infowindow.open(map, marker);

          //Asetetaan uusi infowindow nykyiseksi
          currentInfoWindow = infowindow;
        }
      })(marker, i));
	});
}
//Html templatet on hyvä olla erikseen
function createInfoWindowTemplate(description,address, state) {
	return description +
           "<br>" +
           "<hr>" +
           "<b>Osoite: </b>" + address +
           "<br>" +
           "<b>Tila: </b>" + state;
}

Halutessasi, tuota projektiasi on myös helppo laajentaa ottamalla street viewit mukaan:

function renderData(json)
{
	$.each(json,function(i) {
        var data = json[i]
        var latLng = new google.maps.LatLng(data.lat, data.long);
        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
           position: latLng,
           title: data.title,
           map: map
        });
        var tila = json[i].status === 'closed' ? 'Korjauspyyntö lähetetty' : 'Korjauspyyntöä ei ole lähetetty';

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          //Jos joku infowindow on aiemmin avattu, suljetaan se
          if(currentInfoWindow != null) {
             currentInfoWindow.close();
          }

          //Uusi data infowindowiin ja placeholder panoraamalle
          infowindow.setContent(createInfoWindowTemplate(json[i].service_request_id,
          												 json[i].description,
                                                         json[i].address,
                                                         tila)
          );

          //Avataan infowindow
          infowindow.open(map, marker);

          //Haetaan panoraama, ja lisätään se diviin jossa id sama kuin service_request_id
          var panorama = new google.maps.StreetViewPanorama(
          document.getElementById(json[i].service_request_id), {
            position: latLng,
            pov: {
             heading: 34,
             pitch: 10
           }
          });
          map.setStreetView(panorama);

          //Asetetaan uusi infowindow nykyiseksi
          currentInfoWindow = infowindow;
        }
      })(marker, i));
	});
}

//Html templatet on hyvä olla erikseen
function createInfoWindowTemplate(id, description,address, state) {
    var streetViewStyle = "style='margin:20px;width:200px;height:200px;float:left;'";
    var identity = "id='" + id + "'";
	return "<div " + identity + streetViewStyle + "></div>" + description +
           "<br>" +
           "<hr>" +
           "<b>Osoite: </b>" + address +
           "<br>" +
           "<b>Tila: </b>" + state;
}

lakda [13.11.2016 10:41:03]

Lainaa #

Kiitos paljon :)

Vastaus

Muista lukea keskustelun ohjeet.
Tietoa sivustosta