Popfly Series 6-map mashup of popfly 1: photos, gold coins and houses for sale

Source: Internet
Author: User

Mashup, whether displaying photos of houses for sale or current weather conditions, locations of supermarkets and restaurants, natural gas prices, and summer vacation photos, has changed the way people use the Internet to view and display information. The data tells you a story.

This section describes several ways to use Microsoft popfly to build map mashups.

PopflyMapMashup1: Photos, gold coins and houses for sale

In this course, the interpreter popfly mashupsRefer:

L whereintheworld (http://www.popfly.com/users/professorpopfly/WhereInTheWorld)

L statequartersmap (http://www.popfly.com/users/professorpopfly/StateQuartersMap)

L realestatemap (http://www.popfly.com/users/professorpopfly/RealEstateMap)

L realestatelocalinfomap (http://www.popfly.com/users/professorpopfly/RealEstateLocalInfoMap)

Learning Objectives

After completing the course, you can:

L obtain and mark the geographic mark data on the map

L master three different techniques for marking locations on Virtual Earth

L describe the data source to adapt to map marking

L use text processing blocks and tools to extract location data from RSS sources

L use the popfly block to convert the position to its consistent longitude and latitude coordinates

L Merge data from different sources to the same Virtual Earth map.


Mashup, whether displaying photos of houses for sale or current weather conditions, locations of supermarkets and restaurants, natural gas prices, and summer vacation photos, has changed the way people use the Internet to view and display information. The data tells you a story. This section describes several ways to use Microsoft popfly to build map mashups.

Some mashups only need a separate data source (such as area photos or gasoline prices for each area .) Others, such as the real property and Wikipedia information mashup at the end of this article, and the "super fast food point lookup" mashup in the next lesson merge arrays from different data sources for marking on the map. After completing two mapping courses, you can look for Indian restaurants near your home and show photos of glaciers and rain forests on the same map.

In this lesson, we will first give an overview of the popfly block for creating a map mashup and its operations.

Virtual Earth

Microsoft Virtual Earth is a map service. Use the Virtual Earth block to display information on the map.

The Virtual Earth block has three operations to indicate a location on the map with a map pin:

L addpushpin: adds a map nail Based on longitude and latitude.

L addpushpinbylocation: adds a name to the map based on the location name.

L addpushpinbyaddress: Add a map nail Based on the address

Addpushpin is the most common operation, but it transfers pressure to the mashup designer-use the GEONAMES block or the yahoogeocoding block to put an address, city, the region or zip code is converted to the longitude and latitude coordinates. In this lesson, use the geo-coordinates statement to query the longitude and latitude coordinates, and find the data with such coordinates during the GEO mark process.

The next two operations internally place one location (such as "Bentley College") or one address (such as "175 forest Street, Waltham, ma ") convert to the corresponding geo coordinates and mark them on the map.

For each point marked on a map, you can specify the URL of a custom icon for pushpin and the title and description that appears when you move the cursor over the icon. If you provide the URL of an image, popfly uses this image as the icon image of the graph nail, instead of the default red icon when this value is not set.

The Virtual Earth block has two attributes:

Defaultzoomlevel: A value between 1 (World View) and 19 (street view. If you mark local data in the map, try a median value, for example, 10.

Usephotouriasicon: the default value of this attribute is true, indicating that the URL should be used as the pushpin icon.

CreateMap mashupsTechnology

This lesson discusses four different map creation mashups.Program.

L Example 1 shows how to create a mashup using a block that provides data that contains the labeled geo information, such as Flickr. It contains a getgeotaggedphotoes operation. These blocks are directly connected to Virtual Earth.

L Example 2 describes how to create a mashup when you have a location, city, or region, but not its latitude and longitude information. In this example, use GeoNames or yahoogeocoding, or use addpushpinbylocation or addpushpinbyaddress of Virtual Earth to create a mashup.

L Example 3 shows how to use text processing technology to extract a location or address from the title or description of an RSS source to create a mashup. In this case, the location information cannot be used directly. Some text processing is required to obtain an address, city, region, or other location information from the raw data to search for geographic coordinate information for marking in Virtual Earth.

L Example 4 shows how to merge datasets with GEO tag information from different data sources to display them on the same map.

Example 1: Use the GEO tagData creation map mashup-Build a FlickrMap

The simplest way to create a map mashup is to use data that already contains latitude and longitude information.

The following table lists the popfly blocks with longitude and latitude information in each output project:




Getgeotaggedphotos returns a photo containing the relevant latitude and longitude information.


The position description is retrieved. the longitude and latitude information of the work position is returned as part of the indeedjob object information.


Returns an IP address-related location.


Obtain the bus route location of King County and Wa.


Returns data related to local business information found in Windows Live phonebook. You need to enter the longitude and latitude of a point. The search will start from the point on the map, and a radius value in miles to limit the search results.

Tip: Use GeoNames to obtain the longitude and latitude information of a given place name or zip code.


Some RSS sources are labeled with GEO tags, and each returned item contains coordinates of longitude and latitude.


Obtain the information and location in the event list on upcoming.org.


Search for information about GEO tags on Wikipedia.Article

Yahoo weather Block

Retrieves meteorological information of a specified zip code.

Yahoo! Traffic

Obtain traffic information from any location in the United States

Simply connect one of these blocks to Virtual Earth. You can also add a user input block or other "set up" block to specify the input value of mashup.

Using this technique, whereintheworld mashup of the login sor popfly can present a photo containing GEO tags on a map:

Note: A license key is required for the Flickr block. This mashup will search for the photos of 20 castles and display them on the map of the world.

Example 2: Find GEOCoordinates-Build a State residence Map

If you know the name of a city, state, or location, but do not know the longitude and latitude, you can still call addpushpinbyaddress or addpushpinbylocation of Virtual Earth, alternatively, you can use the GEONAMES or yahoogeocoding block to query the location information to create a map mashup. These popfly blocks convert the location information to the corresponding longitude and latitude coordinates.




You have an operation based on the location name, address, city and region, or zip code to find the longitude and latitude.


You have an operation to search for longitude and latitude Based on the address, city, or region.

In some cases, the GEONAMES Block returns the longitude and latitude value of 0 or 0 (this will make the map nails exactly on the coast of Africa .) This may be because the GEONAMES Web Service is closed, so you can try to switch to yahoogeocoding instead.

In this example, a map is created to show the residence of a continent. In this example, the map of the residence is displayed as a mouse slide, instead of displaying the image of the residence on the map. The data comes from the United States Information block.

The United States information block contains URLs of 50 State residences.

The simple image block is used to construct HTML image labels to display images. This is used to display the description when you move the cursor over each State on the map.

The yahoogeocoding block receives the capital and each State, and queries the corresponding longitude and latitude for Virtual Earth.

Because no value is specified for the URL attribute of Virtual Earth, mashup uses the default red icon. According to the results given by the yahoogeocoding block, the addpushpin operation of the Virtual Earth block places a dingtalk at the corresponding position.

If mashup uses the addpushpinbyaddress operation in Virtual Earth instead (as shown in virtual eerth on the right), The yahoogeocoding block can be removed from the mashup design.

When you move the cursor over a map, the map of each State is displayed.

Example 3: Use text processing-Build a map of Real Estate

Many RSS sources provide the appropriate formats that you can use directly to build mashup data. For example, trulia.com is a real estate website that displays the real estate list on a map. On this website, you can also subscribe to RSS feeds for standard housing (price range, number of bedrooms, etc.

In this example, a real estate map is created. You can enter the zip code of the region to be queried and the lowest and highest price range value. This mashup shows houses that meet these conditions.

Think about trulia.com and use the settings shown below to search for a house in a zip code 02451 area between $250,000 and $300,000.

This website also provides RSS source type results. Note that the URL of the RSS source is:


It is not difficult to construct the URL based on the three values entered by the user: a zip code, the lowest amount, and the maximum amount, then three textappender blocks are used to create different parts of the URL and connect them together.

The following chart shows how to configure these blocks. The operation details and their input details are left to the reader's consideration.

The output of textappender (3) is the complete URL of the RSS source.

Check the RSS source project. The title of each item is the fixed asset tag followed by the price. The text policy used here is to use $ to separate titles, so that the content before $ is an address, and the content after $ is a price. When mashup extracts an address, popfly can plot it on a map.

Follow these steps to complete the mashup. The RSS feed is obtained by textappender (3) in the previous article.

The splitget operation of the text util block receives a list of titles, separates them at $, and returns the processed items (for example, the previous project is the first group) ).

We can directly provide the output address to the addpushpinbyaddress method of the Virtual Earth block, instead of using the yahoogeocoding block to calculate the latitude and longitude values, and output the processing result to the Virtual Earth for plotting. However, by using the yahoogeocoding block, we can directly obtain geographical coordinates from the real estate source. This will be helpful in example 4, where we will mix real estate data with Wikipedia articles related to landmarks with the same zip code.

Mashup uses textappender (4) block to create text with title. when clicked, the user is redirected to the HTML of the hyperlink of the project of the corresponding RSS source.CodeInstead of displaying the title when the map is triggered.

The Virtual Earth block is used by the yahoogeocoding block to obtain the longitude and latitude.

The default zoom level of the Virtual Earth block is set to 13, because the area is a group of streets in a block. The following is the output of mashup runtime.

Example 4: Merged data from different sources-Add local information to real estate map

Consider that you are moving to a new city. In addition to the house to be sold, you also want to place local geographic information on the same map. To achieve this, you need to mix and match the data from two different data sources (the RSS source of real estate information and the data source of local information.

In this example, the geosearchlocal operation of the Wikipedia block is used to obtain the geographic information of the same region as the zip code of the real estate map you created in Example 3. The final mashup is worker sor popfly's realestatelocalinfomap.

Pushpin list is a list of pushpin projects that contain the required information-Longitude and latitude, the URL of the graph nail icon, and the title and description displayed at the time of triggering. The vepushpinlistcreator block collects all coordinates from a single data source to the pushpin list.




Create a list of pushpin information used to draw on Virtual Earth

The createpushpin operation of the vepushpinlistcreator block is the same as the addpushpin operation of Virtual Earth (and some additional formatting options for them. If you have two different mashups that use Virtual Earth, you need to merge them:

Open the first mashup and click "Disconnect" of the Virtual Earth block"

L connect the first mashup block to the vepushpinlistcreator Block

L add blocks for the second mashup block and connect them to a vepushpinlistcreator block.

L use a combine block to merge the pushpin list from two vepushpinlistcreator blocks.

L connect the output of the combine block to a virtual earth block.

For example, to add local geographic information to the real estate map created in Example 3, add these blocks to this mashup:

The following describes how to set the createpushpin operation of the vepushpinlistcreator block. Set the optional data object to null in the format shown in.

The Wikipedia block uses the geosearchnearby operation to obtain 10 related items within 5 of the zip code entered by the user.

Vepushpinlistcreator (2) is used by Wikipedia to collect all the local information and output the result as a pushpin list. Then, this information chart is used.

The combine block combines the output objects of two vepushpinlistcreator blocks, and virtualearth displays the two pushpin lists on the same map.

When mashup is running, the House icon indicates that the real estate information comes from the previous mashup, and the local information of the information icon is obtained by the Wikipedia block.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.