jOVI

jQuery wrapper for Nokia Maps API

by mmarcon

HTML

<script src="http://api.maps.ovi.com/jsl.js"></script>
<section id="control">
    <h1><span>jOVI</span> jQuery jOVI plugin test</h1>
</section>
<section id="map">
    
</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;
}

JavaScript

(function($) { /*** PRIVATE ***/
    var _map = null,
        _initMap = function(target, settings) {
            var components = [];
            //Setup components based on settings
            if (settings.behavior) {
                components.push(new ovi.mapsapi.map.component.Behavior());
            }
            if (settings.zoomBar) {
                components.push(new ovi.mapsapi.map.component.ZoomBar());
            }
            if (settings.scaleBar) {
                components.push(new ovi.mapsapi.map.component.ScaleBar());
            }
            if (settings.overview) {
                components.push(new ovi.mapsapi.map.component.Overview());
            }
            if (settings.viewControl) {
                components.push(new ovi.mapsapi.map.component.ViewControl());
            }
            if (settings.rightClick) {
                components.push(new ovi.mapsapi.map.component.RightClick());
            }
            if (settings.overlaySelector) {
                components.push(new ovi.mapsapi.map.component.OverlaysSelector());
            }
            if (settings.typeSelector) {
                components.push(new ovi.mapsapi.map.component.TypeSelector());
            }
            if (settings.searchManager && ovi.mapsapi.search.Manager) {
                components.push(new ovi.mapsapi.search.component.SearchComponent());
                components.push(new ovi.mapsapi.search.component.RightClick());
            }
            if (settings.routingManager && 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(target[0], {
                //zoom level for the map
                zoomLevel: settings.zoom,
                //center coordinates
               ...