Skip to content

Commit

Permalink
feature(Widgets): add a widget to display a scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgermerie @gchoqueux
mgermerie authored and gchoqueux committed Mar 10, 2022
1 parent 25080d9 commit d3a0154
Show file tree
Hide file tree
Showing 12 changed files with 278 additions and 131 deletions.
9 changes: 7 additions & 2 deletions docs/config.json
View file
Expand Up @@ -124,8 +124,13 @@
"Plugins": [
"DragNDrop",
"FeatureToolTip",
"TIFFParser",
"Navigation"
"TIFFParser"
],

"Widgets": [
"Navigation",
"Minimap",
"Scale"
]
},
"tutorialSections": {
Expand Down
3 changes: 2 additions & 1 deletion examples/config.json
View file
Expand Up @@ -80,7 +80,8 @@

"Widgets": {
"widgets_navigation": "Navigation",
"widgets_minimap": "Minimap"
"widgets_minimap": "Minimap",
"widgets_scale": "Scale"
},

"Plugins": {
Expand Down
33 changes: 33 additions & 0 deletions examples/css/widgets.css
View file
Expand Up @@ -246,3 +246,36 @@
font-size: 40px;
color: #222222;
}



/* ---------- SCALE WIDGET SETTINGS : ------------------------------------------------------------------------------- */

#widgets-scale {
user-select: none;

position: absolute;
z-index: 10;
padding: 0 10px;
box-sizing: border-box;

display: flex;
align-items: center;

border: 1px solid #ffffffcc;
border-radius: 0 0 7px 7px;
border-top: none;

background-image: linear-gradient(#31333600, #313336ff);

color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}

#widgets-scale.left-widget {
justify-content: flex-start;
}
#widgets-scale.right-widget {
justify-content: flex-end;
}
41 changes: 0 additions & 41 deletions examples/js/Scale.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion examples/mars.html
View file
Expand Up @@ -11,7 +11,6 @@
</head>
<body>
<div id="viewerDiv"></div>
<span id="divScaleWidget"> Scale </span>
<div id="miniDiv"></div>

<script src="js/GUI/GuiTools.js"></script>
Expand Down
26 changes: 7 additions & 19 deletions examples/misc_orthographic_camera.html
View file
Expand Up @@ -5,6 +5,7 @@

<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<link rel="stylesheet" type="text/css" href="css/widgets.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
Expand All @@ -20,13 +21,12 @@
</ul>
</div>
<div id="viewerDiv"></div>
<span id="divScaleWidget"> Scale </span>

<script src="../dist/itowns.js"></script>
<script src="../dist/debug.js"></script>
<script src="../dist/itowns_widgets.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="js/GUI/GuiTools.js"></script>
<script src="js/Scale.js"></script>
<script type="text/javascript">
/* global itowns, setupLoadingScreen, GuiTools, debug */

Expand Down Expand Up @@ -74,24 +74,12 @@
});
view.addLayer(wmsImageryLayer);

// Initialize scale :
const initialScaleSize = 200; // in pixel
const divScaleWidget = document.getElementById('divScaleWidget');
function updateScaleWidget() {
let computedScale = roundPixelsFromMeters(view, initialScaleSize);
let format = getMetersUnit(computedScale.meters);
divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
divScaleWidget.style.width = `${computedScale.pixels}`;
}
// Updates scale when needed :
view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('View initialized');
updateScaleWidget();
// Add a scale :
const scale = new itowns_widgets.Scale(view, {
position: 'bottom-right',
translate: { x: -120 },
});
view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
updateScaleWidget();
})

// request redraw
view.notifyChange();

Expand Down
25 changes: 6 additions & 19 deletions examples/view_25d_map.html
View file
Expand Up @@ -5,6 +5,7 @@
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<link rel="stylesheet" type="text/css" href="css/widgets.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
Expand All @@ -23,13 +24,12 @@
</ul>
</div>
<div id="viewerDiv" class="viewer"></div>
<span id="divScaleWidget"> Scale </span>

<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>
<script src="../dist/itowns_widgets.js"></script>
<script src="js/GUI/GuiTools.js"></script>
<script src="js/Scale.js"></script>
<script type="text/javascript">
// Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
Expand Down Expand Up @@ -125,23 +125,10 @@

view.addLayer(wfsCartoLayer);

// Initialize scale :
const initialScaleSize = 200; // in pixel
const divScaleWidget = document.getElementById('divScaleWidget');
function updateScaleWidget() {
let computedScale = roundPixelsFromMeters(view, initialScaleSize);
let format = getMetersUnit(computedScale.meters);
divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
divScaleWidget.style.width = `${computedScale.pixels}`;
}
// Updates scale when needed :
view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('view initialized');
updateScaleWidget();
});
view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
updateScaleWidget();
// Add a scale :
const scale = new itowns_widgets.Scale(view, {
position: 'bottom-right',
translate: { x: -120 },
});

// Request redraw
Expand Down
25 changes: 6 additions & 19 deletions examples/view_2d_map.html
View file
Expand Up @@ -5,16 +5,16 @@
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<link rel="stylesheet" type="text/css" href="css/widgets.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="viewerDiv"></div>
<span id="divScaleWidget"> Scale </span>

<script src="../dist/itowns.js"></script>
<script src="../dist/itowns_widgets.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="js/Scale.js"></script>
<script type="text/javascript">
// # Orthographic viewer

Expand Down Expand Up @@ -67,24 +67,11 @@

view.addLayer(opensmLayer);

// Initialize scale :
const initialScaleSize = 200; // in pixel
const divScaleWidget = document.getElementById('divScaleWidget');
function updateScaleWidget() {
let computedScale = roundPixelsFromMeters(view, initialScaleSize);
let format = getMetersUnit(computedScale.meters);
divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
divScaleWidget.style.width = `${computedScale.pixels}`;
}
// Updates scale when needed :
view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('View initialized');
updateScaleWidget();
// Add a scale :
const scale = new itowns_widgets.Scale(view, {
position: 'bottom-right',
translate: { x: -120 },
});
view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
updateScaleWidget();
})

// Request redraw
view.notifyChange();
Expand Down
32 changes: 3 additions & 29 deletions examples/view_3d_map.html
View file
Expand Up @@ -5,19 +5,20 @@
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<link rel="stylesheet" type="text/css" href="css/widgets.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv"></div>
<span id="divScaleWidget"> Scale </span>
<div id="miniDiv"></div>

<script src="js/GUI/GuiTools.js"></script>
<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>
<script src="../dist/itowns_widgets.js"></script>
<script type="text/javascript">
// # Simple Globe viewer
// Define initial camera position
Expand Down Expand Up @@ -89,32 +90,7 @@
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

var menuGlobe = new GuiTools('menuDiv', view);
var divScaleWidget = document.getElementById('divScaleWidget');

function updateScaleWidget() {
var value = view.getPixelsToMeters(200);
value = Math.floor(value);
var digit = Math.pow(10, value.toString().length - 1);
value = Math.round(value / digit) * digit;
var pix = view.getMetersToPixels(value);
var unit = 'm';
if (value >= 1000) {
value /= 1000;
unit = 'km';
}
divScaleWidget.innerHTML = `${value} ${unit}`;
divScaleWidget.style.width = `${pix}px`;
}

// Listen for globe full initialisation event
view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('Globe initialized');
updateScaleWidget();
});
view.controls.addEventListener(itowns.CONTROL_EVENTS.RANGE_CHANGED, () => {
updateScaleWidget();
});
const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -120 } });

const atmosphere = view.getLayerById('atmosphere');
atmosphere.setRealisticOn(!view.isDebugMode);
Expand All @@ -124,8 +100,6 @@
view.notifyChange(atmosphere);
});

window.addEventListener('resize', updateScaleWidget);

debug.createTileDebugUI(menuGlobe.gui, view);
</script>
</body>
Expand Down

0 comments on commit d3a0154

Please sign in to comment.