using mapbox-gl with deno

Question

I'am trying to use mapbox with deno

Actually i'am trying this :

import mapboxgl from 'https://dev.jspm.io/mapbox-gl';

mapboxgl.accessToken =  "toto";

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
  });

based on : How to use npm module in DENO?

using jspm I have too many error when i try i have a :

esModuleInterop, module, target
error: TS2339 [ERROR]: Property 'accessToken' does not exist on type '{}'.
mapboxgl.accessToken =  "toto";
         ~~~~~~~~~~~
    at file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts:10:10

TS2339 [ERROR]: Property 'Map' does not exist on type '{}'.
var map = new mapboxgl.Map({
                       ~~~
    at file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts:12:24

i've also tried :

import {  mapboxgl } from "./../../libs/mapbox/2_1_1/mapbox-gl.js";

mapboxgl.accessToken =  "toto";

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
  });

But i have a :

Unsupported compiler options in "templateV2/source/deno/Mapbox/tsconfig.json".
  The following options were ignored:
    esModuleInterop, module, target
Bundle file:///home/bussiere/Workspace/GreatParis/templateV2/source/deno/Mapbox/map.ts
Emit "../compiled/map.js" (1.45MB)
error: Uncaught (in promise) RuntimeError: unreachable
    at <anonymous> (wasm://wasm/00247702:1:336403)
    at <anonymous> (wasm://wasm/00247702:1:341096)
    at <anonymous> (wasm://wasm/00247702:1:339419)
    at <anonymous> (wasm://wasm/00247702:1:339781)
    at <anonymous> (wasm://wasm/00247702:1:336272)
    at <anonymous> (wasm://wasm/00247702:1:268321)
    at minify (wasm://wasm/00247702:1:253183)
    at minify (https://deno.land/x/[email protected]/wasm.js:98:14)
    at minify (https://deno.land/x/[email protected]/mod.ts:27:10)
    at https://deno.land/x/[email protected]/cli.ts:53:3

here is my tsconfig.json :

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom","es2015","DOM"],                    /* Specify library files to be included in the compilation. */
    
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "strictNullChecks": false,              /* Enable strict null checks. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
 
  }
}

Does anyone manage to use mapbox-gl with deno ?

Regards

Felisafelise

Deno is a server-side runtime, while mapbox-gl is a browser package for rendering to the DOM. Even if you could get the types working, I don't believe you'll have any luck actually doing anything with the result. – Zarzuela

For what it's worth, the error you're seeing when using JSPM was introduced in Deno 1.5.0, likely by the switch to a new tsc infrastructure internally and/or enabling isolatedModules by default (see the changelog). You can run that code with 1.4.0 or earlier, just do deno upgrade --version 1.4.0. – Zarzuela

Answer 1

In its package.json mapbox-gl-js describes itself as "a WebGL interactive maps library". It expects to run in a browser, with access to the DOM and WebGL (a technology to render graphics efficiently).

There can be two reasons I can think of to want to run it with Deno:

1. Adding map visualizations to a webapp that already uses Deno. In this case, it's easy. You don't want Deno to run mapbox-gl. What you really want is that Deno serves webpages with some static javascript that will be executed in the browser (not the server) and run mapbox-gl. To go this way, configure Deno to serve th HTML in this example: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

2. Programatically generating raster images (PNG, ...) of maps. For instance you might want to save a map of a city automatically from its latitude and longitude, with all the style and options that mapbox-gl provides. This is usually called a "static map API". You don't necessarily need to run it yourself, here is Mapbox's documentation for this API (50,000 free / month). If your really want to run it yourself, see below.

Running mapbox-gl on a server

Using mapbox-gl-js without a browser would require you to emulate the DOM and WebGL. But there is actually a simpler way generate static mapx: mapbox-gl-native. It expects rendering libraries that are easier (and more performant?) to provide on a server.

One project that accomplishes that is tileserver-gl. Its source code is quite small, you could get guidance from that. Part of the problem of using mapbox-gl-native will be to install and configure its dependencies. Learn about it from tileserver-gl dependencies.

You could reproduce tileserver-gl in Deno, even reuse some of its source files if the license fits. But you might not need to! Depending on what you are trying to accomplish, you could just start tileserver-gl with Docker, and use Deno to request static map images from its API endpoints.

Veg