HTML

now browsing by category

html

 

KML Layer On Google Map

html5


Keyhole Markup Language (KML) is an XML notation for expressing geographic annotation and visualization within Internet-based, two-dimensional maps and three-dimensional Earth browsers. KML was developed for use with Google Earth, and became an international standard of the Open Geospatial Consortium in 2008.

For its reference system, KML uses 3D geographic coordinates: longitude, latitude and altitude, with negative values for west, south and below mean sea level if the altitude data is available. The longitude, latitude components (decimal degrees are as defined by the World Geodetic System of 1984 (WGS84). The vertical component (altitude) is measured from the WGS84 EGM96 Geoid vertical datum. If altitude is omitted from a coordinate string, then the default value of 0 (approximately sea level) is assumed for the altitude component.

Here is an example of kml layer on top of a Google map.

Show/Hide KML Layer

Use the toggle to activate/deactivate it. You can view some statistics about each individual states by clicking on it. All this information is part of the kml file.
You can create KML files with the Google Earth user interface, or you can use an XML or simple text editor to enter “raw” KML from scratch. Another way to obtain a KML file is by converting other GIS (Geographic Information System) file formats (see link) using one of the available tools.

Google Maps supports just a subset of the KML standard, more precisely the following KML elements: placemarks, icons, folders, polylines, polygons, ground/screen overlays and network links.

There are also size and complexity restrictions for KML rendering in Google Maps. At the time of writing this article they were:
- Maximum fetched file size 3MB
- Maximum uncompressed KML file size 10MB
- Maximum number of Network Links 10
- Maximum number of total document-wide features 1,000
- Maximum number of KML layers on a single map: between 10 and 20 layers

The 3Mb file size restriction can be quickly reached, good thing KML files can be and are often distributed in KMZ files, which are zipped (version 2.0) KML files with a .kmz extension. The contents of a KMZ file are a single root KML document and optionally any overlays, images, icons, models referenced in the KML. To share your KML and KMZ files, you can e-mail them, host them locally for sharing within a private internet, or host them publicly on a web server. Very important in this phrase is the word publicly. If you want to use the kml/kmz file as a layer on a google map component, the Google API needs to have unrestricted access to the file, so in case your layer fails to show up (with no error) this may be what you are doing wrong.

If you are hosting your own kml/kmz files, make sure your server is configured to correctly deliver them.  The MIME type should be

- KML files: application/vnd.google-earth.kml+xml
- KMZ files: application/vnd.google-earth.kmz

To do just that, if you are using Apache, add these lines to the httpd.conf file:
- AddType application/vnd.google-earth.kml+xml .kml
- AddType application/vnd.google-earth.kmz .kmz

Another trick you can use to keep the filesize down is to use generic styles for polylines and polygons, etc (color, fill, and opacity, etc). On one occasion, I had a KML file obtained by merging a series of shapefiles (using QGis) that had more than 600,000 lines. When studying it, I realized that every element was containing similar style markup. By manually (with a text editor) creating and using a generic style, I was able to get to a 400,000 lines.

The code for the presented example, is pretty simple. You can just copy/paste the following code into a text file with *.html extension, and you will be able to see it at work when opened in a browser.

[html]
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        var map, layer;
               function initialize() {
    	          var mapOptions = {
		    zoom: 4,
		    center: new google.maps.LatLng(41.875,-87.624)
		  }

		  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		  layer = new google.maps.KmlLayer({
		    url: 'https://developers.google.com/kml/documentation/us_states.kml'
		  });
		  //layer.setMap(map);
		}

		google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 600px; height: 300px;"></div>
    <a href="#" onclick="layer.setMap(layer.getMap() ? null : map);">Show/Hide KML Layer</a>
  </body>
</html>

And if you want to take a look over the original kmz file you can do just that by downloading it from here. Use a tool like 7z, WinRar or similar to view its content.

Calling Google Geocoding API Using Javascript

html5


So here is our use case. Considering we have postal addresses for certain entities (it can be stores, clients, etc) stored somewhere on our servers. We wanted to pin all these addresses on a world map to have an overview of how all these addresses are dispersed.

First thing we have to do is find the geo-coordinates for all these addresses. Geocoding is the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739).

Google provides a free service (with some limitations) exactly for this purpose. All we have to do is send a request like this http://maps.googleapis.com/maps/api/geocode/output?parameters (Note: parameters should be as expected, read more from here). Easy enough.

For simplicity, we decided to call this service straight from a html page via JavaScript. This didn’t really work because of a small thing called “Same-origin policy“. In short, The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin.

The following is an example of how we ended using google.maps.Geocoder (part of Client-side Geocoding API) to populate some latitude/longitude text fields with values received from querying the Google Geocoding API via JavaScript. Fill in the form using the address of your choice and press the “Refresh Coordinates” button. The latitude and longitude fields will be refreshed using the result we get from the Google Geocoding API.

 

















 

The html code behind this is:


<label for="address1">Address 1:</label>
<input id="address1" type="text" name="address1" value="" />

<label for="address2">Address 2:</label>
<input id="address2" type="text" name="address2" value="" />

<label for="city">City:</label>
<input id="city" type="text" name="city" value="" />

<label for="state">State:</label>
<input id="state" type="text" name="state" value="" />

<label for="country">Country:</label>
<input id="country" type="text" name="country" value="" />

<label for="postalCode">Postal code:</label>
<input id="postalCode" type="text" name="postalCode" value="" />

<label for="latitude">Latitude:</label>
<input id="latitude" type="text" name="latitude" value="" />

<label for="longitude">Longitude:</label>
<input id="longitude" type="text" name="longitude" value="" />

<button id="refreshCoordinates" type="button">Refresh Coordinates</button>

The javascript code (using jQuery) that does the magic:

jQuery(document).ready(function () {
    var geocoder = new google.maps.Geocoder();
    jQuery("#refreshCoordinates").click(function() { 
            var address = jQuery('#address1').val() + ' ' + jQuery('#address2').val() + ' ' + jQuery('#city').val() + 
                         ' ' + jQuery('#state').val() + ' ' +  jQuery('#postalCode').val();
            geocoder.geocode({"address" : address}, function(results, status) {
              if (status === google.maps.GeocoderStatus.OK) {
                      jQuery('#latitude').val(results[0].geometry.location.k);
                      jQuery('#longitude').val(results[0].geometry.location.B);
              } else {
                    alert("Geocoding failed: " + status);
              }
           });        
    });
});

Oh, and don’t forget to add this to your page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Firefox OS is ready to launch

html5

 

Firefox OS is a new mobile operating system developed by Mozilla’s Boot to Gecko (B2G) project. It uses a Linux kernel and boots into a Gecko-based runtime engine, which lets users run applications developed entirely using HTML, JavaScript, and other open Web application APIs.

It is designed to allow HTML5 applications to integrate directly with the device’s hardware using JavaScript. So far, this JavaScript powered OS has been demonstrated on Android-compatible smartphones, and the Raspberry Pi.

Firefox OS is an attempt to push the Web forward into the world of physical devices. The first smartphones running Firefox OS should be released in the first half of 2013. It will first be released in South America, and will later come to Asian and European markets

Firefox OS will allow building applications using the technologies that we already use to build websites; namely JavaScript, CSS, and HTML.The applications will be written once and will be run native on Firefox OS, or using a browser in all the other mobile operating systems. Sounds like Firefox OS is the start of something huge, a revolution in waiting, a new operating system that will shape the future.

FirefoxOS

Developers that want to start testing their Html5 application on the new Firefox OS now have the possibility to use this Firefox add on called “Firefox OS Simulator” which is a test environment for Firefox OS, that looks and feels like a mobile phone.

To install it, use the usual way: in Firefox, select Tools -> Add-ons, or Ctrl+Shift+A, and search for Firefox OS.