MapWrapperBeta Quick Start

IntroMapWrapper Beta-1.0.0

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 mapping libraries such as Mapbox GL JS and OpenLayers, as well as mapping providers such as Google and Bing; 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

Mapbox GL JS

Mapbox GL JS is for use in conjunction with vector tiles, which is our recommendation. Vector tiles include benefits such as better performance and more flexibility in terms of rendering/viewing. Mapbox GL JS is an open-source library published by Mapbox and does not require the use of Mapbox tiles.


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />
    </head>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>

        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.js?key=your_ntk_api_key_here"></script>
        
        <!-- Mapbox GL JS Map -->
        <script src="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.js"></script>

        <script type="text/javascript">
            function initMap() {
                new MapWrapper.Map({
                    provider: MapWrapper.Provider.MAPBOX_GL_JS,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    zoom: 14,
                }, onMapReady);
            }
            
            function onMapReady(map) {
                map.addEventListener(MapWrapper.Event.CLICK, function(event) {
                    map.addMarker({
                        location: event.location,
                        color: "purple",
                    });
                });
            }
            
            initMap();
        </script>
    </body>
</html>

Mapbox GL JS does not trigger a callback for initialization. Instead, you should call your initialization function directly (in this case, initMap).

Mapbox GL JS requires a stylesheet in addition to its JavaScript file.

<link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />

OpenLayers

OpenLayers is 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 with NetToolKit raster tiles.


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/openlayers-latest.css" />
    </head>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>

        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.js?key=your_ntk_api_key_here"></script>
        
        <!-- OpenLayers Map -->
        <script src="https://api.nettoolkit.com/geo/openlayers-latest.js"></script>

        <script type="text/javascript">
            function initMap() {
                new MapWrapper.Map({
                    provider: MapWrapper.Provider.OPENLAYERS,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    zoom: 14,
                }, onMapReady);
            }
            
            function onMapReady(map) {
                map.addEventListener(MapWrapper.Event.CLICK, function(event) {
                    map.addMarker({
                        location: event.location,
                        color: "purple",
                    });
                });
            }
            
            initMap();
        </script>
    </body>
</html>

OpenLayers does not trigger a callback for initialization. Instead, you should call your initialization function directly (in this case, initMap).

OpenLayers requires a stylesheet in addition to its JavaScript file.

<link rel="stylesheet" href="https://api.nettoolkit.com/geo/openlayers-latest.css" />

Google


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />
    </head>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>

        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.js?key=your_ntk_api_key_here"></script>

        <script type="text/javascript">
            function initMap() {
                new MapWrapper.Map({
                    provider: MapWrapper.Provider.GOOGLE,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    zoom: 14,
                }, onMapReady);
            }
            
            function onMapReady(map) {
                map.addEventListener(MapWrapper.Event.CLICK, function(event) {
                    map.addMarker({
                        location: event.location,
                        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


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />
    </head>
    <body>
        <div id="map" style='height: 400px; width: 800px'></div>

        <!-- MapWrapper -->
        <script type="text/javascript" src="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.js?key=your_ntk_api_key_here"></script>

        <script type="text/javascript">
            function initMap() {
                new MapWrapper.Map({
                    provider: MapWrapper.Provider.BING,
                    elementId: "map",
                    center: {
                        latitude: 38.8976,
                        longitude: -77.0387
                    },
                    zoom: 14,
                }, onMapReady);
            }
            
            function onMapReady(map) {
                map.addEventListener(MapWrapper.Event.CLICK, function(event) {
                    map.addMarker({
                        location: event.location,
                        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