Skip to content

Commit

Permalink
RD-492_maplibre-v5.0.0-pre10 (#149)
Browse files Browse the repository at this point in the history 
* Update code for using maplibre v5.0.0-pre10

* Update examples

* Bump version
  • Loading branch information
@sebstryczek
sebstryczek authored Dec 19, 2024
1 parent d26edbe commit 8229240
Show file tree
Hide file tree
Showing 14 changed files with 559 additions and 907 deletions.
144 changes: 66 additions & 78 deletions demos/colorramps.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,84 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<style>
body {
margin: 10px;
padding: 0;
font-family: sans-serif;
}

#colorramp-contain > * {
margin-bottom: 6px;
display:flex;
}

#colorramp-contain > div > span {
width: 185px;
height: 20px;
line-height: 20px;
background: #eeeeee;
text-align: center;
margin-right: 5px;
border-radius: 3px;
color: #04040496;
font-size: 12px;
}

#colorramp-contain > div > canvas {
width: calc(100% - 190px);
border-radius: 3px;
}


#colorramp-contain > div:nth-of-type(1) > canvas
{
border: 1px dashed #00000059;
}


</style>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
body {
margin: 10px;
padding: 0;
font-family: sans-serif;
}

#colorramp-contain>* {
margin-bottom: 6px;
display: flex;
}

#colorramp-contain>div>span {
width: 185px;
height: 20px;
line-height: 20px;
background: #eeeeee;
text-align: center;
margin-right: 5px;
border-radius: 3px;
color: #04040496;
font-size: 12px;
}

#colorramp-contain>div>canvas {
width: calc(100% - 190px);
border-radius: 3px;
}


#colorramp-contain>div:nth-of-type(1)>canvas {
border: 1px dashed #00000059;
}
</style>
</head>

<body>
<div id="colorramp-contain"></div>

<div id="colorramp-contain"></div>
<script src="../build/maptiler-sdk.umd.min.js"></script>
<script>
const colorrampContainer = document.getElementById("colorramp-contain");

<script src="../build/maptiler-sdk.umd.js"></script>
<script>
const colorrampContainer = document.getElementById("colorramp-contain");
function displayColorRamp(name, colorramp, extraInfo = "") {
const canvas = colorramp.getCanvasStrip();
canvas.style.height = "20px";

function displayColorRamp(name, colorramp, extraInfo = "") {
const canvas = colorramp.getCanvasStrip();
canvas.style.height = "20px";
// canvas.style.width = "100%";
// canvas.style.border = "1px dashed #00000059";
const bounds = colorramp.getBounds()

const bounds = colorramp.getBounds()
const div = document.createElement("div");
const descSpan = document.createElement("span");
descSpan.innerHTML = `${name}${extraInfo}`;

const div = document.createElement("div");
const descSpan = document.createElement("span");
// descSpan.innerHTML = `${name}${extraInfo} [${bounds.min}, ${bounds.max}]`;
descSpan.innerHTML = `${name}${extraInfo}`;

div.appendChild(descSpan);
div.appendChild(canvas);
colorrampContainer.appendChild(div);
};

div.appendChild(descSpan);
div.appendChild(canvas);
colorrampContainer.appendChild( div );
}

Object.keys(maptilersdk.ColorRampCollection).forEach((k, i) => {
const colorramp = maptilersdk.ColorRampCollection[k];
displayColorRamp(k, colorramp);

// if (i === 0) return;
const colorramp = maptilersdk.ColorRampCollection[k];
displayColorRamp(k, colorramp);

// displayColorRamp(k, colorramp.resample("ease-in-square"), ', resampling method: "ease-in-square"')
// displayColorRamp(k, colorramp.resample("ease-in-sqrt"), ', resampling method: "ease-in-sqrt"')
// displayColorRamp(k, colorramp.resample("ease-in-exp"), ', resampling method: "ease-in-exp"')
// if (i === 0) return;

// displayColorRamp(k, colorramp.resample("ease-out-square"), ', resampling method: "ease-out-square"')
// displayColorRamp(k, colorramp.resample("ease-out-sqrt"), ', resampling method: "ease-out-sqrt"')
// displayColorRamp(k, colorramp.resample("ease-out-exp"), ', resampling method: "ease-out-exp"')
// displayColorRamp(k, colorramp.resample("ease-in-square"), ', resampling method: "ease-in-square"')
// displayColorRamp(k, colorramp.resample("ease-in-sqrt"), ', resampling method: "ease-in-sqrt"')
// displayColorRamp(k, colorramp.resample("ease-in-exp"), ', resampling method: "ease-in-exp"')


// displayColorRamp(k, colorramp.resample("ease-out-square"), ', resampling method: "ease-out-square"')
// displayColorRamp(k, colorramp.resample("ease-out-sqrt"), ', resampling method: "ease-out-sqrt"')
// displayColorRamp(k, colorramp.resample("ease-out-exp"), ', resampling method: "ease-out-exp"')

// colorrampContainer.appendChild( document.createElement("p") );
})




</script>
// colorrampContainer.appendChild( document.createElement("p") );
});
</script>
</body>
</html>

</html>
105 changes: 51 additions & 54 deletions demos/mountain.html
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
<html>
<head>
<title>MapTiler JS SDK example</title>
<style>
html, body {
margin: 0;
}

#map-container {
position: absolute;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
}
<head>
<title>MapTiler JS SDK example</title>
<style>
html,
body {
margin: 0;
}

#style-picker-container {
position: absolute;
z-index: 2;
margin: 10px;
}
#map-container {
position: absolute;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
}

</style>
#style-picker-container {
position: absolute;
z-index: 2;
margin: 10px;
}
</style>

<link rel="stylesheet" href="../build/maptiler-sdk.css">
</head>
<link rel="stylesheet" href="../build/maptiler-sdk.css">
</head>

<body>
<div id="map-container"></div>
<div id="style-picker-container">
<select name="mapstyles" id="mapstyles-picker">
<body>
<div id="map-container"></div>
<div id="style-picker-container">
<select name="mapstyles" id="mapstyles-picker"></select>
</div>

</select>
<script src="../build/maptiler-sdk.umd.min.js"></script>
<script>
maptilersdk.config.apiKey = "YOUR_API_KEY";

</div>

<script src ="../build/maptiler-sdk.umd.js"></script>

<script>
maptilersdk.config.apiKey = "YOUR_API_KEY";
const map = new maptilersdk.Map({
container: document.getElementById("map-container"),
style: maptilersdk.MapStyle.OUTDOOR.DARK,
hash: true,
geolocate: true,
scaleControl: true,
fullscreenControl: true,
terrainControl: true,
projectionControl: true,
});

const map = new maptilersdk.Map({
container: document.getElementById("map-container"),
style: maptilersdk.MapStyle.OUTDOOR.DARK,
hash: true,
scaleControl: true,
fullscreenControl: true,
terrainControl: true,
geolocate: true,
})
const styleDropDown = document.getElementById("mapstyles-picker");

const styleDropDown = document.getElementById("mapstyles-picker")
styleDropDown.onchange = (evt) => {
map.setStyle(styleDropDown.value)
};

styleDropDown.onchange = (evt) => {
map.setStyle(styleDropDown.value)
}
Object.keys(maptilersdk.MapStyle).forEach(s => {
const styleOption = document.createElement('option');
styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
styleDropDown.appendChild(styleOption);
});
</script>
</body>

Object.keys(maptilersdk.MapStyle).forEach(s => {
const styleOption = document.createElement('option');
styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
styleDropDown.appendChild(styleOption);
})


</script>
</body>
</html>
Loading

0 comments on commit 8229240

Please sign in to comment.