Go middleware package for mapzen.js
This package is no longer being maintained. You should use go-http-nextzenjs instead.
You will need to have both Go
(specifically a version of Go more recent than 1.6 so let's just assume you need Go 1.8 or higher) and the make
programs installed on your computer. Assuming you do just type:
make bin
All of this package's dependencies are bundled with the code in the vendor
directory.
Mapzen is no more. As I write this I am not really sure what the state of
nextzen.js (formerly mapzen.js
)
is. To top it off all the map vector tiles are now called Tilezen but are
hosted under the Nextzen domain. The same is true of
tangram.js.
It's a bit confusing but so is life.
So while this package bundles and exposes a copy of the old mapzen.js
it
won't work as you'd normally expect, like this:
// remember this data attribute is squirted in to the source via
// the MapzenJSHandler (.go) handler
var body = document.body;
var api_key = body.getAttribute("data-mapzen-api-key");
L.Mapzen.apiKey = api_key;
var map_opts = { tangramOptions: {
scene: L.Mapzen.BasemapStyles.Refill
}};
map = L.Mapzen.map('map', map_opts);
Or at least I'm not sure it will, as I write this. Instead what I (currently) do is this:
// remember this data attribute is squirted in to the source via
// the MapzenJSHandler (.go) handler
var body = document.body;
var api_key = body.getAttribute("data-mapzen-api-key");
var sources = {
mapzen: {
url: 'https://{s}.tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.topojson',
url_subdomains: ['a', 'b', 'c', 'd'],
url_params: {
api_key: api_key // not clear this actually works... ?
},
tile_size: 512,
max_zoom: 15
}
};
var scene = {
import: [
"/tangram/refill-style.zip",
"/tangram/refill-style-themes-label.zip",
],
sources: sources,
global: {
sdk_mapzen_api_key: api_key,
},
};
var attributions = {
"Tangram": "https://github.com/tangrams/",
"© OSM contributors": "http://www.openstreetmap.org/",
"Who\"s On First": "http://www.whosonfirst.org/",
"Nextzen": "https://nextzen.org/",
};
var attrs = [];
for (var label in attributions){
var link = attrs[label];
if (! link){
attrs.push(label);
continue;
}
var anchor = '<a href="' + link + '" target="_blank">' + enc_label + '</a>';
attrs.push(anchor);
}
var str_attributions = attrs.join(" | ");
// waiting for nextzen.js to be updated to do all the things - that said it's
// not entirely clear we need all of (map/next)zen.js and could probably get
// away with leaflet + tangram but for now we'll just keep on as-is...
// (20180304/thisisaaronland)
L.Mapzen.apiKey = api_key;
var map_opts = {
tangramOptions: {
scene: scene,
attribution: attributions,
}
};
map = L.Mapzen.map('map', map_opts);
Which, you know, arguably could be wrapped in a helper function/library exposed
by the MapzenJSAssetsHandler
handler but presumably nextzen.js
will (has
been) updated to point to all the new Nextzen things, right?
To further confuse matters it's on my list to update this package to bundle and expose plain vanilla Leaflet support for Tangram and Tilezen stuff but that hasn't happened yet.
So maybe this package should be called go-http-nextzen
... but it
isn't... yet... probably.
We'll figure it out soon but honestly, it's kind of a wonder anyone figured out how to use our (Mapzen) stuff at all. Which is why everything in this package is still called "mapzen".
This handler will optionally modify the output of the your_handler http.Handler
as follows:
- Append the relevant mapzen.js
script
andlink
elements to thehead
element. - Append a
data-mapzen-api-key
attribute (and value) to thebody
element.
import (
"github.com/whosonfirst/go-http-mapzenjs"
"net/http"
)
func main(){
opts := mapzenjs.DefaultMapzenJSOptions()
opts.APIKey = "mapzen-1a2b3c"
www_handler := YourDefaultWWWHandler()
mapzenjs_handler, _ := mapzenjs.MapzenJSHandler(www_handler, opts)
mux := http.NewServeMux()
mux.Handle("/", mapzenjs_handler)
Note that error handling has been removed for the sake of brevity.
The definition for MapzenJSOptions
looks like this:
type MapzenJSOptions struct {
AppendAPIKey bool
AppendJS bool
AppendCSS bool
APIKey string
JS []string
CSS []string
}
Default MapzenJSOptions
are:
opts := MapzenJSOptions{
AppendAPIKey: true,
AppendJS: true,
AppendCSS: true,
APIKey: "mapzen-xxxxxx",
JS: []string{"/javascript/mapzen.min.js"},
CSS: []string{"/css/mapzen.js.css"},
}
Given the following markup generated by your http.Handler
output:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="referrer" content="origin">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
</head>
<body>
<!-- and so on... ->
The MapzenJSHandler
handler will modify that markup to return:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="referrer" content="origin">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script type="text/javascript" src="/javascript/mapzen.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/mapzen.js.css" />
</head>
<body data-mapzen-api-key="mapzen-1a2b3c">
<!-- and so on... ->
The handler will serve mapzen.js and tangram.js related assets which have been bundled with this package.
import (
"github.com/whosonfirst/go-http-mapzenjs"
"net/http"
)
func main(){
mapzenjs_assets_handler, _ := mapzen.MapzenJSAssetsHandler()
mux := http.NewServeMux()
mux.Handle("/javascript/mapzen.js", mapzenjs_handler)
mux.Handle("/javascript/mapzen.min.js", mapzenjs_handler)
mux.Handle("/javascript/tangram.js", mapzenjs_handler)
mux.Handle("/javascript/tangram.min.js", mapzenjs_handler)
mux.Handle("/css/mapzen.js.css", mapzenjs_handler)
mux.Handle("/tangram/refill-style.zip", mapzenjs_handler)
}
You can update the various mapzen.js
and tangram.js
assets manually by invoking the build
target in the included Makefile.
Currently the following styles are bundled with this package:
- Add a tile caching proxy