金花三张牌下载

書名： HTML5 Data and Services Cookbook
作者名： Gorgi Kosev Mite Mitreski
本章字數： 614字
更新時間： 2021-08-06 16:49:58

Showing a map with a marked location

The rise of Google Maps and their excellent API popularized the embedding of maps on websites. Embedded maps have a variety of uses: displaying places that users have been to, displaying locations of events, displaying locations of stores owned by a business, and many others. Maps can be displayed along with every textual address displayed on our websites.

In this recipe we're going to make a simple map with a single location marked on it. To do this, we're going to use the Leaflet library (http://leafletjs.com/), which is a well known and widely library used by Flickr, FourSquare, Craigslist, Wikimedia, and other popular sites.

We're going to display an OpenStreetMap map layer. OpenStreetMap (http://www.openstreetmap.org/) is a free Wikipedia-like collaboratively created street map with great coverage.

We're also going to add a description balloon, which would be displayed when the placemark is clicked.

How to do it...

Let's write the HTML and JavaScript code.

Add Leaflet's stylesheet in our HTML file, along with a conditional extra CSS required for IE8 and older:
```
<link rel="stylesheet"  />
 
```

Include the Leaflet library JS file in our scripts:

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

Put a placeholder for the map on our page. We must also specify its height, otherwise Leaflet will not work properly:
```
<div id="map" style="height:200px;"></div>
```
Add our JS code by adding example.js:
```
<script src="example.js"></script>
```

Finally, add the code to create the map in example.js:

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
        attribution:'Copyright (C) OpenStreetMap.org',
        maxZoom:18
        }).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

How it works...

Most map libraries draw their maps by using a tile image layer. Tile image layers are grids of images with a predefined, fixed size. The images are sliced parts of the map, which has been pre-rendered and hosted on the tile servers.

The map uses discrete points of zoom called zoom levels. Different tile images are used at different zoom levels.

In some cases, especially at high zoom levels, the server renders the tiles on the fly as the space needed to cache the images exceeds reasonable storage space sizes. For example, OpenStreetMap uses 19 zoom levels. The first level uses a single tile, the second splits this tile into four tiles, the third uses 16, and so on. At the 19th zoom level, there are 48 billion tiles—assuming an average tile size of 10 KB, that would take 480 terabytes of storage.

When the user scrolls the map, tiles of previously unloaded areas are loaded on the fly and shown in the container. When the user changes a zoom level, tiles for the old zoom level are removed and new tiles are added.

In our example.js file, we use Leaflet's functions (found in the L namespace object) to create the map. The map is initialized with a center placed in London with the help of as array representing a [latitude, longitude] pair. The other parameter is the zoom level, which is set at 13.

Afterwards a tile layer is added. We specify the tile server pattern that OpenStreetMap uses as follows:

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

Where s is the server letter (a, b, or c), z is the zoom level and x and y are the discrete coordinates of the tile. For example, at zoom level 1, each of x and y can be either 1 or 2, while at zoom level 2 they can be in the range 1 to 4 and so on. We also specify the maximum zoom level available.

We add our own marker to the map. The initialization parameter is a [latitude, longitude] pair. Afterwards, we can add a pop up inside the marker showing text and/or arbitrary HTML. We open the pop up immediately.

Map drawn with Leaflet

官术网_书友最值得收藏!

HTML5 Data and Services Cookbook

Showing a map with a marked location

How to do it...

How it works...