New weapons for your webmaps!

Our latest version of the JavaScript API (version 3.7) includes new map widgets for you to take advantage of and make killer apps.

While creating web applications to aid our Disaster Response program, we noticed some commonly used mapping elements that didn’t exist outside of our templates. In order to save others development time and effort, we converted them to widgets and put them in the API.

BasemapToggle
Need an easy way to switch back and forth between two different basemaps on a map? The BasemapToggle provides a simple button that alternates between two basemaps. A thumbnail and a label are used to show the alternate basemap.

HomeButton
Have you ever navigated around a map, found yourself lost and wanted to get back to where you started? The HomeButton widget is a simple button that captures the initial extent (bounding box) of a map and allows the user to go back to that extent at any time. If your app has users exploring multiple areas this may be a helpful widget for them.

LocateButton
The LocateButton uses browser’s Geolocation API to center the map at the user’s location and sets the map’s scale according to the accuracy of the value returned. This is helpful if your app frequently used on mobile or users will commonly use your mapping app to view their position. It requires a modern web browser.

LayerSwipe
Last but not least, the LayerSwipe widget allows you to reveal part of a layer(s) over a map by dragging a handle on the widget. You may have experienced one of these tools using the Storytelling Swipe template or in a map on Smithsonian.com. You can swipe one or more layers horizontally, vertically or using a scope tool by dragging.

All widgets are written in JavaScript using Asynchronous Module Definition (AMD) and can easily be skinned to match your website or application’s interface. More curious developers can dive into the code on GitHub. We look forward to seeing your apps and hearing your feedback!

This entry was posted in App Developers, Developer, Mapping, Story Maps, Web and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

2 Comments

  1. Sunil Palkar says:

    Super cool stuff !!!
    thanks..

  2. oreng says:

    Thanks I was just thinking writing the Swipe tool myself…
    Already wrote the first three thou.
    Oren Gal
    http://gisn.tel-aviv.gov.il/iview2js/index.aspx