Links
Comment on page

NavScript

Programmable maps to help you better understand the world
NavScript is Navigate's domain-specific language (DSL) for interacting with Navigate Maps.
With the goal to help you explore map data in a better and easier way than ever before, NavScript provides a simple and intuitive syntax for common map-related tasks such as adding markers, adding geojson, changing the map style, and more.
This is just the initial release of NavScript, so keep an eye out for many new structures and functions in 2023 that will reshape how you interact with the high-resolution, crowdsourced data in Navigate Maps.

Table of Contents

Data Types

The language includes the following data types:
  • number for numeric values
  • string for textual values
  • boolean for true/false values
  • array for ordered lists of values
  • object for collections of key-value pairs
Here is an example usage of different data types in the language:
const a = 5; // number
const b = "hello"; // string
const c = true; // boolean
const d = [1, 2, 3]; // array
const e = { // object
name: "John",
age: 30,
address: {
street: "123 Main St",
city: "Anytown",
state: "CA"
}
};

Control Structures:

Coming soon...

Primitive Functions:

Primitive functions are built-in functions that provide basic functionality to the NavScript.

sleep

sleep(ms: number) => Promise
The sleep function is used to pause execution of the script for a given number of milliseconds.
Example usage:
sleep(1000); // pause execution for one second

zoom

zoom(level: number) => Promise
The zoom function is used to zoom the map to a specific level. The level argument must be between 0 and 22.
Example usage:
zoom(10); // zoom the map to level 10

setStyle

setStyle(style: string) => Promise
The setStyle function is used to change the style of the map. The style argument must be a string and can be one of "satellite" or "street".
Example usage:
setStyle("satellite"); // change the map style to satellite view

moveLocation

moveLocation(coordinates: [number, number]) => Promise
The moveLocation function is used to move the map to a specific location. The coordinates argument must be an array of two numbers representing the longitude and latitude of the location.
Example usage:
moveLocation([-122.4194, 37.7749]); // move the map to San Francisco

addText

addText(text: string, locationOnMap: [number, number]) => Promise
The addText function is used to add text to the map at a specific location. The text argument must be a string and the locationOnMap argument must be an array of two numbers representing the longitude and latitude of the location.
Example usage:
addText("Hello, World!", [-122.4194, 37.7749]); // add the text "Hello, World!" to San Francisco

rotateTo

rotateTo(bearing: number) => Promise
The rotateTo function is used to rotate the map to a specific bearing (in degrees).
Example usage:
rotateTo(90); // rotate the map 90 degrees clockwise

addGeojson

addGeojson(name: string, geojson: object) => void
The addGeojson function is used to add a GeoJSON source to the map. The name argument must be a string and the geojson argument must be a valid GeoJSON object.
Example usage:
addGeojson("myGeojson", {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-122.4194, 37.7749],
},
properties: {
name: "San Francisco",
},
},
],
}); // add a GeoJSON point feature to the map

removeGeojson

removeGeojson(name: string) => void
The removeGeojson function removes a GeoJSON layer and its associated source from the map. It takes a name argument which is the name of the layer to remove. The name argument must be a string.
Example usage:
removeGeojson("myGeojson");

addMarker

addMarker(coordinates: [number, number], color: string) => void
The addMarker function adds a marker to the map. It takes two arguments, coordinates and color. The coordinates argument is an array of two numbers representing the longitude and latitude of the marker's position on the map. The color argument is a string representing the color of the marker. The color can be specified as a hex code or as a named color. If the color argument is not provided, the marker will be red by default.
Example usage:
// Add a red marker at [-97.73890837139714, 30.433607100113203]
addMarker([-97.73890837139714, 30.433607100113203]);
// Add a blue marker at [-97.73890837139714, 30.433607100113203]
addMarker([-97.73890837139714, 30.433607100113203], "#0000ff");

addVideo

addVideo(coordinates: [number, number], url: string) => void
The addVideo function adds a marker to the map that, when clicked, displays a video player with the specified video URL. It takes two arguments, coordinates and url. The coordinates argument is an array of two numbers representing the longitude and latitude of the marker's position on the map. The url argument is a string representing the URL of the video to be played.
Example usage:
addVideo([-97.73890837139714, 30.433607100113203], "https://www.youtube.com/watch?v=dQw4w9WgXcQ");

Examples:

Here is an example of NavScript code:
// Display a marker and move to a location
addMarker([-97.73890837139714, 30.433607100113203], "#FF0000");
moveLocation([-97.74, 30.43]);
sleep(2000);
moveLocation([-97.75, 30.44]);
// Add a video player marker and play a video
addVideo([-97.74, 30.43], "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
// Add a GeoJSON polygon and zoom to fit it on the screen
const polygon = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[-97.735, 30.433],
[-97.735, 30.437],
[-97.73, 30.437],
[-97.73, 30.433],
[-97.735, 30.433]
]]
}
};
addGeojson("polygon", polygon);
sleep(2000);
zoom(12);
sleep(2000);
setStyle("street");
sleep(2000);
removeGeojson("polygon");