Intro

We are pleased to annouce an upgrade to MapWrapper. Version beta-1.0.0 offers a number of improvements over previous versions. For a full list of changes, please consult the documentation. The biggest change is adding support for vector tiles, which offer performance benefits and more flexible viewing options. This tutorial explains how to upgrade from either MapWrapper beta-0.0.1 or MapWrapper beta-0.0.2 to MapWrapper beta-1.0.0.

MapWrapper beta-0.0.z Code

The code sample below is for a simple page that uses MapWrapper beta-0.0.2. This sample uses every piece of functionality in MapWrapper beta-0.0.1 and MapWrapper beta-0.0.2 that works differently MapWrapper beta-1.0.0. This tutorial will show each step required to upgrade this sample code to use MapWrapper beta-1.0.0.

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

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null;
            var prevMarkerPositions = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.OPENLAYERS,
                    tileSource: MapWrapper.TileSource.NETTOOLKIT,
                    elementId: "map",
                    center: new MapWrapper.Point({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                });
                initialMapView = map.getBoundary();

                // make it possible to add/move a marker by right clicking
                // on the map, track previous marker locations for undoMarkerMove()
                map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                    if(marker == null) {
                        marker = map.addMarker({
                            position: event.point,
                            color: "purple",
                        });
                    } else {
                        prevMarkerPositions.push(marker.getPosition());
                        marker.setPosition(event.point);
                        document.getElementById("marker-undo").removeAttribute("disabled");
                    }
                });

                // enable "Go to initial map view" button when the map bounds
                // are not the initial map view, disable it otherwise
                map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                    var newMapView = map.getBoundary();
                    if(newMapView.northeast.latitude !== initialMapView.northeast.latitude
                        || newMapView.northeast.longitude !== initialMapView.northeast.longitude
                        || newMapView.southwest.latitude !== initialMapView.southwest.latitude
                        || newMapView.southwest.longitude !== initialMapView.southwest.longitude) {
                        document.getElementById("to-init-view").removeAttribute("disabled");
                    } else {
                        document.getElementById("to-init-view").disabled = true;
                    }
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBoundary(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, polygonStyle);
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setPosition(prevMarkerPositions.pop());

                if(prevMarkerPositions.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>

1. MapWrapper files

The first step is to add the MapWrapper beta-1.0.0 files:

  • replace MapWrapper beta-0.0.z JavaScript file with MapWrapper beta-1.0.0 JavaScript file
  • add MapWrapper beta-1.0.0 CSS file
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/openlayers-latest.css" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null; 
            var prevMarkerPositions = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.OPENLAYERS,
                    tileSource: MapWrapper.TileSource.NETTOOLKIT,
                    elementId: "map",
                    center: new MapWrapper.Point({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                });
                initialMapView = map.getBoundary();
                
                // make it possible to add/move a marker by right clicking
                // on the map, track previous marker locations for undoMarkerMove()
                map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                    if(marker == null) {
                        marker = map.addMarker({
                            position: event.point,
                            color: "purple",
                        });
                    } else {
                        prevMarkerPositions.push(marker.getPosition());
                        marker.setPosition(event.point);
                        document.getElementById("marker-undo").removeAttribute("disabled");
                    }
                });
                
                // enable "Go to initial map view" button when the map bounds
                // are not the initial map view, disable it otherwise
                map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                    var newMapView = map.getBoundary();
                    if(newMapView.northeast.latitude !== initialMapView.northeast.latitude
                        || newMapView.northeast.longitude !== initialMapView.northeast.longitude
                        || newMapView.southwest.latitude !== initialMapView.southwest.latitude
                        || newMapView.southwest.longitude !== initialMapView.southwest.longitude) {
                        document.getElementById("to-init-view").removeAttribute("disabled");
                    } else {
                        document.getElementById("to-init-view").disabled = true;
                    }
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBoundary(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, polygonStyle);
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setPosition(prevMarkerPositions.pop());

                if(prevMarkerPositions.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>

2. Tile source

MapWrapper beta-1.0.0 replaced the tileSource MapOption with two new options: rasterTileSource and vectorTileStyle. There are a few different ways to update your code in this step.

1. Use NetToolKit raster tiles

If you are using NetToolKit raster tiles and wish to continue using them, simply remove the tileSource MapOption.

map = new MapWrapper.Map({
    provider: MapWrapper.Provider.OPENLAYERS,
    elementId: "map",
    center: new MapWrapper.Point({
        latitude: 38.8976,
        longitude: -77.0387
    }),
    zoom: 14,
});

2. Use raster tiles from another provider

If you want to raster tiles from a provider other than NetToolKit, use rasterTileSource in MapOptions to specify another raster tile source. For example:

map = new MapWrapper.Map({
    provider: MapWrapper.Provider.OPENLAYERS,
    rasterTileSource: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
    elementId: "map",
    center: new MapWrapper.Point({
        latitude: 38.8976,
        longitude: -77.0387
    }),
    zoom: 14,
});

3. Use NetToolKit vector tiles

To use NetToolKit vector tiles with MapWrapper beta-1.0.0:

  • remove tileSource: MapWrapper.TileSource.NETTOOLKIT,
  • change provider from MapWrapper.Provider.OPENLAYERS to MapWrapper.Provider.MAPBOX_GL_JS
  • remove OpenLayers JavaScript file and add Mapbox GL JS JavaScript file
  • remove OpenLayers CSS file and add Mapbox GL JS CSS file
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null; 
            var prevMarkerPositions = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.MAPBOX_GL_JS,
                    elementId: "map",
                    center: new MapWrapper.Point({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                });
                initialMapView = map.getBoundary();
                
                // make it possible to add/move a marker by right clicking
                // on the map, track previous marker locations for undoMarkerMove()
                map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                    if(marker == null) {
                        marker = map.addMarker({
                            position: event.point,
                            color: "purple",
                        });
                    } else {
                        prevMarkerPositions.push(marker.getPosition());
                        marker.setPosition(event.point);
                        document.getElementById("marker-undo").removeAttribute("disabled");
                    }
                });
                
                // enable "Go to initial map view" button when the map bounds
                // are not the initial map view, disable it otherwise
                map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                    var newMapView = map.getBoundary();
                    if(newMapView.northeast.latitude !== initialMapView.northeast.latitude
                        || newMapView.northeast.longitude !== initialMapView.northeast.longitude
                        || newMapView.southwest.latitude !== initialMapView.southwest.latitude
                        || newMapView.southwest.longitude !== initialMapView.southwest.longitude) {
                        document.getElementById("to-init-view").removeAttribute("disabled");
                    } else {
                        document.getElementById("to-init-view").disabled = true;
                    }
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBoundary(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, polygonStyle);
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setPosition(prevMarkerPositions.pop());

                if(prevMarkerPositions.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>

3. Map initialization callback

MapWrapper Beta-0.0.z accepted a callback in the MapWrapper.Map constructor but it was only necessary for maps with provider set to MapWrapper.Provider.BING. In MapWrapper Beta-1.0.0 this is necessary for all providers.

  • Move all code that requires the map to be initialized into a callback that is passed into the MapWrapper.Map constructor.
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null; 
            var prevMarkerPositions = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.MAPBOX_GL_JS,
                    elementId: "map",
                    center: new MapWrapper.Point({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                }, function() {
                    initialMapView = map.getBoundary();
                
                    // make it possible to add/move a marker by right clicking
                    // on the map, track previous marker locations for undoMarkerMove()
                    map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                        if(marker == null) {
                            marker = map.addMarker({
                                position: event.point,
                                color: "purple",
                            });
                        } else {
                            prevMarkerPositions.push(marker.getPosition());
                            marker.setPosition(event.point);
                            document.getElementById("marker-undo").removeAttribute("disabled");
                        }
                    });
                
                    // enable "Go to initial map view" button when the map bounds
                    // are not the initial map view, disable it otherwise
                    map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                        var newMapView = map.getBoundary();
                        if(newMapView.northeast.latitude !== initialMapView.northeast.latitude
                            || newMapView.northeast.longitude !== initialMapView.northeast.longitude
                            || newMapView.southwest.latitude !== initialMapView.southwest.latitude
                            || newMapView.southwest.longitude !== initialMapView.southwest.longitude) {
                            document.getElementById("to-init-view").removeAttribute("disabled");
                        } else {
                            document.getElementById("to-init-view").disabled = true;
                        }
                    });
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBoundary(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, polygonStyle);
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setPosition(prevMarkerPositions.pop());

                if(prevMarkerPositions.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>

4. Location, location, location

MapWrapper Beta-0.0.z has a lot of different words for describing latitude/longitude pairs. MapWrapper Beta-1.0.0 has one word for this: location.

  • change MapWrapper.Point to MapWrapper.Location
  • change event.point to event.location
  • change marker.getPosition() to marker.getLocation()
  • change marker.setPosition() to marker.setLocation()
  • change position field on marker options object to location

Update variables and function names outside of MapWrapper that use the MapWrapper Beta-0.0.z language for latitude/longitude pairs. While this step is not strictly necessary, it will help maintain code readability.

  • rename prevMarkerPositions to prevMarkerLocations
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null; 
            var prevMarkerLocations = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.MAPBOX_GL_JS,
                    elementId: "map",
                    center: new MapWrapper.Location({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                }, function() {
                    initialMapView = map.getBoundary();
                
                    // make it possible to add/move a marker by right clicking
                    // on the map, track previous marker locations for undoMarkerMove()
                    map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                        if(marker == null) {
                            marker = map.addMarker({
                                location: event.location,
                                color: "purple",
                            });
                        } else {
                            prevMarkerLocations.push(marker.getLocation());
                            marker.setLocation(event.location);
                            document.getElementById("marker-undo").removeAttribute("disabled");
                        }
                    });
                
                    // enable "Go to initial map view" button when the map bounds
                    // are not the initial map view, disable it otherwise
                    map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                        var newMapView = map.getBoundary();
                        if(newMapView.northeast.latitude !== initialMapView.northeast.latitude
                            || newMapView.northeast.longitude !== initialMapView.northeast.longitude
                            || newMapView.southwest.latitude !== initialMapView.southwest.latitude
                            || newMapView.southwest.longitude !== initialMapView.southwest.longitude) {
                            document.getElementById("to-init-view").removeAttribute("disabled");
                        } else {
                            document.getElementById("to-init-view").disabled = true;
                        }
                    });
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBoundary(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, polygonStyle);
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setLocation(prevMarkerLocations.pop());

                if(prevMarkerLocations.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>

5. Bounds

MapWrapper Beta-0.0.z sometimes uses "bounds" and somtimes uses "boundary" to describe the map viewport bounds, MapWrapper Beta-1.0.0 only uses "bounds".

  • change map.getBoundary() to map.getBounds()
  • change map.setBoundary() to map.setBounds()

MapWrapper beta-1.0.0 provides an equals() method in the Location class that can be used to compare two locations.

  • use the equals() method to help with the comparison of newMapView and initialMapView. (This change is not required but it will help to make the code more concise and readable)
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null; 
            var prevMarkerLocations = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.MAPBOX_GL_JS,
                    elementId: "map",
                    center: new MapWrapper.Location({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                }, function() {
                    initialMapView = map.getBounds();
                
                    // make it possible to add/move a marker by right clicking
                    // on the map, track previous marker locations for undoMarkerMove()
                    map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                        if(marker == null) {
                            marker = map.addMarker({
                                location: event.location,
                                color: "purple",
                            });
                        } else {
                            prevMarkerLocations.push(marker.getLocation());
                            marker.setLocation(event.location);
                            document.getElementById("marker-undo").removeAttribute("disabled");
                        }
                    });
                
                    // enable "Go to initial map view" button when the map bounds
                    // are not the initial map view, disable it otherwise
                    map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                        var newMapView = map.getBounds();
                        if(!newMapView.northeast.equals(initialMapView.northeast)
                            || !newMapView.southwest.equals(initialMapView.southwest)) {
                            document.getElementById("to-init-view").removeAttribute("disabled");
                        } else {
                            document.getElementById("to-init-view").disabled = true;
                        }
                    });
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBounds(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, polygonStyle);
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setLocation(prevMarkerLocations.pop());

                if(prevMarkerLocations.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>

6. Features

In MapWrapper beta-1.0.0 map.addFeatures() returns an array of Feature instances and map.removeFeatures() takes in an array of Feature instances. In MapWrapper beta-0.0.z these methods operated on arrays of feature ids. It probably isn't necessary to update any code for these changes unless your application is using the array of feature ids for anything other than removing features.

The shape of the FeatureOptions object in MapWrapper Beta-1.0.0 is slightly different from the FeatureOptions object in MapWrapper Beta-0.0.z.

  • update the shape of FeatureOptions object
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapbox-gl-js-latest.css" />
        <link rel="stylesheet" href="https://api.nettoolkit.com/geo/mapwrapper-beta-1.0.0.css?key=your_ntk_api_key_here" />

        <style>
            #map {
                height: 400px;
                width: 800px;
                margin-bottom: 8px;
            }
            button {
                width: 220px;
            }
        </style>
    </head>
    <body>
        <!-- Anchor element for the map -->
        <div id="map"></div>

        <!-- Map controls -->
        <button id="to-init-view" onclick=goToInitialMapView() disabled>Go to initial map view</button>
        <button id="toggle-polygon" onclick=togglePolygon()>Add polygon</button>
        <button id="marker-undo" disabled onclick=undoMarkerMove()>Undo marker move</button>

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

        <script type="text/javascript">
            var initialMapView = null;
            var map = null;
            var features = null; 
            var prevMarkerLocations = [];
            var marker = null;
            var polygon = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[
                        [ -77.0690, 38.9100 ],
                        [ -77.0603, 38.9100 ],
                        [ -77.0622, 38.9078 ],
                        [ -77.0603, 38.9054 ],
                        [ -77.0650, 38.9068 ],
                        [ -77.0690, 38.9054 ],
                        [ -77.0675, 38.9076 ],
                        [ -77.0690, 38.9100 ]
                    ]]
                }
            }
            var polygonStyle = {
                strokeWeight: 1,
                strokeColor: "#0d7cef",
                fillColor: "#0d7cef77"
            }

            function initMap() {
                map = new MapWrapper.Map({
                    provider: MapWrapper.Provider.MAPBOX_GL_JS,
                    elementId: "map",
                    center: new MapWrapper.Location({
                        latitude: 38.8976,
                        longitude: -77.0387
                    }),
                    zoom: 14,
                }, function() {
                    initialMapView = map.getBounds();
                
                    // make it possible to add/move a marker by right clicking
                    // on the map, track previous marker locations for undoMarkerMove()
                    map.addEventListener(MapWrapper.Event.RIGHT_CLICK, function(event) {
                        if(marker == null) {
                            marker = map.addMarker({
                                location: event.location,
                                color: "purple",
                            });
                        } else {
                            prevMarkerLocations.push(marker.getLocation());
                            marker.setLocation(event.location);
                            document.getElementById("marker-undo").removeAttribute("disabled");
                        }
                    });
                
                    // enable "Go to initial map view" button when the map bounds
                    // are not the initial map view, disable it otherwise
                    map.addEventListener(MapWrapper.Event.BOUNDS_CHANGED, function(event) {
                        var newMapView = map.getBounds();
                        if(!newMapView.northeast.equals(initialMapView.northeast)
                            || !newMapView.southwest.equals(initialMapView.southwest)) {
                            document.getElementById("to-init-view").removeAttribute("disabled");
                        } else {
                            document.getElementById("to-init-view").disabled = true;
                        }
                    });
                });
            }

            // Button click handlers
            function goToInitialMapView() {
                map.setBounds(initialMapView);
            }

            function togglePolygon () {
                if(features && features.length > 0) {
                    map.removeFeatures(features);
                    features = null;
                    document.getElementById("toggle-polygon").innerHTML = "Add polygon";
                } else {
                    features = map.addFeatures(polygon, { style: polygonStyle });
                    document.getElementById("toggle-polygon").innerHTML = "Remove polygon";
                }
            }

            function undoMarkerMove() {
                marker.setLocation(prevMarkerLocations.pop());

                if(prevMarkerLocations.length == 0) {
                    document.getElementById("marker-undo").disabled = true;
                }
            }
            
            initMap();
        </script>
    </body>
</html>