Open Street Map is open data, licensed under the Creative Commons Attribution-ShareAlike 2.0 licence (CC-BY-SA). Note that while the map data is free, the service isn’t. Please read their license on their website. Open Layers is an open source map api – it could be used to access different map services like Yahoo Maps, Google Maps, and Open Street Map. The API is different from Google Maps. Aside from different API methods and objects, coordinates are in Longitude, Latitude while in Google Maps, the coordinates are in Latitude, Longitude. The map projections are also different, so in the code, you will notice some conversions between projections. The code sample below is the equivalent of the Google Maps implementation in my previous post. Marker is shown for the given location and a popup window will be displayed when the marker is clicked. An HTML div is used for the map display. A map object is created and the controls and layers are added to the map. An icon object is created for the marker, but in open layers you need to clone each icon object per marker. There are several styles of popups in open layers, I choose to use FramedCloud. The bounds object keeps track of multiple coordinates so that the center can be computed and the all the markers in the map can be displayed onscreen. The is only one popup at any time, the script keeps track of the last popup and close it before opening another one.

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Open Street Map</title>
        <style type="text/css">
            body { font: normal 10pt Helvetica, Arial; }
            #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
        </style>
        <script src="http://openlayers.org/dev/lib/OpenLayers.js" type="text/javascript"></script>
        <script type="text/javascript">
            //Sample code by August Li
            var iconSize = new OpenLayers.Size(21, 25);
            var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
            var icon = new OpenLayers.Icon("http://www.openstreetmap.org/openlayers/img/marker.png",
                           iconSize, iconOffset);
            var zoom, center, currentPopup, map, lyrMarkers;
            var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
                "autoSize": true,
                "minSize": new OpenLayers.Size(300, 50),
                "maxSize": new OpenLayers.Size(500, 300),
                "keepInMap": true
            });
            var bounds = new OpenLayers.Bounds();
            function addMarker(lng, lat, info) {
                var pt = new OpenLayers.LonLat(lng, lat)
                                       .transform(new OpenLayers.Projection("EPSG:4326"), 
                                       map.getProjectionObject());
                bounds.extend(pt);
                var feature = new OpenLayers.Feature(lyrMarkers, pt);
                feature.closeBox = true;
                feature.popupClass = popupClass;
                feature.data.popupContentHTML = info;
                feature.data.overflow = "auto";
                var marker = new OpenLayers.Marker(pt, icon.clone());
                var markerClick = function(evt) {
                    if (currentPopup != null && currentPopup.visible()) {
                        currentPopup.hide();
                    }
                    if (this.popup == null) {
                        this.popup = this.createPopup(this.closeBox);
                        map.addPopup(this.popup);
                        this.popup.show();
                    } else {
                        this.popup.toggle();
                    }
                    currentPopup = this.popup;
                    OpenLayers.Event.stop(evt);
                };
                marker.events.register("mousedown", feature, markerClick);
                lyrMarkers.addMarker(marker);
            }
            function initMap() {
                var options = {
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    units: "m",
                    numZoomLevels: 19,
                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
                };
                map = new OpenLayers.Map("map", options);
                map.addControl(new OpenLayers.Control.DragPan());
                var lyrOsm = new OpenLayers.Layer.OSM();
                map.addLayer(lyrOsm);
                lyrMarkers = new OpenLayers.Layer.Markers("Markers");
                map.addLayer(lyrMarkers);
                 //add marker on given coordinates
                addMarker(121.06573, 14.65194, '<b>University of the Philippines</b><br/>Philippines');
                addMarker(121.04931, 14.65105, '<b>Quezon Memorial Circle</b><br/>Philippines');
                center = bounds.getCenterLonLat();
                map.setCenter(center, map.getZoomForExtent(bounds) - 1);
                zoom = map.getZoom();
            }
        </script>
    </head>
    <body onload="initMap()" style="margin:0; border:0; padding:0;">
        <div id="map"></div>
    </body>
</html>

Advertisement

javascript, programming

, , ,

August 1, 2010

2 Comments