Assignment of Week 3

Assignment of Week 3

이번 과제에서는 setup 메쏘드를 통해 맵이라는 캔버스를 준비하고 draw 메쏘드를 통해 그 위에 콘텐츠들을 장착하는 기능을 구현해본다.

지시사항에 따라 실행해보면 Default 맵만 나타나는 것을 확인할 수 있다.

다음 3번째 단계를 따라가면 setup 메쏘드에 RSS feed를 통해 받은 지진 정보를 PointFeature에 추가하여 마커로써 추가하는 것을 구현한다. 실행하면 위와 같은 모습이 나타나야 한다.

다음 4단계에서는 지진의 진도에 따라 원의 크기와 색상이 달라지도록 적용하고 실행 시 위와 같은 모습이 나올 것이다.

마지막으로는 범례를 추가하여 각 원의 크기/색상 정보에 대한 진도 정보를 매칭시켜준다.

바로 코드로 넘어가겠다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

package module3;

//Java utilities libraries

import java.util.ArrayList;

//import java.util.Collections;

//import java.util.Comparator;

import java.util.List;

//Processing library

import processing.core.PApplet;

//Unfolding libraries

import de.fhpotsdam.unfolding.UnfoldingMap;

import de.fhpotsdam.unfolding.marker.Marker;

import de.fhpotsdam.unfolding.data.PointFeature;

import de.fhpotsdam.unfolding.marker.SimplePointMarker;

import de.fhpotsdam.unfolding.providers.Google;

import de.fhpotsdam.unfolding.providers.MBTilesMapProvider;

import de.fhpotsdam.unfolding.utils.MapUtils;

//Parsing library

import parsing.ParseFeed;

/** EarthquakeCityMap

 * An application with an interactive map displaying earthquake data.

 * Author: UC San Diego Intermediate Software Development MOOC team

 * @author Your name here

 * Date: July 17, 2015

 * */

public class EarthquakeCityMap extends PApplet {

    // You can ignore this.  It's to keep eclipse from generating a warning.

    private static final long serialVersionUID = 1L;

    // IF YOU ARE WORKING OFFLINE, change the value of this variable to true

    private static final boolean offline = false;

    // Less than this threshold is a light earthquake

    public static final float THRESHOLD_MODERATE = 5;

    // Less than this threshold is a minor earthquake

    public static final float THRESHOLD_LIGHT = 4;

    /** This is where to find the local tiles, for working without an Internet connection */

    public static String mbTilesString = "blankLight-1-3.mbtiles";

    // The map

    private UnfoldingMap map;

    //feed with magnitude 2.5+ Earthquakes

    private String earthquakesURL = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.atom";

    public void setup() {

        size(950, 600, OPENGL);

        if (offline) {

            map = new UnfoldingMap(this, 200, 50, 700, 500, new MBTilesMapProvider(mbTilesString));

            earthquakesURL = "2.5_week.atom";     // Same feed, saved Aug 7, 2015, for working offline

        }

        else {

            map = new UnfoldingMap(this, 200, 50, 700, 500, new Google.GoogleMapProvider());

            // IF YOU WANT TO TEST WITH A LOCAL FILE, uncomment the next line

            //earthquakesURL = "2.5_week.atom";

        }

        map.zoomToLevel(2);

        MapUtils.createDefaultEventDispatcher(this, map);    

        // The List you will populate with new SimplePointMarkers

        List<Marker> markers = new ArrayList<Marker>();

        //Use provided parser to collect properties for each earthquake

        //PointFeatures have a getLocation method

        List<PointFeature> earthquakes = ParseFeed.parseEarthquake(this, earthquakesURL);

        //TODO (Step 3): Add a loop here that calls createMarker (see below) 

        // to create a new SimplePointMarker for each PointFeature in 

        // earthquakes.  Then add each new SimplePointMarker to the 

        // List markers (so that it will be added to the map in the line below)

        for (PointFeature eq: earthquakes) {

            markers.add(createMarker(eq));

        }

        // Add the markers to the map so that they are displayed

        map.addMarkers(markers);

    }

    /* createMarker: A suggested helper method that takes in an earthquake 

     * feature and returns a SimplePointMarker for that earthquake

     * 

     * In step 3 You can use this method as-is.  Call it from a loop in the 

     * setp method.  

     * 

     * TODO (Step 4): Add code to this method so that it adds the proper 

     * styling to each marker based on the magnitude of the earthquake.  

    */

    private SimplePointMarker createMarker(PointFeature feature)

    {  

        // To print all of the features in a PointFeature (so you can see what they are)

        // uncomment the line below.  Note this will only print if you call createMarker 

        // from setup

        //System.out.println(feature.getProperties());

        // Create a new SimplePointMarker at the location given by the PointFeature

        SimplePointMarker marker = new SimplePointMarker(feature.getLocation());

        Object magObj = feature.getProperty("magnitude");

        float mag = Float.parseFloat(magObj.toString());

        // Here is an example of how to use Processing's color method to generate 

        // an int that represents the color yellow.  

        int yellow = color(255, 255, 0);

        int blue = color(0, 0, 255);

        int red = color(255, 0, 0);

        // TODO (Step 4): Add code below to style the marker's size and color 

        // according to the magnitude of the earthquake.  

        // Don't forget about the constants THRESHOLD_MODERATE and 

        // THRESHOLD_LIGHT, which are declared above.

        // Rather than comparing the magnitude to a number directly, compare 

        // the magnitude to these variables (and change their value in the code 

        // above if you want to change what you mean by "moderate" and "light")

        if ( (float) mag < THRESHOLD_LIGHT) {

            marker.setColor(blue);

            marker.setRadius(5);

        }

        else if ( (float) mag < THRESHOLD_MODERATE) {

            marker.setColor(yellow);

            marker.setRadius(10);

        }

        else {

            marker.setColor(red);

            marker.setRadius(15);

        }

        // Finally return the marker

        return marker;

    }

    public void draw() {

        background(10);

        map.draw();

        addKey();    

    }

    // helper method to draw key in GUI

    // TODO: Implement this method to draw the key

    private void addKey() 

    {    

        // Remember you can use Processing's graphics methods here

        fill(255, 255, 255);

        rect(25, 50, 150, 250);

        fill(0, 0, 0);

        textSize(12);

        text("Earthquake Key", 60, 100);

        fill(255, 0, 0);

        ellipse(45, 150, 15, 15);

        textSize(12);

        text("5.0+ Magnitude", 75, 155);

        fill(255, 255, 0);

        ellipse(45, 200, 10, 10);

        textSize(12);

        text("4.0+ Magnitude", 75, 205);

        fill(0, 0, 255);

        ellipse(45, 250, 5, 5);

        textSize(12);

        text("Below 4.0", 75, 255);

    }

}

Colored by Color Scripter
cs

Step 3: 먼저 기본틀에서 setup메쏘드 중간에 for문을 통해 PointFeature가 earthquakes인 것을 마커로 추가하도록 한다. 이때 createMarker를 통해서 진행한다.

Step 4: 다음 createMarker 메쏘드를 mag 정보에 따라 마커의 색상과 반지름을 세팅한다.

Step 5: 마지막으로 addKey 메쏘드에 범례를 추가하기 위해 fill, rect, textSize, text, ellipse 메쏘드들을 사용하여 구성한다.