How to capture a leaflet / mapbox image with a geoJSON layer?

Question

I've taken the basic leaflet-image example here: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/

And modified it by adding a very simple geoJSON layer to the map:

var dataJson = JSON.parse(data);
var segLayer = L.geoJson(dataJson);
segLayer.addTo(map);
map.fitBounds(segLayer.getBounds());

https://jsfiddle.net/fexymjy3/10/

When I hit the "Take a snapshot" button, I get the following error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

I've seen the leaflet-image readme: https://github.com/mapbox/leaflet-image/blob/gh-pages/README.md

Which states

You must set L_PREFER_CANVAS = true; so that vector layers are drawn in Canvas rather than SVG or VML.

But it doesn't say where to set that. I tried it setting it on my segLayer, on the map, and just globally but it doesn't fix the error. What am I doing wrong?

111 111 · Accepted Answer · 2015-07-20T12:15:41

Mapbox static maps API will be used to asynchronous imagery fetching.

Using This link and MapID you can see your map image preview also.

See this example for how to use Static map API with GeoJSON.

Add your updated JSFiddle

L.mapbox.accessToken = 'pk.eyJ1IjoiZGF2aWRsb3R0IiwiYSI6IjdlNmU1ZWUyMDE5MDcwMDQ5YTNiN2IyZTIzYjZkNTg5In0.sDTxz1C0DTl3UH7AguCBXg';

var snapshot = document.getElementById('snapshot');
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([38.88995, -77.00906], 15);

var data = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Line":85,"Seg":873},"geometry":{"type":"LineString","coordinates":[[-105.68659973,43.22522736],[-105.67418671,43.14464951],[-105.67417145,43.14464569]]}}]}';

var dataJson = JSON.parse(data);
var segLayer = L.geoJson(dataJson);

segLayer.addTo(map);

map.fitBounds(segLayer.getBounds());

document.getElementById('snap').addEventListener('click', function() {

    var center = map.getCenter()
    console.log(map.getCenter());


    var jsonData = {
        "type": "Feature",
        "properties": {
            "stroke-width": 4,
            "stroke": "#ff4444",
            "stroke-opacity": 0.5
        },
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [-105.68659973, 43.22522736],
                [-105.67418671, 43.14464951],
                [-105.67417145, 43.14464569]
            ]
        }
    };

    var encodedData = encodeURIComponent(JSON.stringify(jsonData));

    console.log(encodedData);

    var imageUrl = "https://api.tiles.mapbox.com/v4/mapbox.streets/geojson(" + encodedData + ")/" + center.lng + "," + center.lat + "," + map._zoom + "/500x300.png?access_token=pk.eyJ1IjoiZGF2aWRsb3R0IiwiYSI6IjdlNmU1ZWUyMDE5MDcwMDQ5YTNiN2IyZTIzYjZkNTg5In0.sDTxz1C0DTl3UH7AguCBXg";

    console.log(imageUrl);

    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = imageUrl;
    snapshot.innerHTML = '';
    snapshot.appendChild(img);

});

  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

.ui-button {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1000;
  }
#map {
  width:50%;
  }
#snapshot {
  position:absolute;
  top:0;bottom:0;right:0;
  width:50%;
  }

<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css"/>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js"></script>
<button id='snap' class='ui-button'>Take a snapshot</button>
<div id='snapshot'></div>
<div id='map'></div>

How to capture a leaflet / mapbox image with a geoJSON layer?

2 Answers