Experimenting with Nokia Maps

by mmarcon

HTML

<script src="http://api.maps.ovi.com/jsl.js"></script>
<section id="control">
    <h1><span>NOKIA</span> Maps API Example</h1>
</section>
<section id="map">
    
</section>
<section id="log">
    
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600);

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

#control {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
}

h1 {
    color: #333;
    font-size: 16px;
}

h1 span {
    color: rgb(38, 65, 143);
    font-size: 24px;
    font-weight: 600;
    margin-right: 10px;
}

#log {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    color: #333;
    padding: 5px;
    font-size: 14px;
}

JavaScript

var NokiaMapTest = function() {
    var map;
    var setupMap = function(where, places) {
        var components = [
            new ovi.mapsapi.map.component.Behavior(),
            new ovi.mapsapi.map.component.ZoomBar(),
            new ovi.mapsapi.map.component.ScaleBar(),
            new ovi.mapsapi.map.component.Overview(),
            new ovi.mapsapi.map.component.ViewControl(),
            new ovi.mapsapi.map.component.RightClick(),
            new ovi.mapsapi.map.component.OverlaysSelector()
            ];
        if (ovi.mapsapi.search.Manager) {
            components.push(new ovi.mapsapi.search.component.SearchComponent());
            components.push(new ovi.mapsapi.search.component.RightClick());
        }
        if (ovi.mapsapi.routing.Manager) {
            if (ovi.mapsapi.search.Manager) components.push(new ovi.mapsapi.routing.component.RouteComponent());
            components.push(new ovi.mapsapi.routing.component.RightClick());
        }
        map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
            //zoom level for the map
            zoomLevel: 10,
            //center coordinates
            center: where,
            components: components
        });
        var i;
        for (i = 0; i < places.length; i++) {
            placeMarker ([parseFloat(places[i].Latitude, 10), parseFloat(places[i].Longitude, 10)]);
        }
        log ('Done.');
    };
    
    var placeMarker = function (where) {
        map.objects.add (new ovi.mapsapi.map.Marker(where));
    };

    var retrievePlaces = function(where) {
        where = (where && where.coords) ? [where.coords.latitude, where.coords.longitude] : [29.187778, -82.130556];
        
        var yql = "select * from local.search where query='pizza' and latitude='" + where[0] + "' and longitude='" + where[1] + "' and radius='20'";
        yql = encodeURIComponent(yql);
        yql = 'http://query.yahooapis.com/v1/public/yql?callback=?&format=json&q=' + yql;
        
    ...