MapWrapper Quick Start

Intro

MapWrapper is a JavaScript library that simplifies the development of web pages that use dynamic maps.

MapWrapper can act as a layer between your code and map providers such as Google, Bing, and OpenLayers; this level of indirection allows you to easily switch underlying map providers without having to change much code.

Even if you do not plan on switching map providers, MapWrapper simplifies the customization of information windows, allowing you to style them the way you want. MapWrapper's information windows are not constrained by the boundaries of the map, and open intelligently, taking into consideration how much room is left between the marker and the browser window boundaries.

A few things to note:

  • To get started, use a div and pass the id into the map constructor; this div is where the map will be anchored in the DOM
  • The anchor div needs to have a height set
  • The script for the underlying map needs to be loaded on the page before the map is initialized

Google Sample Code

<!DOCTYPE html>
<html>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>
        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com/geo/mapwrapper-0.0.1.js?key=your_ntk_api_key_here"></script>

        <script type="text/javascript">
            function initMap() {
                var map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.GOOGLE,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    zoom: 14,
                });
                map.addMarker({
                    position: {
                        latitude: 38.8892,
                        longitude: -77.0523
                    },
                    color: "purple",
                });
            }
        </script>
        <!-- Google Map -->
        <script async type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your_google_api_key_here&callback=initMap"></script> 
    </body>
</html>

Google accepts a callback function to be executed when their scripts are finished loading. We recommend putting your map initialization code in this function.

https://maps.googleapis.com/maps/api/js?key=your_google_api_key_here&callback=initMap

Bing Sample Code

<!DOCTYPE html>
<html>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>
        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com//geo/mapwrapper-0.0.1.js?key=your_ntk_api_key_here"></script>

        <script type="text/javascript">
            function initMap() {
                var map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.BING,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    zoom: 14,
                });

                map.addMarker({
                    position: {
                        latitude: 38.8892,
                        longitude: -77.0523
                    },
                    color: "purple",
                });
            }
        </script>
        <!-- Bing Map -->
        <script src="https://www.bing.com/api/maps/mapcontrol?key=your_bing_api_key_here&callback=initMap"></script>
    </body>
</html>

Bing accepts a callback function to be executed when their scripts are finished loading. We recommend putting your map initialization code in this function.

https://www.bing.com/api/maps/mapcontrol?key=your_bing_api_key_here&callback=initMap

OpenLayers Sample Code

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" >
    </head>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>
        <!-- OpenLayers Map -->
        <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com/geo/mapwrapper-0.0.1.js?key=your_ntk_api_key_here"></script>

        <script type="text/javascript">
            function initMap() {
                var map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.OPENLAYERS,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    tileSource: MapWrapper.TileSource.NETTOOLKIT,
                    zoom: 14,
                });

                map.addMarker({
                    position: {
                    latitude: 38.8892,
                        longitude: -77.0523
                    },
                    color: "purple",
                });
            }

            initMap();
        </script>
    </body>
</html>

OpenLayers is itself a powerful JavaScript library that works with tiles to render a dynamic map. While OpenLayers itself offers many possibilities for customization, MapWrapper streamlines development by abstracting many of the details into an interface that more closely resembles that of other JavaScript mapping libraries. In this example, MapWrapper is configured to use OpenLayers as the provider and NetToolKit as the tile server.

OpenLayers does not trigger a callback for initialization. Instead, you should call your initialization function directly.

OpenLayers requires a stylesheet in addition to its JavaScript file.

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" >