Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add worldview and places params #214

Merged
merged 6 commits into from
Dec 5, 2023
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions examples/basemap-places.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Esri Leaflet Vector: Display basemap places</title>

<!-- Load Leaflet from CDN or local node_modules -->
<link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
<script src="../node_modules/leaflet/dist/leaflet.js"></script>

<!--
Load maplibre-gl from CDN or local node_modules for dev/debug purposes because it is not bundled in Esri Leaflet Vector's dev/debug code
(note also that loading maplibre-gl.css is not necessary)
-->
<!-- script src="../node_modules/maplibre-gl/dist/maplibre-gl.js"></script -->
<script src=https://unpkg.com/[email protected]/dist/maplibre-gl.js></script>

<!-- Load Esri Leaflet and Esri Leaflet Vector plugin dev/debug version -->
<script src="../node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
<script src="../dist/esri-leaflet-vector-debug.js"></script>

<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;

}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map("map", {
minZoom: 2
}).setView([34.101, -118.339], 17);
const apiKey = "<YOUR ARCGIS API KEY HERE>";

const basemapStyle = "arcgis/navigation";

const getLayer = places => {
return L.esri.Vector.vectorBasemapLayer(basemapStyle, {
apiKey: apiKey,
version: 2,
places:places
})
}

const placeOptions = {
"all":getLayer("all").addTo(map), // Show all places
"attributed":getLayer("attributed"), // Show places with attributes
"none":getLayer("none") // Hide all places
};

L.control.layers(placeOptions, null, { collapsed: false }).addTo(map);

map.on('baselayerchange', e=>{
console.log(e);
})
</script>

</body>
</html>
2 changes: 1 addition & 1 deletion examples/languages.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}).setView([35.7088, 48.8790], 4);


const apiKey = "< YOUR ARCGIS API KEY HERE >";
const apiKey = "<YOUR ARCGIS API KEY HERE>";

const basemapStyle = "arcgis/outdoor";

Expand Down
77 changes: 77 additions & 0 deletions examples/worldview.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Esri Leaflet Vector: Display basemap places</title>

<!-- Load Leaflet from CDN or local node_modules -->
<link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
<script src="../node_modules/leaflet/dist/leaflet.js"></script>

<!--
Load maplibre-gl from CDN or local node_modules for dev/debug purposes because it is not bundled in Esri Leaflet Vector's dev/debug code
(note also that loading maplibre-gl.css is not necessary)
-->
<script src="../node_modules/maplibre-gl/dist/maplibre-gl.js"></script>

<!-- Load Esri Leaflet and Esri Leaflet Vector plugin dev/debug version -->
<script src="../node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
<script src="../dist/esri-leaflet-vector-debug.js"></script>

<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;

}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map("map", {
minZoom: 2
}).setView([35.7088, 48.8790], 4);

const apiKey = "<YOUR ARCGIS API KEY HERE>";

const basemapStyle = "arcgis/light-gray";

const getLayer = worldview => {
return L.esri.Vector.vectorBasemapLayer(basemapStyle, {
apiKey: apiKey,
version: 2,
worldview:worldview
})
}
const worldviewOptions = {
"china":getLayer("china").addTo(map),
"india":getLayer("india"),
"israel":getLayer("israel"),
"japan":getLayer("japan"),
"morocco":getLayer("morocco"),
"pakistan":getLayer("pakistan"),
"southKorea":getLayer("southKorea"),
"unitedArabEmirates":getLayer("unitedArabEmirates"),
"vietnam":getLayer("vietnam")
};
gowin20 marked this conversation as resolved.
Show resolved Hide resolved

L.control.layers(worldviewOptions, null, { collapsed: false }).addTo(map);

map.on('baselayerchange', e=>{
console.log(e);
})
</script>

</body>
</html>
28 changes: 26 additions & 2 deletions spec/VectorBasemapLayerSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const basemapKey = 'ArcGIS:Streets';
const basemapKeyV2 = 'arcgis/streets';
const customBasemap = 'f04f33b9626240f084cb52f0b08758ef';
const language = 'zh_s';
const worldview = 'morocco';
const places = 'attributed';

describe('VectorBasemapLayer', function () {
it('should have a L.esri.vectorBasemapLayer alias', function () {
Expand Down Expand Up @@ -129,14 +131,18 @@ describe('VectorBasemapLayer', function () {
expect(layer.options.version).to.equal(2);
});

it('should save the language from the constructor', function () {
it('should save the language and worldview parameters from the constructor', function () {
const layer = new L.esri.Vector.vectorBasemapLayer(basemapKeyV2, {
apikey: apikey,
version: 2,
language: language
language: language,
worldview: worldview,
places: places
});

expect(layer.options.language).to.equal(language);
expect(layer.options.worldview).to.equal(worldview);
expect(layer.options.places).to.equal(places);
});

it('should error if a language is provided when accessing the v1 service', function () {
Expand All @@ -148,6 +154,24 @@ describe('VectorBasemapLayer', function () {
}).to.throw('The language parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
});

it('should error if a worldview is provided when accessing the v1 service', function () {
expect(function () {
L.esri.Vector.vectorBasemapLayer(basemapKey, {
apikey: apikey,
worldview: worldview
});
}).to.throw('The worldview parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
});

it('should error if a places parameter is provided when accessing the v1 service', function () {
expect(function () {
L.esri.Vector.vectorBasemapLayer(basemapKey, {
apikey: apikey,
places: places
});
}).to.throw('The places parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
});

it('should not accept a v2 style enumeration when accessing the v1 service', function () {
expect(function () {
L.esri.Vector.vectorBasemapLayer(basemapKeyV2, {
Expand Down
19 changes: 12 additions & 7 deletions src/Util.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function getBasemapStyleUrl (style, apikey) {
return url;
}

export function getBasemapStyleV2Url (style, apikey, language) {
export function getBasemapStyleV2Url (style, token, options) {
gowin20 marked this conversation as resolved.
Show resolved Hide resolved
if (style.includes(':')) {
throw new Error(style + ' is a v1 style enumeration. Set version:1 to request this style');
}
Expand All @@ -30,19 +30,24 @@ export function getBasemapStyleV2Url (style, apikey, language) {
// style is an itemID
url = url + 'items/' + style;

if (language) {
if (options.language) {
throw new Error('The \'language\' parameter is not supported for custom basemap styles');
}
} else {
url = url + style;
}

if (apikey) {
url = url + '?token=' + apikey;
if (!token) throw new Error('A token is required to access basemap styles.');

if (language) {
url = url + '&language=' + language;
}
url = url + '?token=' + token;
if (options.language) {
url = url + '&language=' + options.language;
}
if (options.worldview) {
url = url + '&worldview=' + options.worldview;
}
if (options.places) {
url = url + '&places=' + options.places;
}
return url;
}
Expand Down
18 changes: 14 additions & 4 deletions src/VectorBasemapLayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,17 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
if (!(options.apikey || options.apiKey || options.token)) {
throw new Error('An API Key or token is required for vectorBasemapLayer.');
}
// Validate language param
if (options.language) {
if (options.version !== 2) {
// Validate v2 service params
if (options.version !== 2) {
if (options.language) {
throw new Error('The language parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
}
if (options.worldview) {
throw new Error('The worldview parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
}
if (options.places) {
throw new Error('The places parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
}
}
// Determine layer order
if (!options.pane) {
Expand All @@ -51,7 +57,11 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
_createLayer: function () {
let styleUrl;
if (this.options.version && this.options.version === 2) {
styleUrl = getBasemapStyleV2Url(this.options.key, this.options.apikey, this.options.language);
styleUrl = getBasemapStyleV2Url(this.options.key, this.options.apikey, {
language: this.options.language,
worldview: this.options.worldview,
places: this.options.places
});
} else {
styleUrl = getBasemapStyleUrl(this.options.key, this.options.apikey);
}
Expand Down